Как отключить JavaScript для адаптивного дизайна

Я использовал сверхразмерный jQuery для фона слайд-шоу на моем веб-сайте. Я делаю веб-сайт отзывчивым и использую медиа-запросы css.

Я хотел бы иметь возможность отключить скрипт, когда он ниже 480 пикселей.

Вот скрипт для фактического фона слайдера

$(document).ready(function(){

         jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   0,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   3000,       // Length between transitions
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                                                    {image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

Я думал, что смогу сделать это, просто используя css, например, в моем медиа-запросе, просто поставив #supersized как display:none

Является ли это плохой практикой, поскольку скрипт все еще будет работать, и лучше ли его как-то отключить?


javascript jquery css responsive-design modernizr
person Suzi Larsen    schedule 05.11.2012    source источник
comment
Вы можете использовать Modernizr для выполнения медиа-запросов из JavaScript.   -  person Pointy    schedule 05.11.2012
comment
вы можете просто проверить, больше ли окно, чем 480px ........ $(document).ready(function(){ if($(window).width()›480){ // ЗДЕСЬ ВАШ КОД / / } });   -  person Jozzeh    schedule 05.11.2012

Ответы (6)


arrow_upward
9
arrow_downward

Как уже упоминалось, существует множество плагинов jQuery, которые вы можете использовать. Однако, если все, что вы хотите использовать, это просто ванильный jQuery, вы также можете делать то, что хотите.

Вы можете использовать метод изменения размера в jquery, чтобы определить размер окна.

$(window).resize(function() {
   if ($(this).width() > 480) {
      // call supersize method
   }
});

Затем, когда документ готов, просто обязательно вызовите окно изменения размера, чтобы оно изначально вызывало или не вызывало метод в зависимости от текущего размера вашего окна:

$(document).ready(function() {
   $(window).resize();
});

PS > Если вам не нужно, чтобы этот сценарий запускался каждый раз при изменении размера окна, а только тогда, когда оно достигает размера менее 480 пикселей, можно внести небольшие изменения, чтобы отменить привязку метода изменения размера после того, как ваш сценарий необходимо отключить или включить.

person Andrew White    schedule 05.11.2012
comment
Это будет работать, но если вы решите, что вам нужна эта функциональность при разрешении 500 пикселей, вам нужно будет обновить свой медиазапрос И javascript. Используя решение Асада, вам нужно только обновить медиазапрос - person ͢bts; 27.07.2015

arrow_upward
6
arrow_downward

Вы можете определить ширину экрана с помощью JavaScript, используя screen.width, а затем определить, что вы хотите сделать оттуда.

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

Поместите все свои анимации и весь код, который вы не хотите запускать, в блок else для случаев, когда размер экрана меньше 480.

В качестве предостережения, IE имеет тенденцию делать разные вещи, и у меня нет IE для тестирования, поэтому вы можете запустить там screen.width и при необходимости настроить любые различия. Но в Chrome screen.width возвращает 1280, что является правильной шириной для моего экрана.

person jmort253    schedule 05.11.2012

arrow_upward
4
arrow_downward

Вы можете установить скрытый div с некоторыми правилами css в медиа-запросе, затем проверить эти атрибуты css с помощью jQuery css() и на основе этого включить или выключить слайд-шоу. Конкретно:

@media all and (max-width: 480px) {
    #testdiv{
        display:none;
    }
}

И js:

if($("#testdiv").css("display") == "none"){
    $.supersized({...});
}

Обратите внимание, что это, по сути, использует подход Modernizr без фактического получения библиотеки.

person Asad Saeeduddin    schedule 05.11.2012

arrow_upward
0
arrow_downward

jRespond, скрипт, выпущенный Viget, позволяет вам управлять JavaScript в зависимости от размера области просмотра:

Статья: http://viget.com/inspire/managing-javascript-on-responsive-websites

Код: https://github.com/ten1seven/jRespond

person amustill    schedule 05.11.2012

arrow_upward
0
arrow_downward

Как отметил @Pointy в комментариях, modernizr позволяет вам вызывать медиа-запросы из javascript. Ознакомьтесь с документацией по modernizr.

person Mark Meyer    schedule 05.11.2012

arrow_upward
0
arrow_downward

Я думаю, что решение Асада является лучшим, или вы используете модерниз. Потому что у вас есть определение точки останова (480px) в одном файле, а не в JS и в CSS. Если вы используете SCSS, у вас есть только одно определение точки останова в переменной.

person christophel    schedule 03.12.2013