Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

swipe is working but next and previous buttons are not working

swipe is working but next and previous buttons are not working

Problem

I'm working on jquery-mobile app. For me swiping of pages is working but whereas Next and previous buttons are not working. I have tested its own of test page. Thanks in advance. Below is my code.

Header 1

sunday

Home

Header 2

monday

CSS

.control.ui-btn-left {
top: auto;
bottom: 7px;
margin: 0;
}

jquery

    $(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
     {    
    var nextpage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
      if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true,    true);
    }
    event.handled = true;
    }
   return false;         
 });

  $(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
   {      
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true,   true);
    }
    event.handled = true;
    }
    return false;     


    });
Problem courtesy of: neeraj

Solution

Ok, so you have testes this, but have you look where those buttons should go? That data is missing, all your buttons have href="#".

Here's a working example: http://jsfiddle.net/32DKR/

HTML:

    

Header 1

sunday

Home

Header 2

monday

Solution 2

And here more dynamic solution: http://jsfiddle.net/LLc3E/

HTML:



    
        jQM Complex Demo

Header 1

sunday

Home

Header 2

monday

JavaScript:

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true,    true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('click', '#next', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true,    true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true,   true);
        }
        event.handled = true;
    }
    return false;     
});

$(document).on('click', '#prev', function(event){ 
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $.mobile.activePage.prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true,   true);
        }
        event.handled = true;
    }
    return false;     
});
Solution courtesy of: Gajotres

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

swipe is working but next and previous buttons are not working

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×