Как отключить JavaScript для адаптивного дизайна
Я использовал суперразмерный jQuery для фона слайд-шоу моего сайта. Я делаю сайт отзывчивым и использую css медиа запросы.
Я хотел бы иметь возможность отключить скрипт, когда он ниже 480px.
Вот скрипт для фактического фона слайдера
$(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
Это плохая практика, хотя скрипт все еще работает и лучше его как-то отключить?
6 ответов
Как уже упоминалось, есть множество плагинов jQuery, которые вы можете использовать. Однако, если все, что вы хотите использовать, - это просто обычный jQuery, вы также можете делать то, что хотите.
Вы можете использовать метод изменения размера в jquery, чтобы определить размер окна.
$(window).resize(function() {
if ($(this).width() > 480) {
// call supersize method
}
});
Затем, когда документ готов, просто вызовите окно изменения размера, чтобы оно первоначально вызывало или не вызывало метод в зависимости от текущего размера вашего окна:
$(document).ready(function() {
$(window).resize();
});
PS> Если вам не нужен этот скрипт для запуска каждый раз, когда размер окна изменяется, а скорее только когда он достигает значения ниже 480 пикселей, можно внести небольшие изменения, чтобы отсоединить метод resize после того, как ваш скрипт должен быть отключен или включен.
Вы можете определить ширину экрана с помощью 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, что является правильной шириной для моего экрана.
Вы можете установить скрытый div с некоторыми css-правилами в медиа-запросе, а затем проверить эти css-атрибуты с помощью jQuery's. css() и на основе этого включить или выключить слайд-шоу. В частности:
@media all and (max-width: 480px) {
#testdiv{
display:none;
}
}
И JS:
if($("#testdiv").css("display") == "none"){
$.supersized({...});
}
Обратите внимание, что это, по сути, использование подхода Modernizr без фактического получения библиотеки.
Как отметил @Pointy в комментариях, modernizr позволяет вам вызывать медиа-запросы из javascript. Прочитайте документацию Modernizr
jRespond, скрипт, выпущенный Viget, позволяет вам контролировать JavaScript в зависимости от размера области просмотра:
Статья: http://viget.com/inspire/managing-javascript-on-responsive-websites
Я думаю, что решение Асад является лучшим или вы используете Modernizr. Потому что у вас есть определение точки останова (480px) в одном файле, а не в JS и в CSS. Если вы используете SCSS, у вас есть только одно определение для точки останова в переменной.