[GELÖST] .show() zeigt nach .hide() keinen Inhalt mehr an

[jochla]

Hallo,

der Betreff beschreibt das Problem schon ziemlich genau. Gibt es dafür irgend einen Grund?

Vereinfachte HTML Struktur:

<div class="slider panel1">
    <img ...>
    <img ...>
    <img ...>
</div>

<div class="slider panel2">
    <img ...>
    <img ...>
    <img ...>
</div>

CSS:

slider { display: block;}

JavaScript:

$("div[class*='slider']").hide();
$("div[class*='slider']:first").show();

/* Sichtbarkeit wechseln */
$("div[class*='slider']").hide();
$("div[class*='panel2']").show();

Wenn ich nun mit JS über die Console im Chrome die Sichtbarkeit der beiden Panels wechseln möchte wird zwar 'panel1' nicht mehr angezeigt, 'panel2'
aber auch nicht (hat allerdings eine unbekannte Höhe).

Eigenartig ist, dass, wenn ich ALLE vier Befehle über die Console im Chrome ausführe, das Problem nicht auftritt.

Gibt es dafür irgend eine Erklärung, oder noch besser eine Lösung!??

Johannes.

 

[mikdoe]

ich würde die nacheinander auszuführenden immer in den ready parameter des vorhergehenden schreiben und nicht untereinander.

 

[kkapsner]

Wenn das Problem dann immer noch besteht, wäre ein Livelink hilfreich.

PS: es gibt in CSS extra den Klassenselektor...

 

[jochla]

Danke für Eure Tipps.

Nach ausgiebiger Suche bin ich auf was neues gestoßen. Wie ich ja schon geschrieben habe, wird nach '.show()' der Inhalt nicht angezeigt, aber der Container hat eine Höhe von 130px, was ich mir zunächst nicht erklären konnte. Ich habe dann festgestellt, dass ich das nächste Bild im Slider anzeigen konnte. Es wurde zwar nur der untere Teil davon angezeigt, wenn ich dann aber auf das vorherige Bild (also das erste) zurückgeschaltet habe, wurde dieses vollständig angezeigt. Es stimmte also danach irgendwas nicht mit der Container-Höhe. Dem bin ich nachgegangen und habe festgestellt, dass in dem umgebenden Container die Vor-Zurück-Navigation reingeschrieben wurde, was die Höhe erklärt hat. Dabei ist mir dann auch aufgefallen, dass auch für ein innenliegendes div per Inline-Style die Höhe gesetzt wird. Nach Studium der Doku für das Slider-Plugin habe ich dann ein Funktion gefunden, die ein 'Re-Init' für den Slider macht. Dies habe ich dann auch ausprobiert und siehe da, mein 'panel2' wurde angezeigt, weil durch das Re-Init die Höhe neu berechnet wurde.

Das Problem ist also behoben!