[Javascript] Auto hide div

[wboard]

kan iemand mij helpen, ik wil graag dat wanneer je over een bepaalde link gaat je een soort toolboxje krijgt met meerdere opties. Dit werkt super, echter ik krijg het werkelijk niet voor elkaar om er voor te zorgen dat wanneer je muis uit het divje gaat (onmouseout) hij hem weer verbergt. (auto hide dus). Dit doet hij nu:
Als ik op een bepaalde button klik krijg ik perfect gepositioneerd bij de button een mooi toolboxje, maar hij verdwijnt niet en ik krijg te horen van de foutconsole van ff dat "element" niet defined is. (in dit deel:)

code:

            x.onmouseout = function(element)
            { 
                timer = setTimeout("showHideElement('',element);", 1000); 
            }

maar ik snap het niet, ik geeft element toch mee in de functie en bij het aanroepen van showHideElement wordt ten alle tijden element meegegeven.

Wat zie ik over het hoofd?

JavaScript:

    /*HANDLER POPUPS*/
    function showHideElement(obj,element)
    {
        var x = document.getElementById(element);
        var image_toggle = document.getElementById('img_'+element);
        if(x.style.display == 'block')
        {
            x.style.display = 'none';
            if (image_toggle)
            {
                image_toggle.src='<? print BASE_URL; ?>images/<? print STYLE; ?>/icons/unCollapsedItem.gif';
            }
        }
        else
        {
            var timer = null;
            x.style.display = 'block';
            if (image_toggle)
            {
                image_toggle.src='<? print BASE_URL; ?>images/<? print STYLE; ?>/icons/collapsedItem.gif';
            }
            x.onmouseout = function(element)
            { 
                timer = setTimeout("showHideElement('',element);", 1000); 
            }   
            x.onmouseover = function()
            { 
                if (timer != null) 
                {
                    clearTimeout(timer); 
                }
                timer = null; 
            } 
            setElement(obj,element);
        }
    }

    function setElement(obj,element)
    {
        var coors = findObjectPosition(obj);
        coors[1] -= 50;
        var x = document.getElementById(element);
        x.style.top = coors[1] + 'px';
        x.style.left = coors[0] + 'px';
    }

    function findObjectPosition(obj)
    {
        var curleft = curtop = 0;
        if (obj.offsetParent) 
        {
            curleft = obj.offsetLeft
            curtop = obj.offsetTop
            while (obj = obj.offsetParent) 
            {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
            }
        }
        return [curleft,curtop];
    }

    /*END OF HANDLER POPUPS*/

[AtleX]

Even snel, zonder je code goed gelezen te hebben. Die onmousout zet je op je div, correct? Dan voldoet het volgende toch?:

JavaScript:

x.onmouseout = function()
            { 
                timer = setTimeout("this.style.display='none'", 1000); 
            }

Niet getest btw

[crisp]

closure maken zodat je een referentie naar 'element' behoud:

JavaScript:

x.onmouseout = function(element)
{
  timer = setTimeout(function() { showHideElement('',element); } , 1000); 
}

AtleX schreef op donderdag 28 december 2006 @ 14:14:
Even snel, zonder je code goed gelezen te hebben. Die onmousout zet je op je div, correct? Dan voldoet het volgende toch?:
[...]

Bij het uitvoeren van de code na die timeout verwijst 'this' naar je window-object

[ Voor 45% gewijzigd door crisp op 28-12-2006 14:16 ]

[wboard]

that did the trick, ik moest trouwens nog wel element weghalen in

code:

            x.onmouseout = function()
            { 
                timer = setTimeout("showHideElement('',element);", 1000); 
            }

enig idee waarom dat zou moeten (best handig om te weten, anders gaat het de volgende keer weer fout)?

[ Voor 3% gewijzigd door wboard op 28-12-2006 19:15 ]

[crisp]

wboard schreef op donderdag 28 december 2006 @ 14:24:
enig idee waarom dat zou moeten (best handig om te weten, anders gaat het de volgende keer weer fout)?

argumenten hiden variabelen met dezelfde naam in een hogere scope. In dit geval wil je juist die variabele uit de hogere scope gebruiken, dus dat argument moest inderdaad weg