nicht angemeldet
divs sichtbar und unsichtbar machen
hallo,
ich bin gerade dabei eine webseite komplett in css zu realisieren.
jetzt ist da eine unterseite, auf der ca. 10 headlines als grafiken stehen, die bei jeweiligem klick einen individuellen text anzeigen sollen. alles headline grafiken stehen untereinander, der text soll dann immer unter der geklickten headline sichbar sein, d.h. die anderen headlines schieben sich nach unten. soweit kein problem, allerdings bekomme ich es nicht hin, dass sich die aktiven headlines beim klick auf eine neue wieder "einklappen", man soll nämlich nur immer einen text sehen können.
hier mal ein beispiel:
/*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}
function togglediv(e)
{
if (!e) return;
var container = document.getElementById(e);
var status = container.style.display;
if (status == '')
{
container.style.display = 'block';
} else {
container.style.display = '';
}
}
function addListeners()
{
if(!document.getElementById) return;
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
var toggleButton = document.getElementById('togglebutton1');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv1') }, false);
}
addEvent(window, 'load', addListeners, false);
</script>
</head>
<style type="text/css" media="screen">
/* <![CDATA[ */
body {
font: 0.7em/160% "Lucida Grande", Verdana, Helvetica, sans-serif;
}
#togglediv {
background: #F9EE98;
border: 1px solid #D9C589;
display: none;
padding: 0.5em 1em;
}
#togglediv1 {
background: #F9EE98;
border: 1px solid #D9C589;
display: none;
padding: 0.5em 1em;
}
/* ]]> */
</style>
<body>
<p><a href="#" id="togglebutton">headline 1</a></p>
<div id="togglediv">
text des divs
</div>
<p><a href="#" id="togglebutton1">headline 2</a></p>
<div id="togglediv1">
text des divs
</div>
</body>
</html>
*/
-
Hallo,
habe wenig Zeit im Moment, daher ein Schuß aus der Hüfte:
if (status == '')
{
container.style.display = 'block';
} else {
container.style.display = '';
}Ich denke, das wird klappen, wenn Du explizit der display-Eigenschaft den Wert "none" gibst.
Also:
if (status == '' || status == 'none')
{
container.style.display = 'block';
} else {
container.style.display = 'none';
}Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)-
hallo andreas,
leider geht es damit auch nicht, desweiteren habe ich dann auch das problem, dass der layer erst beeim zweiten click erscheint...
schöne grüße,
josh.Hallo,
habe wenig Zeit im Moment, daher ein Schuß aus der Hüfte:
if (status == '')
{
container.style.display = 'block';
} else {
container.style.display = '';
}Ich denke, das wird klappen, wenn Du explizit der display-Eigenschaft den Wert "none" gibst.
Also:
if (status == '' || status == 'none')
{
container.style.display = 'block';
} else {
container.style.display = 'none';
}Ciao,
Andreas-
hi,
leider geht es damit auch nicht, desweiteren habe ich dann auch das problem, dass der layer erst beeim zweiten click erscheint...
Natürlich, weil .style.display beim ersten Abfragen eben nicht '', sondern vermutlich eher 'undefined' liefern dürfte.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
ja, deshalb auch ''. das wird als undefined interpretiert, ist ja auch kein wert.
kann ich das eigentlich eleganter lösen und z.b. if (status == 'none' OR 'undefined'- oder halt ''-) schreiben? Mir ist klar, dass or nicht geht, aber mit welchem begriff kann ich denn (diese) zwei werte gleichzeitig abfragen?schönen gruß,
josh.hi,
leider geht es damit auch nicht, desweiteren habe ich dann auch das problem, dass der layer erst beeim zweiten click erscheint...
Natürlich, weil .style.display beim ersten Abfragen eben nicht '', sondern vermutlich eher 'undefined' liefern dürfte.
gruß,
wahsaga-
Hallo,
kann ich das eigentlich eleganter lösen und z.b. if (status == 'none' OR 'undefined'- oder halt ''-) schreiben? Mir ist klar, dass or nicht geht, aber mit welchem begriff kann ich denn (diese) zwei werte gleichzeitig abfragen?
naja, Du könntest fragen: if(node.style.display != 'block').
;)Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)-
Hallo Andreas,
danke, ich habe jetzt deine erste Version genommen, damit geht es doch (also das zeigen des divs beim ersten Klick), habe aber vorhin den einen Teil übersehen, sorry.
Trotzdem hänge ich jetzt noch bei meinem ersten Problem... ;)
es geht immer nur ein div auszuschalten, wenn ich auch auf den Button drücke, der das jeweilige div angeschaltet hat. Leider.
Ich gehe mal davon aus, dass das Problem hier :
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
liegt, allerdings weiss ich nicht, wie ich das so variabel schreiben kann, damit das richtige div angeschaltet und alle anderen ausgeschaltet werden...ich kann so nur entweder einen oder halt alle gleichzeitig an und alle gleichzeitig aus schalten.Schönen Gruß,
Josh.Hallo,
kann ich das eigentlich eleganter lösen und z.b. if (status == 'none' OR 'undefined'- oder halt ''-) schreiben? Mir ist klar, dass or nicht geht, aber mit welchem begriff kann ich denn (diese) zwei werte gleichzeitig abfragen?
naja, Du könntest fragen: if(node.style.display != 'block').
;)Ciao,
Andreas-
hi,
bitte zitiere sinnvoll, und unterlasse TOFU-Postings.
es geht immer nur ein div auszuschalten, wenn ich auch auf den Button drücke, der das jeweilige div angeschaltet hat. Leider.
Ich gehe mal davon aus, dass das Problem hier :
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
liegt,Damit definierst du einen Handler für nur genau den einen Div [1], auf dem der Event stattfindet.
Das berührt die anderen Divs natürlich wenig.allerdings weiss ich nicht, wie ich das so variabel schreiben kann, damit das richtige div angeschaltet und alle anderen ausgeschaltet werden...
Durchlaufe alle in Frage kommenden Divs^WElemente in einer Schleife, und aktiviere nur das, auf dem der Event stattgefunden hat; deaktiviere alle anderen.
Oder, etwas feiner: Merke dir, welches Element zuvor aktiv geschaltet wurde, und blende dieses aus, wenn du das neue einblendest.
[1] Warum überhaupt Divs? In deinem Eingangsposting war von Überschriften die Rede - die realisierst du doch _bitte_ _hoffentlich_ nicht mit Divs?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
Damit definierst du einen Handler für nur genau den einen Div [1], auf dem der Event stattfindet.
Das berührt die anderen Divs natürlich wenig.Ja, ich weiss, mein Problem ist nur, dass ich leider sehr lange überhaupt nichts mehr mit css/js gemacht habe und deshalb nicht auf den –
Merke dir, welches Element zuvor aktiv geschaltet wurde, und blende dieses aus, wenn du das neue einblendest.
– Weg komme. So hätte ich es natürlich am liebsten, ich finde nur keine passenden Beispiele und komme nicht selbst damit klar, da mir einfach die Schreibweise nicht mehr klar ist. Deshalb dachte ich, dass ihr evtl. ein Beispiel kennt oder einen Befehl parat habt, der alle ausgeklappten divs versteckt und dann erst den listener abspielt oder so...
[1] Warum überhaupt Divs? In deinem Eingangsposting war von Überschriften die Rede - die realisierst du doch _bitte_ _hoffentlich_ nicht mit Divs?
Naja, es sind eigentlich zehn schmale Bilder, die etwas zu einem Thema sagen (eigentlich wie in der Beispiel-Datei, von meinem ersten Thread, bei mir sind es allerings Bilder), bei Klick, erscheint ein neues Bild darunter. Klappt ja auch, nur bleiben halt alle Texte immer stehen und das soll so nicht sein...
Schönen Gruß,
Josh.-
hi,
Ja, ich weiss, mein Problem ist nur, dass ich leider sehr lange überhaupt nichts mehr mit css/js gemacht habe und deshalb nicht auf den [...] Weg komme. So hätte ich es natürlich am liebsten, ich finde nur keine passenden Beispiele und komme nicht selbst damit klar, da mir einfach die Schreibweise nicht mehr klar ist.
Zum Nachschlagen gibt's doch http://de.selfhtml.org/javascript/
Wenn du dann einen Ansatz zur Umsetzung vorweisen kannst, wird dir sicher auch gerne bei Problemen damit weitergeholfen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
Hell-O!
ja, deshalb auch ''. das wird als undefined interpretiert, ist ja auch kein wert.
Nein, es wird nicht als undefined interpretiert, sondern als leerer String.
kann ich das eigentlich eleganter lösen und z.b. if (status == 'none' OR 'undefined'- oder halt ''-) schreiben? Mir ist klar, dass or nicht geht, aber mit welchem begriff kann ich denn (diese) zwei werte gleichzeitig abfragen?
Wie man mehrere Bedingungen in einer IF-Anweisung kombiniert, hat dir Andreas in seinem Posting doch schon gezeigt. Alternativ weise dem DIV einen Initialwert für 'display' zu, indem du entweder das Element direkt über Inline-CSS oder alternativ onload mittels Javascript vorformatierst.
Siechfred
--
Hier könnte Ihre Werbung stehen.
Die schlechtesten Cover aus dem Bereich Hard and Heavy || Schöne Wörter, Teil 1
-
-
-
-