Question

Going to play with an Overlay from YUI 2 and IE6 (old stuff, but I have to deal with these)… and encouter a problem. So, can you help with an idea or two ? 😀

Suppose the Overlay is created :

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

some content is initalized (inside a div) :

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

an event is attached to the inner div so we know when it’s got the mouse over it :

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

“pour” the div into the overlay :

  newOverlay.setBody( content.toString() );

render the overlay, but invisible :

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

Problem : even if the overlay is hidden, if you move the mouse in his area, you will get an alert saying “mouse in”.

This does not happen in IE7 or Mozilla. Seems that it is a bug and is related to

IE not repainting the DOM until after the execution context is complete

Source and some info here, another StackOverflow question

the Overlay is shown and hidden by this mechanism (note: the code described above is being updated here) :

 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

the functions used above are :

 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);
 }

here is part two of the hide/show mechanism – the trigger div; please ignore the mix of html and js; you still can read it 😛

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

and its events :

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

the object used in the creation of the overlay is :

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

Long stuff…
now, can you see another way of passing by this IE bug ?
so the overlay does not take my mouse… I have stuff under that overlay that needs to be clicked and hovered (that part is not mentioned in the above code)

Can you see another way of creating/initiazing/showing/hidding that overlay ?

Answer 1

The solution was to change the display style of the containerDiv to none or to block when hiding/showing the overlay.

Add some functions to the Overlay that change the style of the inner div:

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

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

and call those functions instead of calling overlay.show() or overlay.hide(), inside the functions customShow and timedHide