Javascript

DIV ein-/ausblenden mit Javascript

21. 05. 2009

Wie kann ein DIV-Layer mit CSS und Javascript ein- bzw. ausgeblendet werden?

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

Quelle

1

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

Related Posts

Javascript

JQuery-Grundlagen

24. 06. 2013

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...