Question

I have a script that has a div with a width larger than its’ parent, with the parent being set to overflow: hidden;. I have javascript that is setting the left positioning of the big div to create “pages”. You can click a link to move between pages.

All of that works great, but the problem is if you tab from one “page” element to another, it completely messes up all the left positioning to move between the pages.

You can recreate this bug in the fiddle I set up by setting your focus to one of the input boxes on page ONE and tabbing until it takes you to page two.

I’ve set up a demo here.

The code that is important is as follows:

HTML:

<div class="form">
    <div class="pagesContainer">
        <div class="page" class="active">
            <h2>Page One</h2>
            [... Page 1 Content here...]
        </div>

        <div class="page">
            <h2>Page Two</h2>
            [... Page  Content here...]
        </div>
</div>

CSS:

.form {
    width: 400px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    float: left;
}

    .pagesContainer {
        position: relative; /*Width set to 10,000 px in js
    }

    .form .page {
        width: 400px;
        float: left;
    }

JS:

slidePage: function(page, direction, currentPage) {
    if (direction == 'next') {
        var animationDirection = '-=';
        if (page.index() >= this.numPages) {
            return false;
        }
    }
    else if (direction == 'previous') {
        var animationDirection = '+=';
        if (page.index() < 0) {
            return false;
        }
    }

    //Get page height
    var height = page.height();
    this.heightElement.animate({
        height: height
    }, 600);

    //Clear active page
    this.page.removeClass('active');
    this.page.eq(page.index()).addClass('active');

    //Locate the exact page to skip to
    var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());

    this.container.animate({
        left: animationDirection + slideWidth
    }, 600);

    this.currentPage = page;
}

The primary problem is that whatever happens when you tab from say, an input box on page one to something on page 2, it takes you there, but css still considers you to be at left: 0px;. I’ve been looking all over for a solution but so far all google has revealed to me is how to stop scrollbar scrolling.

Any help or suggestions would be appreciated, thanks!

P.S. The html was set up like this so that if javascript is disabled it will still show up all on one page and still function properly.

Answer 1

I updated your fiddle with a fix for the first tab with the form: http://jsfiddle.net/E7u9X/1/
. Basically, what you can do is to focus on the first “tabbable” element in a tab after the last one gets blurred, like so:

$('.form input').last().blur(function(){
    $('.form input').first().focus();
});

(This is just an example, the first active element could be any other element)