Как обойти ошибку в IE6 с наложением YUI? - PullRequest
Новая
       18

Как обойти ошибку в IE6 с наложением YUI?

0 голосов
/ 07 февраля 2011

Собираюсь поиграть с оверлеем из YUI 2 и IE6 (старые вещи, но я должен разобраться с ними) ... и решить проблему. Итак, вы можете помочь с идеей или двумя? : D

Предположим, что наложение создано: 

var newOverlay = new YAHOO.widget.Overlay("myOverlay" , 
                    {
            context: [someObjectToAttachTo, "tl", "bl"],
            monitorresize: false,
            iframe: false,
            zIndex: 900 });

некоторое содержимое инициализируется (внутри div): 

var content = new StringBuffer();
content.append('<div id="containerDiv">');
content.append('whatever! some text for the overlay');
content.append('</div>');

событие присоединено к внутреннему элементу div, поэтому мы знаем, когда оно наведет на него мышку: 

YAHOO.util.Event.addListener('containerDiv', "mouseover", 
                     function() { alert('mouse in') });

«налить» div в оверлей: 

  newOverlay.setBody( content.toString() );

сделать наложение, но невидимое: 

  newOverlay.render( document.body );
  newOverlay.hide();

Проблема: , даже если оверлей скрыт, если вы перемещаете мышь в его области, вы получите предупреждение, говорящее «мышь внутри».

Этого не происходит в IE7 или Mozilla. Кажется, что это ошибка, связанная с

IE не перерисовывает DOM, пока не завершится контекст выполнения
Источник и некоторая информация здесь, другой вопрос StackOverflow

Оверлей показан и скрыт этим механизмом (примечание: код, описанный выше, здесь обновляется): 

 newOverlay.hideTimer = null; // new code
 YAHOO.util.Event.addListener('containerDiv', "mouseover", //event existed in above code
                    function() { 
                        alert('mouse in'); // line existed
                        clearTimeout(newOverlay.hideTimer) }); // added functionality
 YAHOO.util.Event.addListener('containerDiv', "mouseout", // new event 
                    function() { timedHide(newOverlay) });          

 newOverlay.setBody( content.toString() ); //old code
 newOverlay.render( document.body ); //old code
 newOverlay.hide(); //old code

функции, использованные выше: 

 function customShow(overlayName) {
      var overlay = document.getElementById(overlayName);
      clearTimeout(overlay.hideTimer);
      overlay.syncPosition();
      overlay.show();
 }

 function timedHide(overlayName) {
      var overlay = document.getElementById(overlayName);
      overlay.hideTimer = setTimeout(function() {overlay.hide() }, 200);
 }

вот вторая часть механизма скрытия / показа - триггер div; пожалуйста, игнорируйте смесь html и js; Вы все еще можете прочитать это: P 

<span id="triggerSpan">I will show an Overlay</span>

и его события: 

YAHOO.util.Event.addListener('triggerSpan', "mouseover", 
                     function() { customShow('myOverlay') });   
YAHOO.util.Event.addListener('triggerSpan', "mouseout", 
                     function() { timedHide('myOverlay') });

объект, использованный при создании наложения: 

var someObjectToAttachTo = document.getElementById('triggerSpan');

Длинные вещи ... Теперь, вы можете увидеть другой способ обойти эту ошибку IE? поэтому оверлей не берет мою мышь ... У меня есть материал под этим оверлеем, который нужно щелкнуть и навести (эта часть не упоминается в приведенном выше коде)

Можете ли вы увидеть другой способ создания / инициализации / показа / скрытия этого наложения?

1 Ответ

1 голос
/ 14 февраля 2011

Решением было изменение стиля отображения containerDiv на none или block при скрытии / отображении наложения.

Добавьте некоторые функции в Overlay, которые изменяют стиль внутреннего div: 

newOverlay.showOverlay = function() { 
    document.getElementById('containerDiv').style.display="block";
    newOverlay.show(); };

newOverlay.hideOverlay = function() {
    document.getElementById('containerDiv').style.display="none";
    newOverlay.hide(); };

и вызывают эти функции вместо вызова overlay.show() или overlay.hide() внутри функций customShow и timedHide

...