[JavaScript] vaag probleem met layers :(

[f1r3b4ll]

ben bezig een cross-browser menuutje te ontwikkelen.

hiervoor gebruik ik het principe onMouseover="laatmenuzien" onMouseOut="verbergmenu"

nu wordt de functie getElementById() niet ondersteund door Netschaap 4 dus heb ik zelf maar een functie geschreven die aan de hand van browsertype de layer op de juiste manier aanroept.

dit is de code om de layer te laten zien...

code:

function showLayer(layer)
      {
        if (document.getElementById)
        {
        document.getElementById(layer).style.visibility = 'visible';
        }
        else if (document.all)
        {
        document.all[layer].style.visibility = 'visible';
        }
        else
        {
        document[layer].visibility = 'visible';
        }
      }

...en dit is de code om de layer weer hidden te maken:

code:

function hideLayer(layer)
      {
        if (document.getElementById)
        {
        document.getElementById(layer).style.visibility = 'hidden';
        }
        else if (document.all)
        {
        document.all[layer].style.visibility = 'hidden';
        }
        else
        {
        document[layer].visibility = 'hidden';
        }
      }

het probleem is dus dat dit script niet werkt onder Netscape 4. hij zegt telkens dat "layer" niet gedefinieeerd is in IE5 doet ie ut perfect.

bekijk hier voor de complete code een werkend voorbeeld:

http://www.simon-paul.nl/zooi/test.html

kan iemand hier wat kort commentaar op geven ????

bvd !!!!

[Verwijderd]

netscape kan geen id in een div-tag afhandelen, volgens mij moet dit met name ...

dus zoiets als
<div id="blaat" name="blaat">

correct me if I am wrong!

[f1r3b4ll]

nop ... dat was het helaas niet... heb het geprobeerd met id="layer1" en name="layer1" maar dat mocht niet baten.

de debugger van netschaap (je weet wel als je "javascript:" als URL tikt) zegt "JavaScript Error: file:/G|/Documents and
Settings/Simon-Paul/Bureaublad/test.html, line 18:

document[layer] has no properties."


vaag....

[Verwijderd]

mischien moet je in <div> zeggen of hij visible is of niet, dus in de style van de <div> ...

[Verwijderd]

Fout

Netscape 4 syntax
document.layers['id'].visibility

Netscape 4 gaat prima om met de id parameter en het gebruik van inline en outline styles.

Waar je wel op moet letten is dat voor NETscape 4 je de waardes show en hide moet invullen ipv hidden en visible. In de stylesheet kun je wel hidden en visible gebruiken, alleen het oproepen en wijzigen van de style visibility zal show en hide moeten zijn. Dus:

document.layers['mijnlayer'].visibility = 'show';
document.layers['mijnlayer'].visibility = 'hide';

Maar de stylesheet kan wel hidden en visible bevatten:

#mijnlayer{position:absolute; top:10px; left:10px; visibility:visible;}

[Pelle]

code:

document.layers[layer].visibility

En als de layer genest is, dan zo:

code:

document.layers["parent"].document.layers[layer].visibility

[Verwijderd]

Op donderdag 04 april 2002 21:01 schreef Pelle het volgende:

code:

document.layers[layer].visibility

En als de layer genest is, dan zo:

code:

document.layers["parent"].document.layers[layer].visibility

Samen zijn wij nu toch een dikke 4+ informatief waard Dit moet gewoon in de faq..

[SchizoDuckie]

^{of je gebruikt beehive, dan heb je gelijk nergens last van}

[Pelle]

Op donderdag 04 april 2002 21:04 schreef Gordijnstok het volgende:
Samen zijn wij nu toch een dikke 4+ informatief waard Dit moet gewoon in de faq..

Ga het onthouden voor de WG-faq-die-ik-heel-binnenkort-zal-moeten-kloppen

Op donderdag 04 april 2002 21:33 schreef papa_eend het volgende:
^{of je gebruikt beehive, dan heb je gelijk nergens last van}

* Pelle denkt dat papa_eend stiekem een kloontje is van Clay
Zelf dit soort dingetjes bouwen is veel leuker dan het klakkeloos overnemen van andermans werk, vind ik persoonlijk..

[Verwijderd]

Op donderdag 04 april 2002 21:46 schreef Pelle het volgende:
Zelf dit soort dingetjes bouwen is veel leuker dan het klakkeloos overnemen van andermans werk, vind ik persoonlijk..

En het houd je nog scherp ook, kennis verwaterd helaas snel.

[f1r3b4ll]

dames en heren allemaal hartelijk bedankt!!!

ik zal morgen het een en ander gaan proberen. zit nu met school te kloten mocht ik dan nog tegen de lamp lopen, dan meld ik het hier nog ff.

[Verwijderd]

Je hebt iig een specialtreatment(.nl) gehad

[f1r3b4ll]

Op donderdag 04 april 2002 20:59 schreef Gordijnstok het volgende:
Fout

Netscape 4 syntax
document.layers['id'].visibility

Netscape 4 gaat prima om met de id parameter en het gebruik van inline en outline styles.

Waar je wel op moet letten is dat voor NETscape 4 je de waardes show en hide moet invullen ipv hidden en visible. In de stylesheet kun je wel hidden en visible gebruiken, alleen het oproepen en wijzigen van de style visibility zal show en hide moeten zijn. Dus:

document.layers['mijnlayer'].visibility = 'show';
document.layers['mijnlayer'].visibility = 'hide';

Maar de stylesheet kan wel hidden en visible bevatten:

#mijnlayer{position:absolute; top:10px; left:10px; visibility:visible;}

bedankt voor je hulp maar het lukt nog steeds niet.

als ik bijvoorbeeld met een test scriptje probeer de layer te laten verdwijnen in Netscape gaat het nog niet:

code:

function showLayer(layer)
{
  document.layers[layer].visibility = 'show'
}

en dan als volgt aanroepen:

code:

<a href="javascript:showLayer('layer1')">laat layer zien</a>

geeft in Netscape geen error maar hij doet gewoon nix !!!
In IE5 zegt ie "document.layers is leeg of geen object"

wat doe ik nu weer fout???

[Pelle]

Op vrijdag 05 april 2002 00:21 schreef sp_strikwerda het volgende:
wat doe ik nu weer fout???

Zet je complete script eens ergens online, dan kunnen we wat beter zien wat er aan de hand is...

[f1r3b4ll]

ok hier nog een keer de volledige code:

code:

<html>
  <head>
    <title>testje</title>
    <script language="JavaScript">
    <!--
      function showLayer(naam)
      {
        if (document.getElementById)        // wordt er Internet Explorer gebruikt ?
        {
        document.getElementById(naam).style.visibility = 'visible';
        }
        else if (document.layers)       // dit wordt ondersteund door Netscape
        {
        document.layers[naam].visibility = "show";
        }
        else                    // dit is voor andere browsers
        {
        document[naam].visibility = 'visible';
        }
      }

      function hideLayer(naam)
      {
        if (document.getElementById)        // wordt er Internet Explorer gebruikt ?
        {
        document.getElementById(naam).style.visibility = 'hidden';
        }
        else if (document.layers)       // dit wordt ondersteund door Netscape
        {
        document.layers[naam].visibility = "hide";
        }
        else                    // dit is voor andere browsers
        {
        document[naam].visibility = 'hidden';
        }
      }
    //-->
    </script>
  </head>
  <body>
    <div id="layer1" style="width: 100px; height: 100px; background-color: orange">
    <p>blaat</p>
    </div>
    <p>
    <form>
    <input type="button" value="toon layer" onClick="showLayer('layer1')">
    <input type="button" value="verberg layer" onClick="hideLayer('layer1')">
    </form>
    </p>
  </body>
</html>

of kijk op deze URL:

http://www.simon-paul.nl/zooi/test.html

goed ik ga maffen denk ik...

[Pelle]

Op vrijdag 05 april 2002 00:42 schreef sp_strikwerda het volgende:
http://www.simon-paul.nl/zooi/test.html

Ah, het aloude probleem
Zet je style niet inline, maar in een stylesheet. Veel van Netscape4's nukken zijn daarmee op te lossen. Tevens moet je een position-attribuut meegeven, anders gaat hij alsnog over z'n nek:

code:

    <style type="text/css">
    <!--
      #layer1 {
        position: relative;  
        width: 100px; 
        height: 100px; 
        background-color: orange;
      }
    -->
    </style>

Als je dit toevoegt in je <head> en de style="blah" weghaalt uit je div-tag, dan doet 'ie het wel.

[f1r3b4ll]

many, many thanx !!!!!


wat is dat toch altijd een gesode@#@$ter om een website aan de praat te krijgen met netscape !!! maar ja... je wilt toch geen mensen uitsluiten dus....

[Clay]

* Pelle denkt dat papa_eend stiekem een kloontje is van Clay
Zelf dit soort dingetjes bouwen is veel leuker dan het klakkeloos overnemen van andermans werk, vind ik persoonlijk..

papa_eend is geen kloontje of ik moet schitzo zijn en mezelf op icq geadd hebben

Het is trouwen wel handig om qua coden na te denken wat je waar neerzet. Zo ztaat er nu zowel in de show als de hide een eigen browsercheck die het layer object binnenhaalt en de visibility verandert, en zoals gezegd gaat dat fout als de layer in ns4 genest is. Op deze manier zou een moveLayer ook zijn eigen check hebben, en voor je het weet heb je kilo's code.

Als je het ophalen van dat layer object nou centraal regelt:

code:

function findLayer(id) {
   if( ... ) layer = document.getElementById(id)
   else if( ...
   
   return layer;
}

en dit in de show en hide gebruikt ala:

code:

function showLayer(id) {
   findLayer(id).style.visibility = "visible";
}

function hideLayer(id) {
   findLayer(id).style.visibility = "hidden";
}

function moveLayer(id, x, y) {
   with(findLayer(id)) {
    style.left = x;
    style.top = y;
   }
}

_{met een truc snapt ns4 layer.style ook}

zo heb je een stuk minder code, en het is mijns inziens ook al duidelijker en netter. Verder lijkt dit al flink wat op de oude dhtml lib van brainjar maar da's een ander verhaal. Neemt niet weg dat het ook handig is dit soort dingen standaard in een filetje te gooien, zodat je dat nooit meer hoeft te doen.

[Verwijderd]

Het probleem lag hem niet bij de inline style. Het probleem lag hem bij een incomplete definitie van de layer door geen position op te geven

Netscape 4 gaat over het algemeen prima om met inline styles, zeker bij dit soort simpele klusjes, alleen moet je wel goed coden

[Bosmonster]

In de stylesheet kun je wel hidden en visible gebruiken, alleen het oproepen en wijzigen van de style visibility zal show en hide moeten zijn. Dus:

document.layers['mijnlayer'].visibility = 'show';
document.layers['mijnlayer'].visibility = 'hide';

Das niet waar Gordijn. Netscape 4 slikt ook netjes visible en hidden. Het ENIGE waar Netscape 4 in verschilt is de waarde die die intern opslaat. Als je de visibility OPVRAAGT zal NS4 altijd show en hide terug geven ipv de juiste css-waarden (zelfs als je ze als visible/hidden hebt opgegeven daarvoor). Maar aangezien je het opvragen niet zo vaak gebruikt als het setten zul je hier dus niet zo vaak mee te maken hebben.


Maar goed. de juiste oplossing was al gegeven.. je MOET bij NS4 altijd position:absolute opgeven wil je wat met de layer kunnen doen.

[Verwijderd]

Op vrijdag 05 april 2002 09:41 schreef Bosmonster het volgende:

[..]

Das niet waar Gordijn. Netscape 4 slikt ook netjes visible en hidden. Het ENIGE waar Netscape 4 in verschilt is de waarde die die intern opslaat. Als je de visibility OPVRAAGT zal NS4 altijd show en hide terug geven ipv de juiste css-waarden (zelfs als je ze als visible/hidden hebt opgegeven daarvoor). Maar aangezien je het opvragen niet zo vaak gebruikt als het setten zul je hier dus niet zo vaak mee te maken hebben.


Maar goed. de juiste oplossing was al gegeven.. je MOET bij NS4 altijd position:absolute opgeven wil je wat met de layer kunnen doen.

Je hebt helemaal gelijk Ik gebruik zelf namelijk altijd show en hide, maar waarom weet ik zelf ook niet