Отключение скрипта при определенном разрешении.

[Нарек]

Здравствуйте! 

Есть скрипт в документе html 

<script type="text/javascript">		Modernizr.load({		test: Modernizr.csstransforms3d && Modernizr.csstransitions,		yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],		nope: 'css/fallback.css',		callback : function( url, result, key ) {					if( url === 'js/jquery.hoverfold.js' ) {			$( '.portfolio-item-view' ).hoverfold();		}	}});</script>

который подключает вот это

( function( $ ) {		$.fn.hoverfold = function( args ) {		this.each( function() {					$( this ).children( '.view' ).each( function() {							var $item 	= $( this ),					img		= $item.children( 'img' ).attr( 'src' ),					struct	= '<div class="slice s1">';						struct	+='<div class="slice s2">';							struct	+='<div class="slice s3">';								struct	+='<div class="slice s4">';									struct	+='<div class="slice s5">';									struct	+='</div>';								struct	+='</div>';							struct	+='</div>';						struct	+='</div>';					struct	+='</div>';									var $struct = $( struct );								$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );							} );					});	};} )( jQuery );

Вопрос. Как сделать, что бы скрипт подключился (или работал) ТОЛЬКО при разрешении ВЫШЕ 480px, так как ниже этого он мне мешает.. Буду очень благодарен.

[npofopr]

http://stackoverflow.com/questions/7460670/how-to-detect-if-media-queries-are-present-using-modernizr

https://coderwall.com/p/wtzraa

 

мне кажется надо в документации еще чуть чуть по подробнее посмотреть.

 

А вообще вот так еще http://www.paulund.co.uk/checking-media-queries-javascript

[Нарек]

С другим скриптом разобрался, теперь он работает так как мне нужно. Проблема решилась так 

var hide = function(){    if ($(window).width() > 980) {        $('.info-container a').toggle(function() {            $(this)                .closest('li')                .find('.work-info')                .fadeIn();            return false;        }, function() {            $(this)                .closest('li')                .find('.work-info')                .fadeOut();            return false;        });    }    else {        $('.info-container a').unbind('click');     }};hide();$(window).resize(hide);

А вот скрипт который в первом сообщении, таким образом не работает, пока не пойму почему. Консоль выдает ошибку, вроде функция не существует.

[xzarxzes]

А вот скрипт который в первом сообщении, таким образом не работает, пока не пойму почему. Консоль выдает ошибку, вроде функция не существует.

Попробуйте добавить test: Modernizr.csstransforms3d && Modernizr.csstransitions, && Modernizr.mq( 'all and (min-width: 480px)' ), http://modernizr.com/docs/#mq, если конслоь выдает что Modernizr.mq не существует то скорее всего вы при генерации модернайзера не выбрали media queries

Edited July 2, 2014 by xzarxzes

[Нарек]

Попробуйте добавить test: Modernizr.csstransforms3d && Modernizr.csstransitions, && Modernizr.mq( 'all and (min-width: 480px)' ), http://modernizr.com/docs/#mq, если конслоь выдает что Modernizr.mq не существует то скорее всего вы при генерации модернайзера не выбрали media queries

Не, не, я вот подумал, мне этот способ не устраивает, скажу почему. Модернизр проверяет поддержку браузером трансформаций, и исходя из этого загружает скрипт и css файл. Так если я добавлю эту строку, то модернизр не загрузит  скрипт + css если каким то образом пользователь зашел на сайт десктопным браузером уменьшенным до 480px. А при увеличении ничего не произойдет. Поэтому думаю лучший вариант будет если сам скрипт отследит ширину браузера и в зависимости от этого начал работать или не работать. Вот этот скрипт делает именно так как мне нужно 

var hide = function(){    if ($(window).width() > 980) {        $('.info-container a').toggle(function() {            $(this)                .closest('li')                .find('.work-info')                .fadeIn();            return false;        }, function() {            $(this)                .closest('li')                .find('.work-info')                .fadeOut();            return false;        });    }    else {        $('.info-container a').unbind('click');     }};hide();$(window).resize(hide);

А вот как другого скрипта убедить действовать так же, вот это не пойму никак.. Мне кажется я уже все способы перепробовал. Думал это из за того, что jQuery у меня подключается после выполнения скрипта, поэтому нельзя отследить resize. Подключил jQuery сначала - тот же результат.. 

$(document).ready(function(){ var hoverhold = function(){    if ($(window).width() > 980) {	$.fn.hoverfold = function( args ) {		this.each( function() {					$( this ).children( '.view' ).each( function() {							var $item 	= $( this ),					img		= $item.children( 'img' ).attr( 'src' ),					struct	= '<div class="slice s1">';						struct	+='<div class="slice s2">';							struct	+='<div class="slice s3">';								struct	+='<div class="slice s4">';									struct	+='<div class="slice s5">';									struct	+='</div>';								struct	+='</div>';							struct	+='</div>';						struct	+='</div>';					struct	+='</div>';									var $struct = $( struct );								$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );							} );					});	};}     else {            }};hoverhold();$(window).resize(hoverhold);});

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

[xzarxzes]

 

Попробуйте добавить test: Modernizr.csstransforms3d && Modernizr.csstransitions, && Modernizr.mq( 'all and (min-width: 480px)' ), http://modernizr.com/docs/#mq, если конслоь выдает что Modernizr.mq не существует то скорее всего вы при генерации модернайзера не выбрали media queries

Не, не, я вот подумал, мне этот способ не устраивает, скажу почему. Модернизр проверяет поддержку браузером трансформаций, и исходя из этого загружает скрипт и css файл. Так если я добавлю эту строку, то модернизр не загрузит  скрипт + css если каким то образом пользователь зашел на сайт десктопным браузером уменьшенным до 480px. А при увеличении ничего не произойдет. Поэтому думаю лучший вариант будет если сам скрипт отследит ширину браузера и в зависимости от этого начал работать или не работать. Вот этот скрипт делает именно так как мне нужно 

Ну можно попробовать заместо all, написать only mobile, и этот тест для ширины - Modernizr.mq сделать отдельным, а не вместе с тестом для трасформации и транзишена. Не знаю только насколько only mobile надежно, там вроде бы не все его потдерживают.

Edited July 2, 2014 by xzarxzes

[Нарек]

Ну можно попробовать заместо all, написать only mobile, и этот тест для ширины - Modernizr.mq сделать отдельным, а не вместе с тестом для трасформации и транзишена. Не знаю только насколько only mobile надежно, там вроде бы не все его потдерживают.

Ну да, про надежность это вопрос.. Вот я думаю самый надежный способ это заставить скрипт реагировать на resize.. A вот и не получается)

[LunatiK]

 

Ну можно попробовать заместо all, написать only mobile, и этот тест для ширины - Modernizr.mq сделать отдельным, а не вместе с тестом для трасформации и транзишена. Не знаю только насколько only mobile надежно, там вроде бы не все его потдерживают.

Ну да, про надежность это вопрос.. Вот я думаю самый надежный способ это заставить скрипт реагировать на resize.. A вот и не получается)

 

Да, только правильно будет при ресайзе скрывать или показывать контейнер, а не загружать скрипт, в зависимости от ширины окна

[Vin]

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

$(window).width – это ширина окна браузера, а ширина экрана – это свойство window.screen.width, если нужно именно разрешение.

Edited July 4, 2014 by Vin

[Нарек]

$(window).width – это ширина окна браузера, а ширина экрана – это свойство window.screen.width, если нужно именно разрешение.

 Нет, мне ширина окна браузера вполне достаточно)

[mishka]

http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

Это скрипт который позволяет отслеживать изменения ширины окна.

И собственно сами плагины которые собираетесь включать/отключать должны быть написаны с нужными методами.