✔ Div anzeigen/verbergen klappt mit display:none nicht

[kbit]

Hallo,
ich habe folgendes Problem. Ich habe eine einfach JS-Function die mir bei click auf den link das div anzeigen oder verbergen soll.

<script type="text/javascript">
	function test(element)
	{
		Effect.toggle(element, 'slide',  { delay: 0.5, duration: 0.5 }); 
		return false;
	}
</script>

<a href="#" onclick="test('element_1'); return false;">Test</a>
<div id='element_1' class="nodisplay">offen</div>

.nodisplay{ display:none;}

Das klappt aber nicht. Erst wenn ich das display:none direkt in das div schreibe.

<div id='element_1' style="display:none;">offen</div>

Woran liegt das ?

 

[Avorin]

Hast du das Stylesheet richtig eingebunden?
Hast du der ID vllt einen anderen display: status zugewiesen?
Hast du einen Link zu der Seite?
Hast du überprüft ob die Regel angenommen wird(Firebug)?

 

[kbit]

Hast du das Stylesheet richtig eingebunden?
- Ja habe ich, das sieht man auch im firebug.

Hast du der ID vllt einen anderen display: status zugewiesen?
- Du meinst noch woanders im Script ? Wenn ja, nein.

Hast du einen Link zu der Seite?
- Nein leider nicht.

Hast du überprüft ob die Regel angenommen wird(Firebug)?
- Also im firebug macht er :
element.style {
display:none; (das ist durchgestrichen)
overflow-x:visible;
overflow-y:visible;
}
.nodisplay {
display:none;}

Somit überschreibt er das nodisplay nicht, aber wieso ? wenn ich es direkt als style="display:none;" rein schreibe überschreibt er es mir ja auch.

}

 

[Sven Mintel]

Moin,

füge mal folgendes am Anfang der Funktion ein:

	  if($(element).hasClassName('nodisplay'))
	  {
	    $(element).setStyle({display:$(element).getStyle('display')});
	    $(element).removeClassName('nodisplay');
	  }

Es liest das display aus und fügt es dem Element direkt zu...danach wird die Klasse entfernt.

 

[kbit]

Klappt!

Ich hatte das gerade noch so gemacht:

function test(element)
{
	Effect.toggle(element, 'slide',  { delay: 0.5, duration: 0.5 }); 
        $(element).removeClassName('nodisplay');
	return false;
}

Da war allerdings das Problem das er es kurz auf und direkt wieder zu gemacht hat, beim ersten klick. Danach klappte es dann.

Also heißt das,dass er es nicht direkt dem div zugewiesen hat und deshalb klappte es nicht ? Und bei deiner variante sagst du ihm gib dem element direkt das display mit.

 

[Sven Mintel]

Also heißt das,dass er es nicht direkt dem div zugewiesen hat und deshalb klappte es nicht ? Und bei deiner variante sagst du ihm gib dem element direkt das display mit.

Jo, es wird praktisch per Skript das gemacht, was du im Markup vermeiden wolltest...das inline-Zuweisen des Styles.

Das Problem dürfte sein, dass Scriptaculous die Höhe des Elementes ausliest, um zu Ermitteln, was zu Tun ist(bei display:none ist die Höhe ja 0)...das display, welches über die Klasse geerbt wird, aber nicht ändert.
Bei dem inline-display wird es offensichtlich getan.

 

[kbit]

Ok das ist wieder mal etwas neues. Dachte man könnte das inline-display einfach nu austauschen damit es nicht im .tpl steht.

Danke nochmal.

Wenn du oder jemand anderes nichts mehr dazu sagen möchte schließe ich diesen beitrag gleich mal.

 

[Sven Mintel]

Ok das ist wieder mal etwas neues. Dachte man könnte das inline-display einfach nu austauschen damit es nicht im .tpl steht.

Aus JS-Sicht kann man das nicht ohne weiteres, zumindest nicht, wenn man mit JS auf die Style-Eigenschaften eines Elementes zugreifen will.

Diese sind für JS nur ermittelbar, wenn sie inline notiert sind oder mittels JS gesetzt wurden.