Отключение скрипта при определенном разрешении.
Здравствуйте! Есть такой скрипт
<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, так как ниже этого он мне мешает.. Буду очень благодарен. P.S. Если тема не в том разделе, прошу прощения, переместите, пожалуйста, уважаемые модераторы. |
Разрешение чего? Экрана? Есть такой объект screen, там вся информация - http://www.w3schools.com/js/js_window_screen.asp
|
Цитата:
|
Размеры окна, может быть? window.innerHeight и window.innerWidth используй.
|
Цитата:
Если ширина браузера больше 480px скрипт работает нормально, как и должен. Если ширина браузера ниже 480px (неважно из края тянут или через телефон смотрят) скрипт отключается полностью. Потом если снова ресайзить будут, то выше 480px снова включается) |
Ну так делай, в чем проблема? Я тебе сказал, откуда значения брать.
|
Цитата:
|
Нельзя этот плагин просто так "отключить". Он не перманентно действует. Он один раз запускается, изменяет структуру элементов с классом '.portfolio-item-view' и идет отдыхать. Можно просто не запускать его, если высота окна меньше, чем позволено, но после того, как он уже отработал, надо будет элемент восстанавливать, а восстановить его невозможно без знания его первоначального состояния. Для того, чтобы отслеживать изменение размеров окна, тебе нужно повесить обработчик на событие window.onresize, да. Вперед)
|
:-? вариант не запускать плагин изначально если экран меньше 480 тоды без resize
if( url === 'js/jquery.hoverfold.js' && window.innerWidth > 480) |
Цитата:
Цитата:
|
В общем я с другим скриптом разобрался, теперь он действует при определенных разрешениях браузера, с помощью windows.resize вот таким образом
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); А вот с этим скриптом никак разобраться не могу, не срабатывает никак.. Как подключаю к windows.resize скрипт вобще не работает.. Походу с синтаксисом проблемы у меня, что то не туда засовываю. Знающие добрые люди, допишите, пожалуйста, эти 2 строки кода к скрипту, чтоб он делал свое дело выше скажем 1000px, и ушел в покой ниже этого числа. Вот мой вариант, но он работает только тогда, когда изначально размер окна выше или меньше данного числа, при ресайзе ничего не меняется.. ( 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>' ) ); } ); }); }; }} )( jQuery ); |
window.onresize = hide; $("elem").resize - это другое. |
Часовой пояс GMT +3, время: 11:32. |