Javascript.RU

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

Помогите, не понимаю в чем проблема
Проблема возникла в том, что если полностью удалить модуль галереи, то при изменении размера экрана так, чтобы меню полностью не влазило, все работает нормально(задний фон меню меняется на желтый), но если все оставлять так как есть, то этого по какой-то причине не происходит

p.s. Запихнул все в один код, для вашего удобства, а так он весь по разным файлам распихан
<!DOCTYPE html> 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		@import url('https://fonts.googleapis.com/css?family=Play');
body{
	margin: 0; /* ”бираем отступы */
	width: 100%;
	height: 100%;
}
#menu{
	width: 225px;
	
	position: fixed;
	z-index: 20;
	
	background-color: #373737;
	outline: 2px solid #373737;
}
#menu div{
	height: 40px;
	padding-left: 10px;
	padding-top: 4px;
	
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-left: 2px solid white;
	border-right: 2px solid white;
}
#menu div img{
	width: 35px;
	height: 35px;
	float: left;
}
#menu a{
	color: white;
	font-weight: bold;
	text-decoration: none;
	font-size: 32px;
	font-family: 'Play', sans-serif;
}

#gallery{
	width: 100%;
	margin-left: 0%;
	overflow: hidden;
	position: absolute;
}
#gBox{
	width: 101.4%;
}
#gBox div{
	width: 32%;
	margin-right: 1.3%;
	float: left;
	background-color: yellow;
	overflow: hidden;
	opacity: 0.8;
	
}
#gBox div img{
	position: relative;

}
#gView{
	position: absolute;
	z-index: 31;

	background-color: rgba(0,0,0,0.5);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;	
}
.gvBut{
	width: 45px;
	height: 45px;
	right: 5px;	
	position: absolute;
	opacity: 0.5;
	z-index: 33;
}
#gvB{
	background-image: url(../img/gallery/main/back.png);
	left: 5px;
	top: 43%;
}
#gvN{
	background-image: url(../img/gallery/main/next.png);
	top: 43%;
}
#gvC{
	top: 5px;
	background-image: url(../img/gallery/main/close.png);
	
}
.gvG{
	width: 20%;
	height: 100%;
	background-size: 100% 100%;
	position: absolute;
	z-index: 32;
}
#gvGL{
	background-image: url(../img/gallery/main/grad_back.png);	
}
#gvGR{
	background-image: url(../img/gallery/main/grad_next.png);
	right: 0px;
}
#gvBack{
	width: 100%;
	height: 300%;
	top: 0;
	left: 0;
	
	position: fixed;
	z-index: 30;

	background-color: rgba(0,0,0,0.5);
	
	display: none;
}

	</style>
	<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet"> 
</head>
<body>
	<!-- menu module -->
	<div id="menu">
		<div onclick="mSwithc()"><img src='img/main/menu_close.png'/><a> Свернуть</a></div>
		<div><a href="0.html">На главную</a></div>
		<div><a href="1.html">Контакты</a></div>
		<div><a href="2.html">Оплата</a></div>
		<div><a href="3.html">Доставка</a></div>
		<div><a href="4.html">Отзывы</a></div>
		<div><a href="5.html">О нас</a></div>
	</div>
	<script>
	var winW = document.documentElement.clientWidth; //ширина экрана
var winH = document.documentElement.clientHeight; //высота экрана
var menu = document.getElementById('menu') //блок меню
var menuH = menu.clientHeight
function mSwithc(){
	alert(menuH)
};

function mResize(){
	winW = document.documentElement.clientWidth; //ширина экрана
	winH = document.documentElement.clientHeight; //высота экрана
	if(winH<menuH){
		menu.style.backgroundColor='yellow';
	}else{
		menu.style.backgroundColor='#373737';
	};
};
window.onload=mResize;
window.addEventListener("resize", mResize);
	
	
	</script>
	 <!--menu end -->
	 <!-- gallery module -->
	<div id="gallery">
		<div id="gBox">
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_1.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_2.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_3.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_4.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_2_2.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_7.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_2_1.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_3_1.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_3_2.png'/></div>
			<div onclick="gClick(this)"><img src='img/gallery/test/photo_3_3.png'/></div>
		</div>
	</div>
	<script>
	document.body.innerHTML +='<div id="gvBack" onclick="gvClose()"></div><div id="gView"><span id="gvElem"><div id="gvB" class="gvBut" onclick="gviBack()"></div><div id="gvN" class="gvBut" onclick="gviNext()"></div><div id="gvC" class="gvBut" onclick="gvClose()"></div><div id="gvGL" class="gvG"></div><div id="gvGR" class="gvG"></div></span></div>';

var gBox = document.getElementById('gBox');
var gView = document.getElementById('gView');
var gbDiv = gBox.getElementsByTagName('div'); //div`ы в gBox
var winW = document.documentElement.clientWidth; //ширина экрана
var winH = document.documentElement.clientHeight; //высота экрана
var count; //количество div в gBox
var elem_num; //номер элемента
var gvDispaly = 0;
var gveDisplay = 1;

//скрытие просмотрщика
function gvClose(){
	document.getElementById('gvBack').style.display="none";
	gView.style.display="none";
	gvDispaly=0;
};

//скрытие елементов просмотрщика
gView.onclick = function(e) {
	if (e.target != this) { return true; }
	if(gveDisplay==0){
		document.getElementById('gvElem').style.display="block";
		gveDisplay=1;
	}else{
		document.getElementById('gvElem').style.display="none";
		gveDisplay=0;
	};
};


//настройка изображения в просмотрщике
function gViewImg(){
	var gbdImg = document.getElementById('gallery').getElementsByTagName('div')[elem_num+1].getElementsByTagName('img')[0]; 
	gView.style.backgroundImage = 'url(' + gbdImg.src + ')';
	gViewPar();
};

function gviNext(){
	if(elem_num==count){
		elem_num=0;
	}else{
	elem_num = elem_num + 1
	};
	gViewImg();
};

function gviBack(){
	if(elem_num==0){
		elem_num=count;
	}else{
	elem_num = elem_num - 1
	};
	gViewImg();
};

//настройка просмотрщика
function gViewPar(){
	var gbdImg = document.getElementById('gallery').getElementsByTagName('div')[elem_num+1].getElementsByTagName('img')[0];
	var gbdiW = gbdImg.naturalWidth;
	var gbdiH = gbdImg.naturalHeight; 
	if((winW/winH)>(gbdiW/gbdiH)){
		gView.style.width=winH*gbdiW/gbdiH*0.94 + 'px';
		gView.style.height='94%';
		gView.style.top=document.body.scrollTop + winH*0.02 + 'px';
		gView.style.left=(winW-winH*gbdiW/gbdiH*0.94)/2 + 'px';	
	}else if((winW/winH)<(gbdiW/gbdiH)){
		gView.style.width='94%';
		gView.style.height=winW*gbdiH/gbdiW*0.94 + 'px';
		gView.style.top=(winH - winW*gbdiH/gbdiW*0.94)/2 + document.body.scrollTop + 'px';
		gView.style.left='2%';

	}else{
		gView.style.width='94%';
		gView.style.height='94%';	
		gView.style.top='2%';
		gView.style.left='2%';
	};	
};

//действие при нажатии на div в gBox
function gClick(elem){
	gvDispaly = 1;
	for(var i = 0;i<1/0;i++){ 
		if(document.getElementById('gallery').getElementsByTagName('div')[i]==elem){ 
			elem_num = i -1; 
			gView.style.display="block";
			document.getElementById('gvBack').style.display="block";
			gViewImg();
			break; 
		}; 
	};
};

//настрорйка div в gBox при изменении парпметров экрана
function gbDivPar(){
	var gbdW = gbDiv[0].clientWidth; //ширина div в gBox
	var gbdH = gbdW; //высота div в gBox
	var gbdMB = gBox.clientWidth*0.013; //нижний отступ div в gBox
	for(var i = 0; i < 100; i++){
		if(gbDiv[i]==null){//нахождение количества элементов
			count = i-1;
			document.getElementById('gallery').style.height = gbdW*Math.ceil(i/3) + gbdMB*(Math.ceil(i/3)-1) + 'px'; //установка высоты галереи
			break;
		
		}else{
			gbDiv[i].style.height=gbdH + 'px';
			gbDiv[i].style.marginBottom=gbdMB + 'px';
			
			var gbdImg = gbDiv[i].getElementsByTagName('img')[0];//img в конкретном div
			var gbdiW = gbdImg.naturalWidth;
			var gbdiH = gbdImg.naturalHeight;
			
			if(gbdiW<gbdiH){//настройка изображения в блоке
				gbdImg.style.width="100%";
				gbdImg.style.top=(gbdH-gbdW*gbdiW/gbdiH)/2 + "px";
			}else if(gbdiW>gbdiH){
				gbdImg.style.height="100%";
				gbdImg.style.right=-(gbdW-gbdH*gbdiW/gbdiH)/2 + "px";
				
			}else{
				gbdImg.style.width="100%";
				gbdImg.style.height="100%";
			};
		};
	};
};


function gResize(){
	winW = document.documentElement.clientWidth; //ширина экрана
	winH = document.documentElement.clientHeight; //высота экрана
	gbDivPar();
	gViewPar();
	
};
window.onload=gResize;
window.addEventListener("resize", gResize);

	
	
	</script>
	 <!--gallery module end -->
</body> 
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2016, 11:20
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

TANDEROID,
Оберните скрипты в window.onload = function() { }
и уберите строки 158 и 317
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Постоянно падает Firebug! В чем проблема? John Cannaby Общие вопросы Javascript 3 01.02.2012 07:21
Помогите. В чем проблема ? (toggle) brondex Events/DOM/Window 1 23.10.2011 18:48
В чем проблема с IE? lessless jQuery 1 19.07.2011 22:44
Ошибка в jQuery 1.5.1. Не понимаю в чем проблема? viatcheslav AJAX и COMET 0 16.05.2011 11:38
Проблема со скриптом в IE 8 Tok_13 jQuery 3 05.01.2010 12:12