Question

149

How to disable javascript for responsive design

rated 0 times [ 156] [ 7] / answers: 1 / hits: 32752 / 12 Years ago, mon, november 5, 2012, 12:00:00

I have been using supersized jQuery for the slideshow background of my website. I am making the website responsive and using css media queries.

I would like to be able to disable the script when it is below 480px.

Here is the script for the actual slider background

$(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



            });

        });

I was thinking I could do this simply by just using the css, for example in my media query just putting #supersized as display:none

Is this bad practice though as it would still have the script running and is it best to disable it somehow?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

iyannae

Add To Favorites

Follow

Total Points: 147

Total Questions: 88

Total Answers: 120

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

answered 12 Years ago yaquelina · Accepted Answer

As others mentioned, there are plenty of jQuery plugins you can use. However, if all you want to use is just plain vanilla jQuery you can also do what you want.

You can use the resize method in jquery to detect the size of the window.

$(window).resize(function() {

   if ($(this).width() > 480) {

      // call supersize method

   }

});

Then on doc ready, just be sure to call the resize window so it will initially call or not call the method depending on your window's current size:

$(document).ready(function() {

   $(window).resize();

});

PS > If you do not need this script to run every time the window resizes, but rather only when it reaches below 480 pixels, slight modifications can be made to unbind the resize method after your script needs to be disabled or enabled.