Javascript.RU

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

Сворачивание окна по клику в любом месте окна браузера...
Приветствую уважаемые форумчане. Есть сайт bm05.ru. Верху над логотипом есть две разворачивающиеся формы отправки сообщений: "Задайте нам вопрос и Онлайн заявка". Они разворачиваются и сворачиваются при клике непосредственно на них. Нужно сделать, чтоб они сворачивались при клике на любом месте браузера. Буду очень признателен за помощь. Прилагаю код.

var array = new Array();
var speed = 10;
var timer = 10;
 
// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function slider(target,showfirst) {
 var slider = document.getElementById(target);
 var divs = slider.getElementsByTagName('div');
 var divslength = divs.length;
 for(i = 0; i < divslength; i++) {
 var div = divs[i];
 var divid = div.id;
 if(divid.indexOf("header") != -1) {
 div.onclick = new Function("processClick(this)");
 } else if(divid.indexOf("content") != -1) {
 var section = divid.replace('-content','');
 array.push(section);
 div.maxh = div.offsetHeight;
 if(showfirst == 1 && i == 1) {
 div.style.display = 'block';
 } else {
 div.style.display = 'none';
 }
 }
 }
}
 
// Process the click - expand the selected content and collapse the others //
function processClick(div) {
 var catlength = array.length;
 for(i = 0; i < catlength; i++) {
 var section = array[i];
 var head = document.getElementById(section + '-header');
 var cont = section + '-content';
 var contdiv = document.getElementById(cont);
 clearInterval(contdiv.timer);
 if(head == div && contdiv.style.display == 'none') {
 contdiv.style.height = '0px';
 contdiv.style.display = 'block';
 initSlide(cont,1);
 } else if(contdiv.style.display == 'block') {
 initSlide(cont,-1);
 }
 }
}
 
// Setup the variables and call the slide function //
function initSlide(id,dir) {
 var cont = document.getElementById(id);
 var maxh = cont.maxh;
 cont.direction = dir;
 cont.timer = setInterval("slide('" + id + "')", timer);
}
 
// Collapse or expand the div by incrementally changing the divs height and opacity //
function slide(id) {
 var cont = document.getElementById(id);
 var maxh = cont.maxh;
 var currheight = cont.offsetHeight;
 var dist;
 if(cont.direction == 1) {
 dist = (Math.round((maxh - currheight) / speed));
 } else {
 dist = (Math.round(currheight / speed));
 }
 if(dist <= 1) {
 dist = 1;
 }
 cont.style.height = currheight + (dist * cont.direction) + 'px';
 cont.style.opacity = currheight / cont.maxh;
 cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
 if(currheight < 2 && cont.direction != 1) {
 cont.style.display = 'none';
 clearInterval(cont.timer);
 } else if(currheight > (maxh - 2) && cont.direction == 1) {
 clearInterval(cont.timer);

 }
}


Скину 10 баксов или эквивалент в рублях тому кто поможет

Последний раз редактировалось МурадMM, 19.07.2013 в 13:30.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2013, 11:15
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

В момент открытия окна устанавливаешь на document обработчик события mousedown, в нем скрываешь окно. Чтобы клик по телу окна не обрабатывался тем обработчиком, в навешиваешь на окно обработчик, в котором останавливаешь событие через event.stopPropagation()
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2013, 11:23
Новичок на форуме
Отправить личное сообщение для МурадMM Посмотреть профиль Найти все сообщения от МурадMM
 
Регистрация: 19.07.2013
Сообщений: 2

Извиняюсь но я совсем в этом чайник. Не могли бы вы прописать это. Отблагодарю материально за помощь.
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2013, 19:52
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

вот тебе два варианта, жду пива
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.backing {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: green;
	opacity: 0.2;
	display: none;
}
.form {
	position: relative;
	z-index: 101;
	display: none;
	background-color: yellow;
}
</style>
<div class="backing"></div>
<button class="but">show/hide form</button>
<a href="#">link</a>
<button onclick="alert('click')">click</button>
<form class="form">
	<input/><br/>
	<input/><br/>
	<input type="submit"/>
</form>
<script>
jQuery(function ($) {
	$(".but").on("click", function () {
		$(".form").toggle();
		$(".backing").show();
	});
	$(".backing").on("click", function (e) {
		$(".form").toggle();
		$(this).hide();
		var elem = document.elementFromPoint(e.clientX, e.clientY);
		if (elem.className != "but") {
			elem.click();
		}
	});
});
</script>


<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.form {
	position: relative;
	z-index: 101;
	display: none;
	background-color: yellow;
}
</style>
<div class="backing"></div>
<button class="but">show/hide form</button>
<a href="#">link</a>
<button onclick="alert('click')">click</button>
<form class="form"  onclick="event.stopPropagation()">
	<input/><br/>
	<input/><br/>
	<input type="submit"/>
</form>
<script>
jQuery(function ($) {
	$(document).on("click", function () {
		$(".form").hide();
	});
	$(".but").on("click", function (e) {
		$(".form").toggle();
		e.stopPropagation();
	});
});
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2013, 19:46
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Пропал тс, на канары наверное укатил на зажатые баксы
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Высота страницы по высоте окна браузера Николян (X)HTML/CSS 4 16.01.2014 20:12
Сворачивание блока при клике в любом месте страницы onuvidelsolnce Элементы интерфейса 6 15.04.2013 13:35
Выход или сворачивание окна мобильного браузера dehimer Мобильный JavaScript 6 09.11.2011 11:08
Динамическое получение ширины и высоты окна браузера Esseron Элементы интерфейса 2 04.04.2011 16:00
Реклама по центру окна браузера Макс Элементы интерфейса 2 15.06.2008 00:55