• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Slider mit versteckten Elementen führt zu doppelten Slides

C

Centurion

New member
Hi,

ich weiß, dass der Thread Titel komisch klingt, aber ich weiß nicht, wie ich es sonst besser beschreiben soll.

Hier seht ihr meinen Code JSFiddle. Wenn man auf "Hide red" klickt, wird der rote "slide" auch nicht mehr dargestellt, aber dafür zweimal der blaue...
Ich habe schon überlegt nextAllUntil(":visible") zu verwenden... aber das will nicht funktionieren?!

Danke!
 
Zuletzt bearbeitet:
Bist Du sicher, dass Du "red" nur verstecken willst? Wenn Du es mit ".remove()" komplett entfernen würdest, hättest Du das Problem nicht.

Was passiert im Code?

Die Liste zeigt immer das Element an, das 500px vom linken Rand entfernt liegt. Das entspricht also bei 500px breiten Einzelelementen dem zweiten (sichtbaren) Element in der Liste. Anfangs sind 4 Elemente in der Liste (Yellow, Blue, Green,Red). Es wird also "Blue" angezeigt

Beim Klick auf den rechten Button passiert folgendes:
1. Die gesamte Liste wird schnell 500px nach links geschoben (optisch verschwindet also Blue, es erscheint Green)
2. Die Reihenfolge der Elemente in der Liste wird so geändert, dass das erste Element ans Ende der Liste rutscht (angezeigt wird also Green).

Das funktioniert soweit gut.

Wenn jetzt "Red" einfach unsichtbar gemacht wird, ist es weiter Teil der Liste, aber halt nicht mehr sichtbar. Es wird also bei den sichtbaren Elementen nicht mitgezählt.

Folgende Konstellationen sind dann möglich:
Yellow, Blue, Green, Red => Es wird "Blue" angezeigt
Blue, Green, Red, Yellow => Es wird "Green" angezeigt
Green, Red, Yellow, Blue => Es wird "Yellow" angezeigt
Red, Yellow, Blue, Green => Es wird wieder "Blue" angezeigt
 
Hallo devnull69,
danke für deine hilfreiche Antwort! Remove() funktioniert!!
Was müsste ich denn jetzt schreiben, wenn ich mit Hilfe eines weiteren Links wieder alle anzeigen lassen will (ohne die Seite neuzuladen)? :)
$(".c").show(); ?

- - - Aktualisiert - - -

Code: 
<p align="center"><a href="#singles" id="show_all">show all</a></li></p>


$("#show_all").click(function() {
 $(".c").show();
});

oder hier: Edit fiddle - JSFiddle

will nicht funktionieren.
 
.show() alleine wird nicht funktionieren, da es jetzt ja kein Element mehr gibt, das angezeigt werden könnte.

Du müsstest es (an der von Dir gewünschten Stelle) wieder einfügen
Code: 
$('.a').parent().append('<li class="c">Red</li>');

Ich habe den JsFiddle mal entsprechend erweitert
 
Mit deinem Fiddle könnte man ja durch mehrmaliges Klicken auf "Show Red" mehrere Slides "anhängen", sodass dann mehrmals rote Slides auftauchen. Hmm....
 
Ja, das ist natürlich richtig. In Deiner finalen Version solltest Du den "Show Red" Link nur dann erzeugen, wenn Du vorher den "Hide Red" angeklickt hast ... und umgekehrt

Fiddle
 
Das ist aber extrem nervig, wenn man sowohl im JS als auch im HTML den Inhalt von "Red" vorhalten muss... man kann den Code auch ganz einfach so umschreiben, dass es immer alle verstecken Elemente auch gleich an das Ende schiebt: Edit fiddle - JSFiddle
 
Danke für eure Antworten! Ihr helft mir echt gut weiter!!
Das mit der automatischen Link-Namen Änderung gefällt mir leider nicht. Ich will dafür extra Links haben.

Ich habe meinen Fiddle nun mal etwas erweitert: Edit fiddle - JSFiddle
Wie ihr nun sehen könnt, funktioniert es einigermaßen... Nur eine Sache: Wenn man etwas "entfernen lässt", tauchen die Slider nun doppelt auf (z.B. wenn man auf Singles only klickt und dann nach links "slidet")
Wie kann man dies beheben?
 
Ähm, jetzt bin ich irritiert. Du hast offenbar das gleiche Problem von oben wieder eingebaut ... Du "fadest" die Elemente aus, entfernst sie aber nicht. Dementsprechend werden sie bei den sichtbaren nicht mehr mitgezählt, sind aber trotzdem vorhanden. Du solltest halt entweder mit .remove und .append arbeiten, oder (wie kkapsner richtig gesagt hat) die ausgefadeten Elemente nach hinten schieben (damit sie "vorne" nicht mitgezählt werden).
 
Du kannst leider .append nicht genauso verwenden wie .fadeIn ... da das Element gar nicht mehr existiert, kannst Du es selbst nicht mit .append hinzufügen. Du musst stattdessen ein neues (gleich aussehendes) Element erstellen und das dann dem Elternelement (mit .append oder auch .appendTo) hinzufügen.

Ok ok, bevor ich ein kleine Diskussion losstoße: Man könnte natürlich das Element irgendwo (unsichtbar) parken, um es dann bei Bedarf wieder (sichtbar) in den Slider zurück zu schieben. Aber das lassen wir mal außen vor.

Darüber hinaus hast Du noch das "Problem", dass (zumindest in Deinem Beispiel) beim Entfernen einer Kategorie in der anderen Kategorie nur noch zwei Elemente übrigbleiben. Dadurch kommt es beim Sliden zu dem unschönen Effekt, dass von rechts nichts mehr nachkommt, wenn Du nach links schiebst (und umgekehrt).

Ich habe im FIDDLE jetzt mal kkapsners Idee aufgegriffen, die Elemente nach dem .hide() ans Ende zu verschieben. Dadurch sollten die meisten Probleme erledigt sein. Allerdings erscheinen die Elemente im allgemeinen nicht mehr an genau derselben Position, von der sie vorher verschwunden sind ...
 
Wenn du unbedingt mit .remove und .append arbeiten willst, solltest du das entfernte Element einfach irgendwo speichern (muss nicht im DOM sein, sondern kann ja auch in einer Variablen sein) und dann bei Bedarf hast du es wieder zur Hand. Man muss da kein "gleich aussehendes" Element erzeugen.

@devnull69: du hast meinen Ansatz (den ich eigentlich schon im fiddle umgesetzt hatte) falsch verstanden. Das verstecke Element wird nach dem Sliden nach hinten geschoben, wenn es ganz vorne ist. Dadurch hat man kein Problem mit der Reihenfolge.

@Centurion: wie die Hide/Show "Links" realisiert sind, ist doch für dein Problem irrelevant...

PS: <a href="#"> ist jetzt nicht euer Ernst...
 
Warum nicht gleich alles wie in einer Art Plugin zusammenfassen, wenn schon jQuery verwendet wird, und je nach gewähltem "Filter" dann nur die gewünscht "sichtbaren" Elemente sliden?

Nachtrag:
Hat es einen Grund warum eine so alte, und eigentlich nicht mehr empfehlenswerte, jQuery Version benutzt wird?
 
Zuletzt bearbeitet:
@kkapsner: Habe im Moment seid langem wieder mal etwas mehr Zeit zum proggen und das war mal ne gute Auffrischung ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben