Как написать код, который вызывается только на определенном разрешении экрана?

Question

[vvvadimos]

Допустим есть три блока текста, расположенные в одну строку, которые должны быть одинаковы по высоте. Пишу функцию, которая определит максимальную высоту и подставит ее всем блокам. ок. но при ресайзе окна она должна пересчитываться, так как текст уже занимает иное пространство, + на каком-то разрешении с высотой ничего не нужно делать, потому что блоки уже расположены вертикально.
итого у меня код примерно так выглядит:

if(viewportWidth() > 700px){
     setHeight();
}

$(window).resize(function(){
     if(viewportWidth() > 700px){
          setHeight();
     }
});

но это какая-то херня некрасивая. + есть проблемы, вообщем чтоб написать простую вещь, нужно много чего учитывать

так вот подскажите как сделать все красиво и безбагово (готовые плагины вариант не очень)

Answer 1

[FMars]

Описанная задача решается средствами CSS.

Answer 2

[Шухратджон Джумаев]

Вот, должно сработать. Работает при загрузке страницы так и при изменения размеры страницы.

function windowSize(){
    if ($(window).width() > 700px){
        Ваш код
    } else {
        Ваш код
    }
}

$(window).on('load resize',windowSize());

Не знаю сработает или нет но, попробуйте вызвать эту функцию сразу после ваших блоков:

<div class="vashiBloki>
</div>
<script type="text/javascript">
function windowSize(){
    if ($(window).width() > 700px){
        Ваш код
    } else {
        Ваш код
    }
}
windowSize() </script>

Comments

[vvvadimos]

а не на загрузку страницы можно как-то повесить? вариант почти оптимальный, только вот допустим ситуация: страница большая, тяжелая, грузится пусть секунд 5, и код не отработает пока эти 5 сек не пройдут, и это не очень

[Шухратджон Джумаев]

vvvadimos: вы хотите не дожидаясь этих 5сек выполнить это действие?

[vvvadimos]

да

[vvvadimos]

такое чувство что последний коммент не вы написали) сверху четкий код, снизу шняга)

[Шухратджон Джумаев]

vvvadimos: хахахах я не был уверен)))) думал он выполнится по мере загружения страницы

[Шухратджон Джумаев]

vvvadimos: Тогда CSS вам в помощь

[vvvadimos]

да css не

Answer 3

[vvvadimos]

да я знаю что такая задача решается cssом, проблема не именно в этой задаче, а в том что есть и другие, где все делается яваскриптом

Comments

[vvvadimos]

но вообще эта задача не решится стилями, потому что html не такой как вы думаете) короче не по css тут вопрос

Answer 4

[Олег]

Если на CSS не вариант, то что-то типа такого:

$(window).on('load resize', function(e) { setHeight(); });

function setHeight() {
	if($(document).width() < 700) return;
	...
}

Comments

[Шухратджон Джумаев]

А чем ваш ответ отличается от моего?

[Олег]

Шухратджон Джумаев: Вы раньше) А еще $(window).width() вернет число, в вашем примере в if нужно убрать px.