[javascript] code om DIV layer te sluiten [Archief]

thelorrr

%Europe/Berlin %921 %2009, 23:06

Ik heb een DIV met position:absolute. Deze wil ik graag sluiten (of onzichtbaar maken). Ik heb gelezen dat dit met javascript gedaan kan worden. Weet iemand hiervoor de code?

Cheeeeers!

Koen!

%Europe/Berlin %929 %2009, 23:18

hetelement.style.display = 'none'
Zo dus. :)

thelorrr

%Europe/Berlin %951 %2009, 23:49

Bedankt voor die code. Maar hoe pas ik dit toe op mijn div? Ik had al wat dingen gevonden en geprobeerd (wat niet werkt), oa dit:

<div id="mydiv">

mydiv is the assigned ID. Then just set its display to none from the onClick event of the link/button.

onClick="document.getElementById('mydiv').style.display = 'none';"

<script>
function checkClick(e) {
var obj = e.srcElement;
if (obj.id != "divID")
document.getElementById('divID').style.display = 'none';
}
</script>

<body onClick="checkClick(event)">

Koen!

%Europe/Berlin %828 %2009, 20:53

Bedankt voor die code. Maar hoe pas ik dit toe op mijn div? Ik had al wat dingen gevonden en geprobeerd (wat niet werkt), oa dit:

<div id="mydiv">

mydiv is the assigned ID. Then just set its display to none from the onClick event of the link/button.

onClick="document.getElementById('mydiv').style.display = 'none';"

<script>
function checkClick(e) {
var obj = e.srcElement;
if (obj.id != "divID")
document.getElementById('divID').style.display = 'none';
}
</script>

<body onClick="checkClick(event)">
In welke browser probeerde je dat? scrElement is namelijk IE-only. En waar zette je de onClick neer? Laat eens de volledige HTML van je tests zien. :)

thelorrr

%Europe/Berlin %931 %2009, 23:21

Probeerde ik in firefox

Ik heb al iets gevonden en het werkt. Dit is de code:

<script>
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('toHide');
if (el.style.display == '')
{
el.style.display = 'none';
}
else
{
el.style.display = '';
}
}
</script>

<div id="toHide" style="position:absolute; top:83px; left:14px; width:212; height:420; z-index:1; padding:0px;"></div>

thats it. Mijn flash banner zit in deze div over de rest en kan hem sluiten met klikje : <a href="#" onClick="toggleDisplay('toHide')">SLUIT</a><br />
bedankt voor je hulp.

mknol

%Europe/Berlin %029 %2009, 01:41

Ok het werkt nu wel, maar de logica natuurlijk klopt niet. :) Je hebt een toggle-script gevonden (die zet een element aan en daarna uit en daarna aan en daarna uit etc..), en je gebruikt het om alleen mee te sluiten. Logischerwijs zou het voor kunnen komen dat je 2x op de sluitknop moet drukken voordat er iets gebeurt. Snap je?

Wat ik wil zeggen is dat dit het niet makkelijker op maakt, alleen ingewikkelder. :) Iets verbergen is wat anders als togglen.

Crazydance

%Europe/Berlin %351 %2009, 09:26

Ok het werkt nu wel, maar de logica natuurlijk klopt niet. :) Je hebt een toggle-script gevonden (die zet een element aan en daarna uit en daarna aan en daarna uit etc..), en je gebruikt het om alleen mee te sluiten. Logischerwijs zou het voor kunnen komen dat je 2x op de sluitknop moet drukken voordat er iets gebeurt. Snap je?

Wat ik wil zeggen is dat dit het niet makkelijker op maakt, alleen ingewikkelder. :) Iets verbergen is wat anders als togglen.

Ik gebruik ook heel vaak een toggle script zoals hij het aangeeft.
In eerste instantie gebruik je de JS functie vanaf een link o.i.d. om je blok te openen, en vanaf daar gebruik je weer een link om hem te sluiten, vrij logisch opzich, want als je bijv. een div over je eerste knop heen zet zou je je div niet meer kunnen weghalen, kijk bijv. maar eens naar lightboxes. Vrijwel dezelfde techniek. meestal gebruik ik overigens geen sluitknop, maar de div die de site donkerder maakt (een semi-transparante dis meestal in de kleur zwart).

Op verzoek kan ik daar overigens wel een voorbeeldje van produceren :)

renegeuze

%Europe/Berlin %383 %2009, 10:11

@ crazydance.
Dus een knop die SLUIT heet zou jij gewoon aan een aan/uit toggle hangen?

Dat is namelijk waar het hier op lijkt. Dus ik ben het eens met mknol.
Dat je in de praktijk nooit een sluitknop zou moeten zien op het moment dat iets is gesloten is hier nog niet aan de orde.

thelorrr

%Europe/Berlin %476 %2009, 12:26

Ok het werkt nu wel, maar de logica natuurlijk klopt niet. :) Je hebt een toggle-script gevonden (die zet een element aan en daarna uit en daarna aan en daarna uit etc..), en je gebruikt het om alleen mee te sluiten. Logischerwijs zou het voor kunnen komen dat je 2x op de sluitknop moet drukken voordat er iets gebeurt. Snap je?

Wat ik wil zeggen is dat dit het niet makkelijker op maakt, alleen ingewikkelder. :) Iets verbergen is wat anders als togglen.

De sluit functie staat nu in de DIV.
De div is te sluiten (nou ja, verbergen) en niet opnieuw op te roepen, behalve door een pagina refresh. Ik snap niet wat je bedoelt met 2x klikken om te sluiten. Hij werkt gewoon bij 1x klikken.

Koen!

%Europe/Berlin %566 %2009, 14:36

De sluit functie staat nu in de DIV.
De div is te sluiten (nou ja, verbergen) en niet opnieuw op te roepen, behalve door een pagina refresh. Ik snap niet wat je bedoelt met 2x klikken om te sluiten. Hij werkt gewoon bij 1x klikken.
Kijk eens goed naar je script, dan snap je misschien wat er bedoelt is. Er zit nu overbodige functionaliteit in de functie, wat het complexer dan nodig maakt.

(als de functie wordt aangeroepen terwijl de div onzichtbaar is wordt de div zichtbaar; hij 'togglet' dus)