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