[html/css/js] hidelayer over selectveld + setTimeout

[Verwijderd]

Bij het bugfixen van mijn suckerfishmenu liep ik in IE tegen de gebruikelijke bug aan dat een :hover menu niet over een <select> heen kan komen te liggen. Aangezien het geen optie was om de <select> niet toe te passen, ben ik gaan zoeken naar een oplossing.

In dit topic wordt er een oplossing genoemd door Yo-L, welke ik werkend heb kunnen inplementeren in mijn voorbeeld. Ik kan de betreffende div (fronttabboxhider) onzichtbaar maken door een onmouseover, en deze weer zichtbaar bij een onmouseout, zoals de onderstaande code aangeeft:

code:

<a href="#" onMouseOver="hideLayer('fronttabboxhider');" onMouseOut="showLayer('fronttabboxhider');">menu-item</a>

Het probleem ligt nu echter nog iets gecompliceerder. Het menu bevat een timeoutfunctie, welke het menu pas na 1 seconde laat dichtklappen na de onmouseout. Gedurende deze seconde komt de onzichtbare div (fronttabboxhider) al wel weer te voorschijn. Het is nu dus de bedoeling dat de functie showlayer en hidelayer ook deze timeout-functie gaan meepakken.

Nu zou je kunnen zeggen dat ik dan de functie die Yo-L heeft geschreven kan implementeren in de functie die het menu weergeeft (:hover voor IE), echter hoeft de functie van Yo-L niet te werken op elk menu-item... en dat zou het in dit geval wel doen.

Mijn javascript dat ik heb gebruikt met betrekking tot het weergeven van het menu en de time-outfunctie (welke door crisp is geschreven in een ander topic) heb ik hier online staan. De door Yo-L geschreven functie heb ik hier online staan.

Hoe kan ik nu zorgen dat het hiden van (fronttabboxhider) gelijk loopt met de timeoutfunctie van het menu?

Ik zal eventueel in de loop van de dag van morgen een voorbeeld van de werking online plaatsen...

[ Voor 6% gewijzigd door Verwijderd op 22-01-2005 23:16 ]

[crisp]

Je kan berekenen of je menu al dan niet over je select heenvalt door creatief te doen met dingen als offsetTop, offsetLeft, clientWidth en clientHeight

[Verwijderd]

En dan zou ik de functie van het hiden van de betreffende div kunnen betrekken in de functie om het menu al dan niet weer te geven? Hoewel die begrippen die je daar ter gehore brengt mij totaal nieuw in de oren klinken

[ Voor 26% gewijzigd door Verwijderd op 22-01-2005 23:21 ]

[crisp]

Jep, ik doe het ook voor de banner en de quicksearch hier bovenin; hide_banner wordt aangeroepen vanuit de functie die het menu laat zien (dat is dus een ul-element):

JavaScript:

function hide_banner(ul)
{
    var left = ul.offsetLeft+ul.parentNode.offsetLeft, right = left + ul.clientWidth;
    if (bannerhide && !(left > banner.offsetLeft+banner.clientWidth || right < banner.offsetLeft)) banner.style.display = 'none';
    if (qshide && !(left > quicksearch.offsetLeft+quicksearch.clientWidth || right < quicksearch.offsetLeft)) quicksearch.style.display = 'none';
}

Voor het gemak kijk ik alleen naar de horizontale positie. Ik neem ook de offset van het parent-element van de betreffende ul mee omdat die ook weer gepositioneerd is (float:right).

[ Voor 15% gewijzigd door crisp op 22-01-2005 23:25 ]

[Verwijderd]

Mja, dat offsetgedoe laat ik nu maar even zitten, das weer leuk voor morgen. Ik krijg het momenteel niet eens voor elkaar de functie aan te roepen vanuit de functie die het menu laat zien

[Woudloper]

Je kan ook een kijken bij de Listamatic: one list, many options, dan niet bij de standaard voorbeelden maar dan bij de 'link to other ...'. Hier staan namelijk ook diverse implementaties zoals jij ze wilt...

[Verwijderd]

@Woudloper, het menu werkt in principe prima (zit nog kleine bug in). Het gaat er in feite puur om dat ik vanuit dezelfde functie, ook de functie aanroep om <select> te hiden.

Of ik heb je helemaal verkeerd begrepen

[Verwijderd]

Inmiddels nu toch maar met dat offset en dergelijke gaan knoeien, het aanroepen van de functie werkt nu nagenoeg perfect. Het probleem nu dus alleen nog dat ie ook hide op verkeerde menu-items, maar volgens crisp ga ik dat op een heel moeilijke manier berekenen. Even het voorbeeld grondig bestuderen.

Het probleem waar ik nu tegen aanloop trouwens, het menu klapt niet meer uit als de betreffende div helemaal niet bestaat. Is er ook een manier om te kijken of de div wel aanwezig is op de pagina? Want nu laat hij bij bepaalde pagina's het menu al helemaal niet meer uitklappen

En Firefox negeert het menu nu helemaal, ongeacht de pagina waar dus al dan niet de betreffende div wel aanwezig is

[ Voor 44% gewijzigd door Verwijderd op 22-01-2005 23:47 ]

[crisp]

Verwijderd schreef op zaterdag 22 januari 2005 @ 23:44:
[...]
Het probleem waar ik nu tegen aanloop trouwens, het menu klapt niet meer uit als de betreffende div helemaal niet bestaat. Is er ook een manier om te kijken of de div wel aanwezig is op de pagina? Want nu laat hij bij bepaalde pagina's het menu al helemaal niet meer uitklappen

Daarvoor gebruik ik de variabelen bannerhide en qshide - die worden alleen op true gezet als die elementen daadwerkelijk ook bestaan, maar je kan dat zelf ook makkelijk in de functie proppen:

JavaScript:

if (document.getElementById('foo') != null)
{
  // alleen uitvoeren als element 'foo' bestaat
}

[Verwijderd]

crisp schreef op zondag 23 januari 2005 @ 00:16:
[...]

JavaScript:

if (document.getElementById('foo') != null)
{
  // alleen uitvoeren als element 'foo' bestaat
}

Dit werkt prima in zowel Firefox als IE. Echter doet mijn menu het nu niet in Firefox als 'foo' wel bestaat. Dit zou ik kunnen afvangen door een browsercheck, welke de hele functie niet uitvoert als de browser anders is dan IE, echter las ik in andere topics dat browserchecks niet ideaal zijn aangezien een browser nog wel eens wil veranderen van specs.

Hoe kan ik nu zorgen dat het menu het gewoon normaal doet in browsers als Opera en Firefox, en dat hij juist deze extra functie alleen uitvoert in IE.

Heb het voorlopig zo opgelost (met browsercheck dus), maar vraag me af of dit met de tijd mee gaat

code:

if (IE4 && document.getElementById('foo') != null)
{
  // alleen uitvoeren als element 'foo' bestaat
}

Daarnaast moet ik dat offsetgedoe nog doen, maar daarbij heb ik iets meer hulp nodig denk ik

[ Voor 25% gewijzigd door Verwijderd op 23-01-2005 11:16 ]