Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2017, 22:11
Новичок на форуме
Отправить личное сообщение для Kardi Посмотреть профиль Найти все сообщения от Kardi
 
Регистрация: 22.01.2017
Сообщений: 1

Отключить 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?
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2017, 22:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

$(document).ready(function() {if($(window).width() > 720) setEqualHeight($(".main-side")); });
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2017, 16:55
Интересующийся
Отправить личное сообщение для limarandrew Посмотреть профиль Найти все сообщения от limarandrew
 
Регистрация: 23.03.2017
Сообщений: 14

все понятно, есть нью-анс
<!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 - всегда пожалуйста ...

Последний раз редактировалось limarandrew, 19.07.2017 в 17:40.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 23:57
JS <-> Server Js. Severtain Общие вопросы Javascript 1 05.11.2011 14:36
JS Coaching для стартапа OlgaAyva Работа 12 27.09.2011 22:18
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28