Tutorial(JS): DIV ein/ausblenden

[Daniel K.]

Da hier bei Webdesign noch nicht viel ist, dachte ich, ich muss mal was posten.
Also eine ganz nuetzliche Sache sind Bereiche, welche man auf Knopfdruck ein und wieder ausblenden kann, so kann man z.B. tooltips programmieren.
Die einzige Voraussetzung an den Clienten ist natuerlich, dass der JavaScript unterstuetzt (und auch CSS) also fuer TextBasedBrowsers wie lynx ist das alles nichts.
Aber gut, fangen wa an 

Da ich hoffe dass ihr wisst, wie ein HTML-Grungeruest aussieht, werde ich das hier nicht posten, sondern gleich mit den DIV fortfahren.

So, als erstes brauchen wir 2 DIVs

• Den Bereich mit dem Inhalt
• Schatten

Das ist ganz einfach:
Das erste div, der schatten, weil der soll ja nicht im vordergrund sein, und muss somit als erstes kommen:

Code: [Auswählen]

<div id="shadow">&nbsp;</div>
Bitte ein   ( ) zwischen die Tags, sonst meckert JavaScript manchmal xD

So dann noch der Inhalt und sein Bereich. Ich habe hier lateininischen DeadText zum fuellen genommen, damit man auch sieht, was passiert, wenn der Text ueber die DIV-Groesse hinaus geht:

Code: [Auswählen]

<div id="area">
<h3>Dead Text</h3>
In ornare felis eget magna. Donec hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur sit amet est. Pellentesque tincidunt imperdiet risus. Nulla varius tincidunt felis. Cras in metus non odio elementum consequat.
Ut quis tortor eget erat consequat porta. In mauris. Vestibulum eget ante. Curabitur hendrerit sagittis ante. In sem massa, iaculis quis,
mollis vel, fermentum vel, nulla.
</div>
So, also unsere DIVs haben wir.
Dann muessen wir denen ja auch noch ein ausehen verpassen, das machen wir in diesem fall mit css, welches im header-Bereich notiert werden muss

Code: [Auswählen]

<style>
#shadow{
background:#000;
border:#000;
width:200px;
height:200px;
position:absolute;
top:60px;
left:160px;
display:block;
}

#area{
background:#EEE;
border:#000 1px solid;
color:#000;
position:absolute;
left:150px;
top:50px;
height:200px;
width:200px;
overflow:auto;
display:block;
}
</style>
-hier werden die divs direkt ueber ihre ID angesprochen (#).
-der schatten wird schwarz gefuellt und jeweils 10 pixel verschoben dargestellt, so dass es so aussieht, als wenn das 2. div schwebt
-beide sind jeweils 200x200 pixel gross und am anfang eingeblendet.
-Falls ihr das nicht wollt, aendert bitte
display:block;
auf
display:none;
in beiden definitionen.
-overflow:auto; besagt, dass wenn der text groesser ist als das div, der browser entscheiden soll, was getan wird.
meisstens wird dann text umgebrochen ung ggf. nach unten gescrollt

so, das haetten wir.
nun brauchen wir noch javascript.
hier die funktion:

Code: [Auswählen]

<script>
function showDiv()
{
area=window.document.getElementById("area");
shadow=window.document.getElementById("shadow");

if(area.style.display=="" || area.style.display=="block")
{
area.style.display="none";
shadow.style.display="none";
}
else
{
area.style.display="block";
shadow.style.display="block";
}
}
</script>
sobald die funktion showDiv() aufgerufen wird, wird geprueft, ob das Textdiv eingeblendet ist.Wenn ja werden beide ausgeblendet sonst werden beide eingeblendet.
falls ihr die IDs der DIVs geaendert muesst ihr auch die IDs bei den Befehlen
window.document.getElementById(""); aendern

so das haetten wir:
2 DIVs
Funktion zum Ein- und Ausblenden

Doch das wichtigste fehlt noch....womit rufen wir die funktion auf?
da gibt es mehrere moeglichkeiten, ich stelle euch 3 vor
(Wer andere brauch bitte posten
1. Funktionsaufruf ueber Knopf

Code: [Auswählen]

<input type="button" onclick="showDiv()" value="Anzeigen/Verstecken">

2. Funktionsaufruf via Link

Code: [Auswählen]

<a href="#" onclick="showDiv()">Anzeigen</a>

3. Funktionsaufruf mit anderem Tag [z.B. Bild]

Code: [Auswählen]

<img src="aufrufsbild.gif" alt="Ein/Ausblenden" border="0" onclick="showDiv()">
Viel gibts dazu nicht zu sagen
Sobald man draufklickt, werden die DIVs ein oder ausgeblendet...

Hier nocheinmal der Komplette Code mit Knopf

Code: [Auswählen]

<html>
<head>
<script>
function showDiv()
{
area=window.document.getElementById("area");
shadow=window.document.getElementById("shadow");
if(area.style.display=="" || area.style.display=="block")
{
area.style.display="none";
shadow.style.display="none";
}
else
{
area.style.display="block";
shadow.style.display="block";
}
}
</script>
<style>
#shadow{
background:#000;
border:#000;
width:200px;
height:200px;
position:absolute;
top:60px;
left:160px;
display:block;
}

#area{
background:#EEE;
border:#000 1px solid;
color:#000;
position:absolute;
left:150px;
top:50px;
height:200px;
width:200px;
overflow:auto;
display:block;
}
</style>
</head>
<body>
<input type="button" onclick="showDiv()" value="Anzeigen/Verstecken">
<div id="shadow">&nbsp;</div>
<div id="area">
<h3>Dead Text</h3>
In ornare felis eget magna. Donec hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur sit amet est. Pellentesque tincidunt imperdiet risus. Nulla varius tincidunt felis. Cras in metus non odio elementum consequat.
Ut quis tortor eget erat consequat porta. In mauris. Vestibulum eget ante. Curabitur hendrerit sagittis ante. In sem massa, iaculis quis,
mollis vel, fermentum vel, nulla.
</div>
</body>
</html>

Alles verstanden? Bei Fragen oder Fehlern bitte posten [aba das tut ihr ja de ]

[Miguel]

gutes tut!
ich verschieb dich grad mal zu den anderen tuts