Javascript.RU

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

div и onblur
Есть окно которое появляется при onclik в input. Окно представляет собой таблицу с кучей кнопок и текста. Как сделать так чтобы при клике вне таблице она исчезала(удалялась). Примерно так работает datapicker в jquery.
Я перепробывал много вариантов но все они работали по разному в разных браузерах.
Кто как справляется с такой проблемой?
P.S. В названии темы стоит div для понятности. Я могу обернуть table в div, сути дела не меняет.
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2012, 16:44
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

способы разные, мне нравится накрыть всё прозрачным (или не очень) div-ом, по клику на него скрывать
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2012, 16:52
Интересующийся
Отправить личное сообщение для developer_ Посмотреть профиль Найти все сообщения от developer_
 
Регистрация: 27.07.2011
Сообщений: 11

Впринципе интересный способ.Я даже когда то такой пробовал - проблема только была с высотой этого прозрачного дива, если страница была больше экрана. Но мне в данном случае не подойдёт.
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2012, 16:56
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

position: fixed; height: 100%; width: 100%; z-index: 100;
у окна соответственно z-index больше
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2012, 17:08
Интересующийся
Отправить личное сообщение для developer_ Посмотреть профиль Найти все сообщения от developer_
 
Регистрация: 27.07.2011
Сообщений: 11

Когда я делал заливку экрана то height: 100% довало заливку экрана, а размер страницы увеличевался посредством ajax. Поэтому надо было вычеслять реальный размер текущего экрана. Каждый браузер это делал по разному. Вобщем как всегдаобычный геморой на пустом иесте. Нюансов я не помню давно было. Но мне сейчас такой подход не подходит.
Пока делаю на лютых граблях. Примерно так:
function hide_all(ev) {
        var tgt = window.event ? window.event.srcElement : ev.target;
        if (tgt.parentNode.className !== "cd_tbl") {
            input.parentNode.removeChild(cd_table);
            document.onclick = ''
        }
    }

    document.onclick = hide_all;

где cd_table - таблица
input - input при клике по каторому создаётся таблица.

эта функция вызывается в конце создания таблици

Вылез очередной геморой - какогото hide_all вызывается сразу и при этом объект который вызвал onclick это input

Сейчас ищу как обнулить onclick перед строчкой
document.onclick = hide_all
но походу такого понятия в javascript нету.
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2012, 17:27
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

моя реализация blur && focus
<!DOCTYPE HTML>
<html>
  <head>
  <style>
    #block {
      width:200px;
      height:200px;
      border:4px solid red;
      display:none;
    
    
    } 
    body {
    
      border:2px solid black;
    
    
    }
    
    </style>
  </head>
  <body >
    <a href='#' id='action' >open/close</a>
    
    <div id='block'>
      wereasrwer
    <input type='text'>
      <div>
       <input type='text'> 
      </div>
    </div>
    
 <div id='inform'></div>

    <script>
      function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
      
      return document.querySelectorAll(selector)[0];
      
      }
      
      
     function Focus_and_Blur(opt){
      
      var elem = opt.elem, focusForElem;
        
       var body = document.body;
        
       elem.setAttribute('tabindex',-1);  
       body.setAttribute('tabindex',-1); 
      
      if (elem.addEventListener){ 
      
      elem.addEventListener('focus' , onFocus,true);
      
      body.addEventListener('focus',onDocumentFocus,true); 
    
      } else {
      
      elem.onfocusin = onFocus;
      body.onfocusin = onDocumentFocus;
    
      }
      
      function onFocus(e) {
      
        
        
        focusForElem = true;
        event.cancelBubble = true;
        opt.focus.call(this,e);
          
      }
      
        function onDocumentFocus (e) {
        
         
          
          if (focusForElem) {
            
             if(parent(e))return;
            
            focusForElem = false;
            opt.blur.call(elem,e)
          }
        }
      
       function parent (e) {
       
         var target = e.target || event.scrElement;
         var parent = target;
         
         while (parent && parent != elem) {
         
          parent = parent.parentNode;
         }
         
        
         return parent == elem;
       
       }
       
       
      };
      
      
      var elem = document.getElementById('block');
      
  
      Focus_and_Blur({
        elem:elem,
        focus:function (e) {
         
          _("#inform").innerHTML = 'focus on '+ this.id;

        },
        blur: function (e) {
         
         _("#inform").innerHTML = 'blur  '+ this.id;
          
           elem.style.display = '';
       
        }
      });
      
      
      _("#action").onclick = function () {
      
        elem.style.display = 'block';
        elem.focus();
      
      
      }
    </script>

  </body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2012, 17:36
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от developer_
Вылез очередной геморой - какогото hide_all вызывается сразу и при этом объект который вызвал onclick это input
события всплывают
второй способ: вешать обработчик клика на body, но отсекать те из них, которые идут от таблицы и её дочерних элементов
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 13:49
Opera, input file, div tabindex autosoft Events/DOM/Window 31 04.07.2012 01:45
проблема с div И animate g00000dman jQuery 2 24.03.2011 22:34
Закрытие прозрачного div при щелчке мыши в любой его области mav1 Элементы интерфейса 8 09.02.2011 18:25
animate, всплывающий div box сделать по центру zero_mod jQuery 1 26.10.2010 23:23