verberg div element

[xtremegamer]

hallo, ik zit met een raadselachtig probleem.

ik wil bij m'n website de footer verbergen als men hierom vraagt.

de footer zit in een div element dus dacht ik dit snel te kunnen oplossen door met een scriptje dat de div herschrijft.

bijhorende code

Footer

<div id="sys_footer" class="sys_footer">Designed by <a href="Localhost" target="_blank">Xtremegamer</a></div>

to zoverre het script

<script language="javascript" type="text/javascript"> 
function hidediv() { if (document.getelementById) { // DOM3 = IE5, NS6 document.getelementById('sys_footer').style.visibility = 'hidden'; } 
else { if (document.layers) { // Netscape 4 document.sys_footer.visibility = 'hidden'; } 
else { // IE 4 document.all.sys_footer.style.visibility = 'hidden'; } } } function showdiv() { if (document.getelementById) { // DOM3 = IE5, NS6 document.getelementById('sys_footer').style.visibility = 'visible'; } 
else { if (document.layers) { // Netscape 4 document.sys_footer.visibility = 'visible'; }
else { // IE 4 document.all.sys_footer.style.visibility = 'visible'; } } } </script> <a href="javascript:hidediv()">hide div</a>

 

[That Guy]

Err, lekker scriptje (niet echt). Probeer deze:
[JS]//js togglediv by Vegras

function toggleDiv(id)
{
var osd = document.getElementById(id).style.display;

if(osd == '' || osd == 'none')
{
osd = 'block';
}else{
osd = 'none';
}
}
[/JS]

<div id='mijnDiv'>
    footer stuffs here
</div>


<a href="#" onclick="toggleDiv('mijnDiv');">hide/show div</a>

:thumb:

 

[Supersnail]

Vegras heeft een klein typefoutje gemaakt:

<a href="#" onclick="toggleDiv('mijnDiv);">hide/show div</a>

moet zijn

<a href="#" onclick="toggleDiv('mijnDiv');">hide/show div</a>

 

[That Guy]

Ah, inderdaad. Dank, bericht is angepast.

 

[FrankoDesign]

script reageert niet

Mijn eerste bericht op helpmij en ik ben even benieuwd wat het probleem kan zijn?

Ik heb de code toegepast om te kijken of dit zou werken, maar helaas werkt het script niet. Zodra ik op de link druk gebeurt er helemaal niets.
Wat kan het probleem zijn?

Groeten,
Franko

 

[ErikBooy007]

Ik denk dat je het zo beter kunt doen:

[JS]
function toggleDiv(id)
{
var osd = document.getElementById(id).style;

if(osd.display == '' || osd.display == 'block')
{
osd.display = 'none';
}else{
osd.display = 'block';
}
}
[/JS]

Je wilt een referentie naar het object in je var hebben. Niet de string die de display-waarde representeert.

[EDIT]
Nog even aangepast, je kunt beter de block in de else steken, aangezien de eerste keer de expressie true is, dan moet ie dus ónzichtbaar worden. Ik heb hem zo getest en dit werkt.
[/EDIT]

 

[That Guy]

Erik,

je hebt helemaal gelijk, ik kwam er laatst ook achter dat je beter eerst kan checken op een 'block'. Daarnaast zal mn voorbeeld niet werken; dat van jou wel. Op een of andere manier kan je een property niet opslaan in een var?


:thumb:


[edit]

Je wilt een referentie naar het object in je var hebben. Niet de string die de display-waarde representeert.

ohja, natuurlijk. my bad ^^'[/edit]

 

[GlowSolutions]

Omkeren

Script werkt inderdaad super.
Maar hoe kunnen we hem nu omkeren dat standaard de footer wordt verborgen?

Jortijn

 

[That Guy]

Script werkt inderdaad super.
Maar hoe kunnen we hem nu omkeren dat standaard de footer wordt verborgen?

Jortijn

<div id="sys_footer" class="sys_footer">Designed by <a href="Localhost" target="_blank">Xtremegamer</a></div>

je footer heeft de klasse 'sys_footer'. In je css stylesheet, moet je even bij die sectie, zoiets erbij zetten:

/* css */

div.sys_footer
{
   /* allemaal css hier */
   display: none;
}

:thumb:

 

[GlowSolutions]

Dank voor de snelle reactie, maar helaas werkt dat niet helemaal.
Het is nu zo dat de div standaard wordt weergegeven. Op het moment dat ik hem 'sluit'
of verberg, verdwijnd hij netjes, maar komt daarna nooit meer terug.

Ik had zelf ook al aan zo'n css oplossing zitten denken maar het blijkt dus
dat het toch niet helemaal werkt.

Zou het niet compleet met CSS op te lossen zijn?

 

[That Guy]

Als het goed is, zal de display: none; de div verbergen. Door de toggle functie aan te roepen, verander je deze waarde (=de waarde van de display:); als het 'none' is wordt het 'block' (dus: weergeven), en andersom (dus: verbergen).

Het is dus de bedoeling dat je footer standaard niet weergeven wordt, en als je op een link (oid) klikt, hij wel weergeven wordt?

Mischien is het handig als je een voorbeeld online hebt.

 

[GlowSolutions]

Het is dus de bedoeling dat je footer standaard niet weergeven wordt, en als je op een link (oid) klikt, hij wel weergeven wordt?

Klopt, misschien was het wel makkelijk als ik eerst de CSS had geupload .
Dan werkt het allemaal wat beter!

Maargoed, nu blijft de DIV standaard verborgen.
Het lijkt er dus op dat de CSS javascript overruled om het maar zo even te schijven.

Ik zal z.s.m. even een voorbeeldje online poffen, maar ik heb wat gezeur met mijn ISP.