Implementing a “Coda-like” jQuery slider with forms on each “panel”

Question

All,

I'm implementing a "Coda" like jQuery slider (I'm using Niall Doherty's excellent implementation: http://www.ndoherty.biz/2009/10/coda-slider-2/).

Generally, it works great.

However, the issue I have is this... each "panel" contains several text inputs. If the user reaches the last input in a panel then clicks [TAB] (or the "Next" button on the iPad), Safari automatically moves the sliding wrapper to bring the next text input into view.

Of course, it only slides the wrapper just enough to bring the next text input into view - not enough to bring the entire next panel into view.

In other words - let's say that each panel is 600px wide, and I have three panels.

So, if the user reaches the last input on the first panel, then clicks TAB, I'd like the wrapper to move by 600 pixels to bring the next panel fully into view. However, the browser just slides it enough so that the next text input is visible.

Has anyone run into this problem, and come up with a robust solution?

Many thanks in advance for any advice and insight!

Answer 1

Ha! I figured it out!

The problem is that when the input is out of the visible area, the browser scrolls the div so it is visible. Since your #coda-slider, or whatever id you call it, doesn't have a scroll bar, you can't see what's going on and you can't manually move it back.

Note, that coda-slider does not alter the scroll position, so even if the coda-slider moves, it is still offset by the scroll offset.

However, you can simply set the scroll position to 0 every time an input gets focus whenever the #coda-slider changes scroll position. Then you can figure out which tab that input is in and trigger coda to do it's magic. You might as well scrollTop(0) as well, in case your content is different heights.

$('#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');
});

Example here:

http://jsfiddle.net/u99AJ/

Update:

Something even stranger is going on with Safari. This does not work.

Update2:

The order of focus and scroll seems to have a strange effect in Safari. Example updated for cross-browser support:

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

Update3:

Added code (in jsfiddle example below) to workaround coda-slider bug where animate is still called even when clicking on the same tab. This may cause the tab switch to seem to delay in some cases, especially when tabbing quickly through the inputs.

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