Хелп с встплывающим блоком

[grefon]

Помогите пожалуйста с проблемкой. Нашел в сети вот этот скрипт. Работает jQuery.

<A id=toggler href="#">Линк</A>
<DIV id="ttttt" class="no-display drop-down-block">Всплывающий блок</DIV>

<script type=text/javascript src="jquery-1.3.2.min.js"></SCRIPT>

<script type=text/javascript>
(function($) {
	$.fn.dropDownBlock = function(block, options) {
		var defaults = {
			speed: 'fast',
			top: $(this).height(),
			left: 0
		},
		opts 	= $.extend(defaults, options),
		  toggler = $(this),
		  block 	= $(block);
		  toggler.css({'outline': 'none'})

		  toggler.click(function(e) {
			  e.preventDefault();
			  $(block).css({
				'position' 	: 'absolute',
				'top' 		: (toggler.offset().top + opts['top']) + 'px',
				'left' 		: (toggler.offset().left + opts['left']) + 'px'
			  });
			  if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
			  else $(block).fadeIn(opts['speed']);
			  this.focus();
		  });
		  toggler.blur(function() {
			  $(block).fadeOut(opts['speed']);
		  });
	};
})(jQuery);

$('#toggler').dropDownBlock($('#ttttt'));
</SCRIPT>

Вопрос: как сделать так, чтобы блок исчезал только при клике вне поля блока. То есть, когда мы запускаем блок, то при клике в любом месте страницы (в том числе и на блоке) блок исчезает, а нужно , чтобы он исчезал только когда мы кликаем не по самому блоку.

[Dimitry Wolotko]

Даю наводку — потеря фокуса.

[Veseloff]

toggler.blur(function()
{
	window.captureEvents(Event.CLICK);
	window.onclick = clicked;
	function clicked(e)
	{		
		var targ = (window.event) ? e.srcElement : e.target;
		if (targ!=document.getElementById('ttttt') && $(block).is(':visible') && targ!=document.getElementById('toggler'))
		$(block).fadeOut(opts['speed']);
	}
}

Ну вот примерно что-то в этом духе - не уверен, что заработает, но смысл, думаю, ясен

[grefon]

toggler.blur(function()
{
	window.captureEvents(Event.CLICK);
	window.onclick = clicked;
	function clicked(e)
	{		
		var targ = (window.event) ? e.srcElement : e.target;
		if (targ!=document.getElementById('ttttt') && $(block).is(':visible') && targ!=document.getElementById('toggler'))
		$(block).fadeOut(opts['speed']);
	}
}

Ну вот примерно что-то в этом духе - не уверен, что заработает, но смысл, думаю, ясен

Спасибо за ответ. Но к сожалению код не работает. Блок так же пропадает по клику на нем. И еще появился баг - при повторном запуске блока он возникает и сразу же исчизает.

Даю наводку — потеря фокуса.

Уже эксперементировал. Но ничего не получилось. Можно подробнее?

[Veseloff]

Спасибо за ответ. Но к сожалению код не работает. Блок так же пропадает по клику на нем. И еще появился баг - при повторном запуске блока он возникает и сразу же исчизает.

Ну можно поиграться с условиями в ифе, можно попробовать ввести какую-нибудь глобальную переменную, а можно воспользоваться каким-нибудь плагином, что было бы вообще хорошо.

[s0rr0w]

Спасибо за ответ. Но к сожалению код не работает. Блок так же пропадает по клику на нем. И еще появился баг - при повторном запуске блока он возникает и сразу же исчизает.

А никто и не говорил, что вам выдадут готовый код.

Уже эксперементировал. Но ничего не получилось. Можно подробнее?

Подробности на сайте http://jquery.com/

[grefon]

А никто и не говорил, что вам выдадут готовый код.

Так и я про это не говорил. И готовый код я не жду. Просто надеюсь, что мне подскажут более подробно.

Подробности на сайте http://jquery.com/

Спасибо, очень помогло. Можно было бы написать "Возьми и погугляй". Если бы я нашел ответ на оф сайте, я бы не создавал эту тему. А ответ я искал, и не только на оф сайте - просто найти не получилось из-за скудных познаний. Приблизительно понимаю, что нужно каким то образом придать фокус блоку а не линку, и при разфокусе блока он будет исчезать, но сколько я не эксперементировал - ничего не получается. Пробывал делать так:

<script type=text/javascript src="jquery-1.3.2.min.js"></SCRIPT>

<script type=text/javascript>
(function($) {
	$.fn.dropDownBlock = function(block, options) {
		var defaults = {
			speed: 'fast',
			top: $(this).height(),
			left: 0
		},
		opts	= $.extend(defaults, options),
		toggler = $(this),
		block	= $(block);
		toggler.css({'outline': 'none'})

		toggler.click(function(e) {
			e.preventDefault();
			$(block).css({
			 'position'	: 'absolute',
			 'top'		: (toggler.offset().top + opts['top']) + 'px',
			 'left'		: (toggler.offset().left + opts['left']) + 'px'
		   });
		   if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
		   else $(block).fadeIn(opts['speed']);
		   document.getElementById('ttttt').focus();			  - Задаю фокус на div, но не работает.
		});
		document.getElementById('ttttt').blur(function() {	 - При снятии фокуса с div запускаю функцию на закрытие блока.
			$(block).fadeOut(opts['speed']);
		});
	};
})(jQuery);

$('#toggler').dropDownBlock($('#ttttt'));
</SCRIPT>

Почему document.getElementById('ttttt') не фокусируется?

[Great Rash]

А див может получить фокус разве?

[s0rr0w]

А див может получить фокус разве?

В ИЕ была возможность.

[grefon]

А див может получить фокус разве?

Так а если возможности сфокусироваться нет, то как же быть?

[Great Rash]

Надо наверное проверять, что если event.target не ссылка (вы ж на ссылку кликаете, чтоб див показался?) и не всплывший див, то прячем див, а если наоборот - то ничего не делаем.

[Veseloff]

Да чего голову ломать? Лурканите гуглеца по запросу "всплывающая подсказка jquery" - уверен, что найдёте тысячи разных, из которых точно найдёте подходящую