Отключить js в медиазапросе
Добрый день, подскажите кто знает:
Есть такой скрипт <script> function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".main-side")); }); </script> Его задача выровнять сайдбар с центральным блоком по высоте. Как отключить выравнивание высоты при width:720px? |
$(document).ready(function() {if($(window).width() > 720) setEqualHeight($(".main-side")); }); |
все понятно, есть нью-анс
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8" /> <title>Create a Scrolling Menu: Result</title> <style type="text/css"> body { margin:0; padding: 0; background-color: #777674; } div.sc_menu_wrapper { position: relative; height: calc(100vh - 124px); margin: 62px 0 0; padding: 0; /* Make bigger than a photo, because we need a place for a scrollbar. */ width: 148px; overflow: auto } div.sc_menu { margin:0; padding:12px; } .sc_menu .view { display: block; margin-bottom: 5px; width: 123px; /* When image support is turned off */ overflow: hidden; position: relative; text-align: center; border-style: solid 2px } .sc_menu img { display: block; border: none; width: inherit } .sc_menu_wrapper .loading { position: absolute; top: 50px; left: 12px; margin: 0 auto; padding: 15px 0; width: 104px; text-align: center; color: #fff; border: 1px solid rgb(79, 79, 79); background: #1F1D1D; } /* @media all and (max-width: 1024px) { .sc_menu_wrapper { overflow: auto !important } } */ </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> <script type= "text/javascript">/*<![CDATA[*/ function makeScrollable(wrapper, scrollable){ // Get jQuery elements var wrapper = $(wrapper), scrollable = $(scrollable); // Hide images until they are not loaded scrollable.hide(); var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper); // Set function that will check if all images are loaded var interval = setInterval(function(){ var images = scrollable.find('img'); var completed = 0; // Counts number of images that are succesfully loaded images.each(function(){ if (this.complete) completed++; }); if (completed == images.length){ clearInterval(interval); // Timeout added to fix problem with Chrome setTimeout(function(){ loading.hide(); // Remove scrollbars wrapper.css({overflow: 'hidden'}); scrollable.slideDown('slow', function(){ enable(); }); }, 1000); } }, 100); function enable(){ // height of area at the top at bottom, that don't respond to mousemove var inactiveMargin = 15; /* сдесь изменить код для мобильных - скачет меню if ($(window)widthInner() > 1024) { true; } else { return false; }; */ // Cache for performance var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Using outer height to include padding too var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; // Do not cache wrapperOffset, because it can change when user resizes window // We could use onresize event, but it's just not worth doing that // var wrapperOffset = wrapper.offset(); var lastTarget; //When user move mouse over menu wrapper.mousemove(function(e){ // Save target lastTarget = e.target; var wrapperOffset = wrapper.offset(); // Scroll menu var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin; if (top < 0){ top = 0; } wrapper.scrollTop(top); }); } } /* или сдесь изменить код для мобильного отображения $(function(){if ($(window)widthInner() > 1024) makeScrollable("div.sc_menu_wrapper", "div.sc_menu"); }); */ $(function(){makeScrollable("div.sc_menu_wrapper", "div.sc_menu"); }); /*]]>*/</script> </head> <body> <div id="pro"> <div class="sc_menu_wrapper"> <div class="sc_menu"> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> <div class="view view-tenth"> <img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg"> </div> </div> </div> </body> </html> вопрос таков - где можно отключить скрипт для мобильного траффа, к примеру $(window)widthInner() > 1024) или же доделать код для корректного отображения на мобилках, ведь передвижения идет по средством .mousemove, и как правильно подключить toutchMove? сейчас прото напросто использую @media для мобильного, но появляется проблема что передвижения еще и привязано к inactiveMargin и мобильный прокручивает содержимое к данным координатам. Извените что выложил код в тексте незнаю как заполняется форма P.S. вроде работает, добавил в конце, как конец выполнения функции: $(document).ready(function(){ if ($(document).width() > 1024) makeScrollable("div.sc_menu_wrapper", "div.sc_menu") }); даже ничего мудрить с передвижениям в мобильных с inactiveMargin не пришлось. Но у кого есть желания повозится под touchmove - всегда пожалуйста ... |
Часовой пояс GMT +3, время: 23:43. |