Wie kann ein DIV-Layer mit CSS und Javascript ein- bzw. ausgeblendet werden?
Inhaltsverzeichnis
JavaScript
function einblenden(div) {
with(document.getElementById(div).style){
if(visibility=="visible"){
visibility="hidden";
}
else{
visibility="visible";
}
}
}
(Bemerkung 2009/05/18: Ich habe nun visible und hidden vertauscht, da der erste Klick auf den Link nie funktioniert hat)
Schalter
<a href="#" onClick="einblenden('ebene1'); return false;"> Ein-/Ausblenden </a>
Ein-/Auszublendender DIV
(div id="suchfeld" style="display: none;"> Inhalt 1.... </div>
( = <
Verbesserung durch Scriptaculous
Mit dem JavaScript-Framework „Scriptaculous“ sieht die Ereignisprozedur so aus:
(Dabei sind die ersten 3 Zeilen nur zur dynamischen Positionierung des Elements gedacht)
function einblenden2(divname) {
if (navigator.appName.indexOf('Netscape') != -1) { FensterBreite = self.innerWidth - 20}
else if (navigator.appName.indexOf('Microsoft') != -1) { FensterBreite = document.body.clientWidth };
document.getElementById(divname).style.right = (FensterBreite / 2 - 474)+"px";
Effect.toggle(divname, 'slide');
}
Genaue Infos finden sich hier: DIV-Effekte
Loading…