[Javascript/IE] CSS bewerken mislukt

[Mac_Cain13]

Voor mijn website probeer ik een menutje te maken wat verschijnt op de positie van je muis zodra je klikt. Ik ben uiteraard al druk bezig geweest en het is dan ook gelukt. Dacht ik, toen ik namelijk met IE mijn site opende blijkt dat daar een mooie javascript error krijg.

Het menutje bestaat uit het volgende divje:

HTML:

[...]
    <div class="Menu" id="fileMenu">
        <table class="menuTable">
            <tr><td>Open</td></tr>
            <tr><td>Edit</td></tr>
            <tr><td>Hernoemen</td></tr>
            <tr><td>Verwijder</td></tr>
        </table>
    </div>
[...]

Deze is met behulp van wat CSS verborgen en staat braaf te wachten in de linker bovenhoek tot hij nodig is:

Cascading Stylesheet:

div.Menu
{
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
}

Nu heb ik een stukje javascript geschreven wat de het divje zou moeten herpositioneren en visible maken:

JavaScript:

function showMenu(menu, event)
{
    document.getElementById(menu).style.top = (event.clientY +
self.pageYOffset) + 'px;';
    document.getElementById(menu).style.left = (event.clientX +
self.pageXOffset) + 'px;';
    document.getElementById(menu).style.visibility = 'visible;';
}

Deze wordt dus aangeroepen zodra je klikt, in Mozilla gaat het prima. Geen javascript errors/warnings in de console. Het menu wordt ook netjes op de juiste plaats gezet en visible gemaakt.

Alleen IE gaat op mijn javascript volledig onderuit. Zodra showMenu() aangeroepen wordt met zijn parameters krijg ik een error en wel de volgende: 'Ongeldig argument' Het rare is dat als ik de elementen die ik wil aanpassen in een alert laat weergeven ik wel de juiste waarde terug krijg.

Als ik alleen nog maar de visibility aan wil passen (dus de top en left aanpassingen even weggooi) veranderd de error in: 'Kan de eigenschap visibility niet opvragen. Ongeldig argument.' Terwijl ook deze met een alert gewoon te laten zien is.

Ik heb werkelijk geen idee wat ik fout doe, want alle scripts hier op GoT die CSS dingetjes aanpassen lijken het ook op deze manier te doen. Waarom struikelt IE over mijn javascript?

[Koeniepoenie]

Misschien is het handig als je er even bijgeeft hoe je de functie aanroept, want daar gaat het immers fout in IE.

Verder is het misschien handiger met de display property te werken (block/none).

[crisp]

Voor IE:
pageYOffset --> screenTop (of scrollTop)
pageXOffset --> screenLeft (of scrollLeft)

handig: http://www.quirksmode.org/viewport/compatibility.html en http://www.quirksmode.org/js/events_compinfo.html

[Mac_Cain13]

De functie wordt met een onClick aangeroepen, op deze manier:

HTML:

<a href="#" onclick="showMenu('fileMenu', event);">klik</a>

IE geeft overgens als linenummer steeds de 1e regel uit mijn functie waarmee ik de CSS probeer aan te passen. Dus het lijkt me dat ik daar iets fout doe.

Ondertussen heb ik pageYOffset ondertussen voor IE gewijzigt in scrollTop. Deze geeft inderdaad de juiste waarde terug in IE. Das wel makkelijk.
Alleen blijf ik dezelfde errors houden. Het lijkt erop dat de .top property enz niet bestaan als ik ze wil aanpassen, maar opvragen van de waarde lukt wel.

Wat is overgens het voordeel van de display property boven de visibility property?

[ Voor 34% gewijzigd door Mac_Cain13 op 11-11-2004 16:39 ]

[Koeniepoenie]

Ik zou ook de puntkomma's voor de zekerheid even weghalen:

code:

document.getElementById(menu).style.visibility = 'visible;';

Kun je dus:

code:

document.getElementById(menu).style.visibility = 'visible';

van maken.

Verder, de property 'visible' zorgt in bepaalde browsers voor wat problemen. Want voor IE waren het de waardes visible en hidden waar je mee kon spelen, maar ik geloof in Netscape dat het 'show' en 'hide' was. En display is overal hetzelfde.

[Mac_Cain13]

Na wat lezen, prutsen en nog meer lezen op de sites die Crisp gaf is het gelukt. De puntkomma's strippen was volgens mij ook nodig, ze horen er iig niet zoals KoenieMan ook al zei. Dus die heb ik ook weg geknikkerd.

Dit is de uiteindelijke code geworden:

JavaScript:

function showMenu(menu, event)
{
    var x,y;
    if (self.pageYOffset)
    {
        x = self.pageXOffset;
        y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
    {
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }
    else if (document.body)
    {
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }
    
    document.getElementById(menu).style.top = (event.clientY + y) + 'px';
    document.getElementById(menu).style.left = (event.clientX + x) + 'px';
    document.getElementById(menu).style.visibility = 'visible';
}

Dit stukje Javascript lijkt prima te werken! Ik zal nu mijn code nog eens wat opschonen. Hartelijk bedankt!

[ Voor 5% gewijzigd door Mac_Cain13 op 11-11-2004 17:07 ]