Mettre en œuvre une "Coda-like" slider JQuery avec des formes sur chaque "panneau"

Question

Tous,

Je mettre en place un "Coda" comme curseur jQuery (j'utilise une excellente mise en œuvre de Niall Doherty: http://www.ndoherty.biz/2009/10/coda-slider-2/).

Généralement, cela fonctionne très bien.

Cependant, le problème que j'ai est que ... chaque "panneau" contient plusieurs entrées de texte. Si l'utilisateur atteint la dernière entrée dans un panneau puis clique sur [TAB] (ou le bouton "Suivant" sur l'iPad), Safari déplace automatiquement l'emballage coulissant pour afficher la prochaine entrée de texte.

Bien sûr, il ne fait que glisser l'emballage juste assez pour afficher la prochaine entrée de texte - pas assez pour que tout le panneau suivant soit visible. En d'autres termes, disons que chaque panneau a une largeur de 600px, et j'ai trois panneaux. Donc, si l'utilisateur atteint la dernière entrée sur le premier panneau, puis clique sur TAB, je voudrais que le wrapper se déplace de 600 pixels pour que le panneau suivant soit entièrement visible. Cependant, le navigateur le glisse juste assez pour que la prochaine entrée de texte soit visible.

Quelqu'un a-t-il rencontré ce problème et trouvé une solution robuste?

Un grand merci d'avance pour tout conseil et perspicacité!

Answer 1

Ha! Je l'ai compris!

Le problème est que lorsque l'entrée est hors de la zone visible, le navigateur fait défiler pour qu'il soit visible. Puisque votre # coda-slider, ou quel que soit l'id que vous appelez, n'a pas de barre de défilement, vous ne pouvez pas voir ce qui se passe et vous ne pouvez pas le déplacer manuellement. Notez que le coda-slider ne modifie pas la position de défilement, donc même si le coda-slider se déplace, il est encore décalé par le décalage du scroll.

Cependant, vous pouvez simplement définir la position de défilement sur 0 chaque fois qu'une entrée obtient le focus chaque fois que le curseur # coda change de position de défilement. Ensuite, vous pouvez déterminer quel onglet est entré et déclencher la coda pour faire de la magie. Vous pourriez aussi bien faire défilerTop (0), au cas où votre contenu serait de hauteurs différentes.

$('#coda-slider-1').scroll(function() { 
    $('#coda-slider-1').scrollLeft(0); 
    $('#coda-slider-1').scrollTop(0); 
}); 

$('input').focus(function() { 
    var tabindex = $(this).parents('.panel').prevAll('.panel').size() + 1; 

    $('.tab' +tabindex +' > a').trigger('click'); 
}); 

Exemple ici:

http://jsfiddle.net/u99AJ/

Mise à jour:

Quelque chose encore plus étrange qui se passe avec Safari. Cela ne fonctionne pas.

Update2:

L'ordre de mise au point et défilement semble avoir un effet étrange dans Safari.Exemple mis à jour pour le support multi-navigateur:

http://jsfiddle.net/u99AJ/4/

Update3:

Ajout de code (dans l'exemple jsFiddle ci-dessous) pour contourner bug coda curseur où animate est encore appelé même en cliquant sur le même languette. Cela peut provoquer un retard dans certains cas, notamment lors de la tabulation rapide des entrées.

http://jsfiddle.net/u99AJ/7/