CODEWITHSUNDEEP
phpjqueryjquery-mobiletouch
hannebaumsaway
hannebaumsaway

Reputation: 2734

Slide divs on webpage like mobile home screens

I'm building a mobile microsite that is to function like an app (with touch interaction).

I have a dropdown menu that has nearly full-screen divs which I want the user to be able to swipe between, like so:

enter image description here enter image description here enter image description here

I've included the jQuery Mobile library to get swipe events, which are working, but the divs are not sliding smoothly, and occasionally disappearing altogether, forcing me to refresh the page.

In the above picture example, on a swipe, div #1 would slide (hide) to the left fully, and then div #2 would slide (show) in the same direction, only after div #1 fully hid. I need the two events to happen simultaneously, so there isn't a gap between divs #1 and #2.

As for the disappearing problem, I have no idea what's causing that, sorry. Here is some relevant code...

javascript:

$('#menu').on('swipeleft', 'div', function(event) {
    $('#' + nextPage($(this).attr('id'),'l')).show('slide', { direction: 'right' }, 500);
    $(this).hide('slide', { direction: 'left' }, 500);
});
$('#menu').on('swiperight', 'div', function(event) {
    $(this).hide('slide', { direction: 'right' }, 500);
    $('#' + nextPage($(this).attr('id'),'r')).show('slide', { direction: 'left' }, 500);
});

If there's a better way to do this, I'm all ears.

Thanks!

Upvotes: 1

Views: 1701

Answers (1)

Michael Lewis
Michael Lewis

Reputation: 4302

Try:

SwipeJS

or

Check out this answer which describes how to use jquery mobile transitions outside of the normal usage.

Upvotes: 1

Related Questions