Включить скрипт jQuery в нижний колонтитул только на мобильном устройстве и изменять размер

Я пытаюсь включить плагин jQuery от Codrops - который превращает меню в панель слева и снизу. Я бы хотел использовать то же меню, что и обычная верхняя панель на экранах рабочего стола, просто меняя стили идентификатора и классов, которые идут с демо. Мне было интересно, что является лучшим решением Javascript, чтобы включить скрипты плагина на максимальной ширине 768, а затем удалить их на что-нибудь большее. Я бы хотел, чтобы он самостоятельно проверял и обновлял браузер при изменении размера. Вот что у меня так далеко...

 <script>
  (function() {
if( window.innerWidth > 600 ) {
   $.getSscript("assets/js/modernizr.custom.js");
   $.getSscript("assets/js/classie.js");
   $.getSscript("assets/js/borderMenu.js");
}
 })();
 </script>

1 ответ

Решение

Поэтому я провел небольшое исследование и, думаю, нашел альтернативный ответ. Он не связывает скрипты, но вы можете скопировать и вставить их в функцию, которая вызывается на экранах мобильных устройств.

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

    /////////////////////////////////
    // MATCH MEDIA FOR MOBILE MENU //
    /////////////////////////////////  

   /* JavaScript Media Queries */
if (matchMedia) {
    //*change this to whatever size screens you'd like, I wanted mine to only work on 768 or below
    var mq = window.matchMedia("(min-width: 768px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

   //* Put jQuery plugin's code here


}

Пока все работает отлично. Дайте мне знать, если вы заметили что-либо, что можно изменить в приведенном выше коде.

Спасибо Крейгу Баклеру из OptimalWorks.net за его великолепное руководство и пример кода.

Другие вопросы по тегам