hey da .. brauche noch einen Rat:)
Ich arbeite an einem Projekt mit einem filterbaren Portfolio [basierend auf diesem Plugin-Link: www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours .
Die Portfolioelemente werden in einem horizontalen Schieberegler angezeigt, der Bildlaufbereiche (Hotspots) auf der linken und rechten Seite des Browserfensters hinzufügt.
hier kommt mein Problem:
Die Breite des Schiebereglers wird im Plug-in smoothdivscroller www.smoothdivscroll.com berechnet. aber wenn ich den Inhalt des Sliders über die Filternavigation ändere ändert sich die Gesamtbreite des Sliders, aber das smoothdivscroller Plug-in bemerkt es nicht.
Ich richte ein vereinfachtes Beispiel in jsfiddle für Sie ein und Sie können das ganze Problem hier erleben kuemmel-schnur.de/projekte : wenn alle Projekte angezeigt werden (Alle) und du nach rechts scrollst und dann in die Kategorie" Lehrprojekte "wechselst t irgendwelche Projekte sehen, weil sie auf der äußersten linken Seite sind und die Gesamtbreite des Behälters nicht neu berechnet wird.
Um dies zu beheben, habe ich drei Ideen, wo ich einige ernsthafte Hilfe brauche.
1) Das Plug-in smoothdivscroll bietet eine öffentliche Methode, um die Breite des Containers wie
neu zu berechnen %Vor% Ich muss jedes Mal feuern, nachdem portfolio-list a angeklickt wurde. und ich muss dies mit der Methode kombinieren, bei der der Schieberegler automatisch zum ersten Element des aktuellen Inhalts wechselt
2) Meine zweite Idee - weil ich nicht weiß, ob oder wie 1) funktioniert - ist zu überprüfen, ob sich die URL ändert und dann die Neuberechnung auszulösen. Der Filter verwendet einen Hash, um den Inhalt zu adressieren. Also dachte ich, ich könnte die URL auslesen und jedes Mal, wenn sich der Teil direkt nach dem Hash ändert, könnte ich die Methode auslösen.
3) Ich könnte das filterbare Plug-in an das smoothDivScroll Plug-In mit etwas wie (Vorsicht vor komplett falschem Code:)
binden %Vor%so .. was denkst du? wieder die jsfiddle link: jsfiddle.net/tobiasmay/QudtF/
danke, Tobi.
ps. Ich hätte die Links richtig eingerichtet, aber ich brauche 1 mehr Rufpunkt, um mehr als 1 Link zu posten;)
Sie können sich die Veranstaltung anhören filterportfolio , und berechnen Sie / moveToElement von dort.
Es schien zu funktionieren, wenn man in der JavaScript-Konsole auf der Live-Seite spielt. Fügen Sie den Code-Block zu aks.js hinzu oder probieren Sie es aus In Chrome: Gehe zur Website, öffne die Konsole, füge den Code ein und drücke Enter. Sollte sofort funktionieren, wenn Sie die Schritte von der Frage reproduzieren: Scrollen Sie weit nach rechts, klicken Sie auf einen Filter.
Bearbeiten: Aufgrund der Animationen in der Filterung muss .smoothDivScroll(...) aufgerufen werden, nachdem die Animationen erstellt wurden. Da die Animationen ein wenig hässlich aussehen, wenn sie nur einmal aufgerufen werden, werden die Neuberechnungen während duration Millisekunden mit einem interval Millisekunden mehrmals durchgeführt.
Sie können das benutzerdefinierte jQuery-Ereignis verwenden: Wenn der Inhalt des Schiebereglers geändert wird, wird
ausgeführt $(document).trigger('contentChange');
und im Plugin wird ein Handler für dieses Ereignis gesetzt
$(document).bind('contentChange', function(){//here the code that changes the width of slider});
Hier ist meine Ansicht für dieses Problem.
Sie können Ihre zweite Option ausprobieren: Capture Hash Change Event
%Vor%Der einzige Minuspunkt bei diesem Ansatz ist: IE7 unterstützt das HashChange-Ereignis nativ nicht.
Tags und Links jquery plugins jquery-plugins bind