How to disable javascript for responsive design
Solution 1
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.
Solution 2
You can detect the screen width with JavaScript, using screen.width, and then determine what you want to do from there.
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
}
Wrap all of your animations and all the code you don't want to run inside the else block for cases where the screen size is less than 480.
As a word of caution, IE tends to do things different, and I don't have IE to test, so you may want to run screen.width there and adjust for any differences, if necessary. But in Chrome, screen.width returns 1280, which is the correct width for my screen.
Solution 3
You could set a hidden div with some css rules within a media query, then check those css attributes with jQuery's css()
and based on that turn your slideshow on or off. Specifically:
@media all and (max-width: 480px) {
#testdiv{
display:none;
}
}
And js:
if($("#testdiv").css("display") == "none"){
$.supersized({...});
}
Note that this is essentially using the Modernizr approach without actually getting the library.
Suzi Larsen
Updated on July 09, 2022Comments
-
Suzi Larsen almost 2 years
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?
-
͢bts almost 9 yearsThis'll work but if you decide you'd like this functionality at 500px instead you'd need to update your mediaquery AND javascript. Using Asad's solution you'd only need to update the mediaquery