Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Скрыть элемент при щелче не на нём
 
 автор: Desh   (04.08.2009 в 17:36)   письмо автору
 
 

Здравствуйте,

Пытаюсь сделать имитацию раскрывающегося списка (select), так как дизайн стандартного не вписывается в дизайн сайта. При щелчке на изображении со стрелочкой появляется div, с содержанием раскрывающегося списка. Проблема состоит в следующем: как скрыть этот div, если пользователь щёлкнул НЕ по этому элементу.

В голову пришёл только один вариант (не считаю его самым подходящим): при раскрытии списка появляется прозрачный div на весь экран, при щелчке по нему список скрывается. В стилях для этого div`a прописывал:
{position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; height: 100%; width: 100%; }
Однако в Opera и в IE 6 и 7 версиях div на весь экран не создаётся. Он вообще нигде не виден.
Помимо этого глюка (пока его исправить не могу) минусом этого способа является тот факт, что пока виден прозрачный div на весь экран, до других элементов страницы "не достучаться".

Поэтому вопрос: как можно реализовать мою задачу: скрыть блок при щелчке за его пределами?

  Ответить  
 
 автор: sim5   (04.08.2009 в 17:50)   письмо автору
 
   для: Desh   (04.08.2009 в 17:36)
 

Перехватывать соответсвующее событие body.

  Ответить  
 
 автор: Desh   (04.08.2009 в 17:59)   письмо автору
 
   для: sim5   (04.08.2009 в 17:50)
 

А можно поподробнее, пожалуйста? Не до конца понял.

  Ответить  
 
 автор: ddhvvn   (04.08.2009 в 18:18)   письмо автору
 
   для: Desh   (04.08.2009 в 17:59)
 

sim5, видимо имеет ввиду следующее.
Когда Вы щелкнете по элементу находящемуся "выше" в DOM, то у этого "родителя" возникнет событие onclick.
Вот примерно так)
А что касаемо Вашего вопроса выше, то возможно, что Вам нужно body [html] задать размеры.

  Ответить  
 
 автор: Desh   (04.08.2009 в 19:09)   письмо автору
 
   для: ddhvvn   (04.08.2009 в 18:18)
 

Получилось реализовать, отслеживая клик по следующей аналогии:

document.onclick = function (e)
{
  e = e || window.event;
  var src = e.srcElement || e.target;
 // И дальше условия


Переменная src.id - содержит имя ID элемента, по которому кликнули.


Спасибо за помощь!)

  Ответить  
 
 автор: sim5   (04.08.2009 в 19:24)   письмо автору
 
   для: Desh   (04.08.2009 в 19:09)
 

Ну вот, пока дали дописать ответ, уже и "самотеком" разобрались :)

  Ответить  
 
 автор: sim5   (04.08.2009 в 19:23)   письмо автору
 
   для: Desh   (04.08.2009 в 17:59)
 

Ну вот простой пример, где обработчик события указан приямо в body, так что, думаю, без подробных разъяснений будет понятно что и почему. Допустим ваш элемент select, это элемент sl из примера, тогда:
<html>
<head>
<script>
function getSrc(e) {
  e = e.target ? e.target : e.srcElement;
  if (e.id != 'sl') document.getElementById('sl').style.height = 20; 
}
</script>
</head>

<body onclick="getSrc(event)">

<div id="sl" onclick="if(this.clientHeight > 20) this.style.height = 20; else this.style.height = 100;" 
style="border: 1px solid Black; height: 20px; width: 100px;"></div>
<br>
<select name="">
<option value="1" SELECTED>11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
</select>
<br><br>
<div style="border: 1px solid Black; height: 100px; width: 100px;"></div>

</body>
</html>

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования