Trigger jQuery 'if statement' on resize

У меня есть код jQuery, который я хотел бы запускать в зависимости от ширины экрана. Я хочу, чтобы это активировалось при загрузке страницы и изменило размер окна браузера. В настоящее время он загружается только при загрузке страницы.Trigger jQuery 'if statement' on resize

$(function(){ 
    if ($(window).width() < 720) { 
    $(".mobile").click(function(){ 
     $("#mobile").toggle(); 
    }); 
    } else { 
    $(".desktop").click(function(){ 
     $("#desktop").toggle(); 
    }); 
    } 
});

E.g. если пользователь загружается на рабочий стол и уменьшает размер, мобильный клик не запускается, если пользователь не обновит страницу.

У меня есть googled вокруг и понимаю, что мне нужно использовать событие jQuery resize, но я не могу заставить его работать.

Любая помощь была бы принята с благодарностью. Вот код ... http://codepen.io/anon/pen/WbxKrv

источник

2014-12-19 Adam

Посмотрите на 'matchMedia'. – SLaks

↑↑↑ https://developer.mozilla.org/en-US/docs/Web/API/window.matchMedia –

Уверен, но это все еще не срабатывает при изменении размера, если я не ошибаюсь? Вот мой пример http://codepen.io/anon/pen/RNRBGv – Adam

Это то, что я пытаюсь достичь - http://codepen.io/anon/pen/azmvWE

функция JQuery теперь срабатывает при загрузке страницы, а также изменение размеров ...

function checksize() { 
    if ($(window).width() < 720) { 
    $(".mobile").click(function(){ 
     $("#mobile").toggle(); 
    }); 
    } else { 
    $(".desktop").click(function(){ 
     $("#desktop").toggle(); 
    }); 
    } 
} 

checksize(); 

$(window).resize(checksize);

источник

2014-12-23 10:05:23 Adam

Из вашего комментария ниже, вы не переходите на это с помощью кликов пользователей в конце концов. (. Не уверен, что click обработчики в вашем примере кода предназначены, чтобы быть, в то время)

Лучший способ справиться с этим с помощью CSS, а не JavaScript, с помощью средств массовой информации селекторов:

@media screen and (max-width: 720px) { 
    selector-for-your-big-screen-only-content { 
     display: none; 
    } 
} 
@media screen and (min-width: 721px) { 
    selector-for-your-small-screen-only-content { 
     display: none; 
    } 
}

Подробнее: http://www.w3.org/TR/css3-mediaqueries/

Оригинальный ответ:

Я принимаю это ваша цель состоит в том, чтобы шо w на мобильный или рабочий сайт либо автоматически, либо когда пользователь нажимает кнопку.

Фундаментально, вы положили логику в функциях и использовать их:

$(function(){ 

    // Auto select on load and resize 
    autoSelect(); 
    $(window).on("resize.autoselect", autoSelect); 

    // If user makes an explicit choice, switch to their choice and don't 
    // auto-select anymore 
    $(".mobile").click(function() { 
    showMobile(true); 
    $(window).off("resize.autoselect"); 
    }); 
    $(".desktop").click(function() { 
    showMobile(false); 
    $(window).off("resize.autoselect"); 
    }); 

    function autoSelect() { 
    if ($(window).width() < 720) { 
     showMobile(true); 
    } else { 
     showMobile(false); 
    } 
    } 

    function showMobile(flag) { 
    $("#mobile").toggle(flag); 
    $("#desktop").toggle(!flag); 
    } 
});

источник

2014-12-19 16:53:41

Нет. Я хочу показывать только рабочий стол на рабочем столе и на мобильном телефоне. Он отлично работает, как в исходном коде, я просто хочу, чтобы при изменении размера окна вы автоматически активировали кнопку мобильного телефона, а не обновляли страницу в мобильном режиме. – Adam

@Adam: Затем удалите обработчики 'click' из приведенного выше. (Для чего они предназначены, если не позволяют пользователю это делать?). Основной момент заключается в том, что вы ставите логику, которая принимает решение в функции, вызываете эту функцию при загрузке, а затем вызываете ее снова при изменении размера. –

Нет обработчиков кликов, чтобы продемонстрировать простой тестовый пример использования javascript. Хорошо, дайте мне попробовать и перефразировать. Предположим, что я нахожусь на рабочем столе (ширина больше 720 пикселей). Я нажимаю на кнопку рабочего стола, и отображается текст рабочего стола. Это прекрасно, и если я попробую щелкнуть по мобильной кнопке, ничего не произойдет, и это нормально. Теперь, когда я изменяю размер окна до уровня ниже 720 пикселей, я хочу, чтобы у меня была возможность щелкнуть по мобильной кнопке, и отобразите этот мобильный текст без обновления моего окна. Имеет ли это смысл? – Adam

-1

Вы можете использовать this. Здесь вам нужно добавить атрибут onresize в тег body и функцию вызова, где написана ваша логика.

<body onresize="myFunction()">

источник

2014-12-19 17:00:53

Trigger jQuery 'if statement' on resize

ответ

Смежные вопросы