hé là-bas .. Besoin de quelques conseils :)
Je travaille sur un projet avec un portefeuille filtré [Basé sur ce lien Plugin: www.gethifi.com/blog/a-jquery-plugin-a-create-an-interactive -filter-Portfolio-like-nôtre .
Les éléments du portefeuille sont affichés dans un curseur horizontal qui ajoute des zones de défilement (points chauds) à gauche et à droite de la fenêtre du navigateur. < / p>
Voici mon problème:
La largeur du curseur est calculée dans le plug-in SmoothDivScroller www.smoothdivscroll.com . Mais lorsque je change le contenu du curseur via la navigation du filtre, la largeur totale du curseur change, mais le plug-in SmoothDivScroller ne le remarque pas.
i Configurez un Exemple en Jsfiddle pour vous et vous pouvez faire l'expérience du problème global ici kuemmel-schnur.de/projekte : lorsque tous les projets sont affichés (Alle) et vous faites défiler jusqu'à la droite, puis passez à la catégorie" Lehrprojekte ", vous ne verrez aucun projet Parce qu'ils sont du côté à l'extrême gauche et que la largeur totale du conteneur n'est pas recalculée.
Pour résoudre ce problème, j'ai trois idées où j'ai besoin d'une aide sérieuse.
1 ) Le bouchon SmoothDivScroll propose une méthode publique pour recalculer la largeur du conteneur comme que j'ai besoin de tirer chaque fois après 2) ma deuxième idée - parce que je ne sais pas si je ne sais pas si Ou comment 1) fonctionne - est de vérifier si l'URL change puis déclencher la recalculition. Le filtre utilise un hachage pour résoudre le contenu. Je pensais donc que je pouvais lire l'URL et chaque fois la pièce directement après les changements de hachage, je pouvais tirer la méthode. 3) Je pourrais lier le plug-in filtré sur le plug-in SmoothDivScroll avec quelque chose Comme (méfiez-vous d'un code complètement erroné :) donc .. que pensez-vous? Encore une fois, le lien Jsfiddle: jsfiddle.net/tobiasmay/qudtf/ merci,
Tobi. ps. J'aurais configuré les liens correctement, mais j'ai besoin d'un point de réputation de plus pour poster plus 1 lien;) Portfolio-list A est cliqué sur. et j'ai besoin de le combiner avec la méthode où le curseur passe automatiquement au premier élément du contenu actuel
3 Réponses :
Vous pouvez écouter l'événement filterPortfolio code> et recalculez / montoelement à partir de là.
$("body").bind("filterportfolio", function()
{
var
interval = 50,
duration = 1000;
var intervalId = setInterval(function()
{
$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");
duration -= interval;
if(duration <= 0)
{
clearInterval(intervalId);
}
}, interval);
$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");
});
Semble briser dès que vous cliquez sur "Alle", après cela - ne supprimez pas l'indicateur de défilement au premier clic. Je suppose que cela ne fonctionne pas car filtrantfolidio est déclenché avant l'animation de filtrage et recalculatedcrollablea calcule ensuite sur la largeur de courant nécessaire (où Les éléments filtrants n'ont pas encore été supprimés ou ajoutés). Il faudrait être déclenché après l'animation filtrante - mais cela nécessiterait la modification de filtrage.js, autant que je puisse dire maintenant.
Ouais, je viens de remarquer ça. Il ne se développe pas à la largeur totale, car il n'est pas nécessaire avant que l'animation l'a remplie d'éléments. Je vais essayer de retarder ou de répéter l'appel de la fonction après que le FilterPortfolidio a été déclenché.
... ou un hack impliquant en attente d'animationsPeed (+ tolérance) des MSEC avant appeler recalculatedcrollareaa .
@Thekaneda Essayez la version setInterval et voyez ce que vous pensez!
Voici mon point de vue de ce problème.
Vous pouvez essayer votre deuxième option: Capture Change Modification de l'événement P>
$('window').hashChange(function() {
$('portfolio-list').filterable();
});
Vous pouvez utiliser JQuery Custom Event: lorsqu'il modifie le contenu du curseur, il exécute
et dans le plugin, il définit un gestionnaire pour cet événement
$ (document) .trigger ('ContentChange');
$ (document) .Bind ('ContentChange', fonction () {// Ici le code qui modifie la largeur du curseur});
Est-ce que ma question est trop longue ou trop compliquée? Ensuite, je vais le dépouiller ..
Je ne suis pas sûr que le jsfiddle est à jour -
TypeError: objet # n'a pas de méthode 'filtrable' . En effet, le lien de ressource vers Filtrable.js (et jquery.ba-hashchange.min.js) n'est pas valide.
L'option
hiddenonnstart pour le défilement DIV lisse soit-elle pertinente?