Question

Im making a 3 page mobile optimised website. I need horizontal slide navigation as can be provided by jQuery mobile. If your on page 1 and you navigate to page 2, page 2 slides in from the right.

However from page 1 you can also navigate to page 3. If you do so I dont want page 3 to slide in in the same way page 2 would. Instead I need page 2 to slide and keep moving so then page 3 slides in instead.

Here is my javascript demo. Clicking ‘map’ from page 1 goes to page 2. Clicking ‘1’ on page 1 goes past page 2 and takes you to page 3.

http://smartpeopletalkfast.co.uk/pos/

Ive made a more complicated demo that does this but im having lots of cross device and other unexpected issues so id love to use a framework like jQuery mobile if it can do this. Thanks

Answer 1

You can hi-jack the link clicks and send the user to the correct pseudo-page with the animation you want:

$(function () {

    //create an associative array of objects to pas to the `changePage()` function for a specific transition
    var convert = {

            //from page1
            page1 : {

                //to page2
                page2 : { transition : 'slide'},

                //to page3
                page3 : { transition : 'slide'}
            },

            //from page2
            page2 : {

                //to page1
                page1 : { transition : 'slide', direction : 'reverse' },

                //to page3
                page3 : { transition : 'slide'}
            },

            //from page3
            page3 : {

                //to page1
                page1 : { transition : 'slide', direction : 'reverse' },

                //to page2
                page2 : { transition : 'slide', direction : 'reverse' }
            }
        };
    $('.my-links').bind('click', function () {

        //change to the specified page
        $.mobile.changePage($(this).attr('href'), convert[$.mobile.activePage[0].id][$(this).attr('href').replace('#', '')]);
        return false;
    });
});

This binds to any element with the .my-links class. Also page/page2/page3 are the IDs of the three pages.