[IE/FF] JS functie pas na 2e keer pakken?

[Bjk]

Ik heb een JavaScript functie om bijv div's te showen en hiden, maar deze kan ook gebruikt worden voor tabellen enzovoorts.

Ik heb een link gemaakt in de body die een tabel/div moet un-hiden. Als je voor de eerste keer op de link klikt gebeurt er niks, klik je nog een keer komt de div/tabel wel op je scherm. Heb het ook geprobeert met een image en onclick event, maar dat werkt ook niet.
Nu is dit natuurlijk niet handig, want veel gebruikers klikken maar 1 keer en dan ziet men niks. Ik snap ook niet waarom dit gebeurt in IE en in FF.

Nu ben ik geen ster in JavaScript dus, hopelijk hebben jullie het antwoord in de search kon ik niks vinden.

JavaScript:

<script language="JavaScript" type="text/JavaScript">
function showhide(id) {
  var tag = document.getElementById(id);    
 if (!tag) return false;
    if (tag.style.display == "none")
    {
        /* show */
        tag.style.display = "block";
    } 
     else 
    {
        /* hide */
        tag.style.display = "none";
    }
 }
</script>

Cascading Stylesheet:

#portret
{
display: none;
}

HTML:

<a href="JavaScript:showhide('portret');">Portret</a>
<div id="portret">Content</div>

Ik hoop dat het een beetje overzichtelijk/duidelijk is voor jullie!

[ Voor 18% gewijzigd door Bjk op 14-10-2005 11:57 ]

[Cyphax]

Als je de display van dat divje (portret) nou eens eerst in je stylesheet ergens op zet? Zoals je met #trouwen ook doet?

[Bjk]

Ah mijn fout, dat hoort portret te wezen had al het overbodige css verwijderd maar de verkeerde laten staan, kortom portret staat al zo.
Dus het werkt nog niet .

[ Voor 10% gewijzigd door Bjk op 14-10-2005 12:17 ]

[crisp]

impliciete CSS is niet direct uit de style-property van een element af te lezen; dat kan alleen als inline CSS is gebruikt:

code:

<div id="foo" style="display:none">

// foo.style.display geeft 'none'

code:

<div id="foo">

#foo { display: none; }

// foo.style.display geeft niets terug

[Cyphax]

Ik heb hier ook weleens mee geklooid volgens mij. Het probleem is dat als je display op 'none' zet in je stylesheet, en je vraagt 'm vervolgens met javascript op, dan is ie gewoon leeg. Als je display op 'block' zet niet. Doe je het zo:

code:

function showhide(id) 
{
  var tag = document.getElementById(id);    
  if (!tag) return false;
  if (tag.style.display == "") tag.style.display = "";
  if (tag.style.display == "none") tag.style.display = "block";
  else tag.style.display = "none";
}

Dan werkt het wel.
Het is nogal een stom iets eigenlijk (of er moet een goede reden voor zijn). Hij is ook niet null maar gewoon echt leeg. Hoewel?

[edit]
Eh nee, toch niet helemaal. Ik had er een foutje ingezet waarmee het wel werkte en na correctie doet ie het weer niet. Even mee bezig nog.
Zo dan.

[ Voor 96% gewijzigd door Cyphax op 14-10-2005 12:42 ]

[Bjk]

Ik heb nu nog steeds dat ik twee keer moet klikken op een link/afbeelding wil de div ophoog komen.

Oeh had crisp ze reply niet gezien, even stoeien!

Crisp zijn oplossing werkt, bedankt heren!

[ Voor 37% gewijzigd door Bjk op 14-10-2005 13:00 ]

[Tanuki]

Een oplossing zou dus zijn, als je geen inline styles wilt gebruiken:

code:

<script language="JavaScript" type="text/JavaScript">
function showhide(id) {
  var tag = document.getElementById(id);    
 if (!tag) return false;
    if (tag.style.display != "block")
    {
        /* show */
        tag.style.display = "block";
    } 
     else 
    {
        /* hide */
        tag.style.display = "none";
    }
 }
</script>

En ze dan in je stylesheet op default none zetten.

Het is misschien niet een geweldige oplossing, maar zo heb ik het altijd opgelost.