défilement horizontal ne fonctionne pas dans PhoneGap

Question

S'il vous plaît vérifier quelle erreur je l'ai fait dans mon code que mon défilement horizontal ne fonctionne pas merci à l'avance

en jquery: -

 var step = 1; 
var current = 0; 
var maximum = $(".categories ul a").size(); 
var visible = 2; 
var speed = 500; 
var liSize = 120; 
var height = 60;  
var ulSize = liSize * maximum; 
var divSize = liSize * visible; 

    $(document).unbind('pageinit').bind('pageinit', function() {  
      callMenuConnection(); 
      $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
      $(".categories ul a").css("list-style","none").css("display","inline"); 
      $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");  
     }); 

    $(document).unbind('click').bind('click', function() { 

      scroll(); 
    }); 
     function callMenuConnection() { 

     $.support.cors = true; 
      $.ajax({ 
       type: "GET", 
       url: "http://192.162.1.205/EServices/retrieve.aspx?command=get_menu&outlet=RBC", 
       contentType: "text/xml", 
       dataType: "xml", 
       data: "", 
       cache:false, 
       processData:false, 
       crossDomain:true, 
       success: processSuccess, 
       error: processError 
      }); 
     } 
      var scripts ="";  
     function processSuccess(data) { 
      $(data).find("category").each(function() {  
      var id = $(this).find('id').text(); 
      var title = $(this).find('title').text(); 



       scripts = scripts+'<span><a data-role="button" data-transition="slide" data-inline="true" >' +title+ '</a></span>'; 

      }); 

      $('#cat_list').append(scripts); 
      $('#cat_list').trigger('create'); 

     } 

     function processError(data) 
      { 
       alert("error"); 
      } 

    function scroll(){   
     $(".cat_list_class").swipeleft(function(event){ 

    if(current + step < 0 || current + step > maximum - visible) {return; } 
    else { 
     current = current + step; 
     $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
    } 
    return false; 
}); 

$(".cat_list_class").swiperight(function(){ 

    if(current - step < 0 || current - step > maximum - visible) {return; } 
    else { 
     current = current - step; 
     $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
    } 
    return false; 
});   
} 

en html5: -

<div data-role="page" data-theme="b" id="jqm-home">    
      <div class="categories" id="cat">     
       <ul id="cat_list" class="cat_list_class"></ul>    
     </div> 
    </div> 

Answer 1

Enfin j'ai obtenu la réponse de ces

En HTML5: -

<div data-role="page" data-theme="b" id="jqm-home">  
     <div data-role="footer" data-position="fixed" data-theme="c">   
      <div class="categories" id="cat">     
       <ul id="cat_list" class="cat_list_class"></ul>    
      </div> 
     </div>  
</div> 

En jquery: -

var step = 1; 
var current = 0; 
    var maximum = 0; 
    var visible = 2; 
    var speed = 500; 
var liSize = 120; 
var height = 60;  
    var ulSize = liSize * maximum; 
    var divSize = liSize * visible; 

$(document).unbind('pageinit').bind('pageinit', function() {  
     callMenuConnection(); 
     $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
     $(".categories ul a").css("list-style","none").css("display","inline"); 
     $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");  
    }); 

$(document).unbind('click').bind('click', function() { 
     scroll(); 
}); 
    function callMenuConnection() { 
     $.support.cors = true; 
     $.ajax({ 
      type: "GET", 
      url: "one.html", 
      contentType: "text/xml", 
      dataType: "xml", 
      data: "", 
      cache:false, 
      processData:false, 
      crossDomain:true, 
      success: processSuccess, 
      error: processError 
     }); 
    } 
     var scripts ="";  
    function processSuccess(data) { 
     $(data).find("category").each(function() {  
     var id = $(this).find('id').text(); 
     var title = $(this).find('title').text(); 
      scripts = scripts+'<a class="ids_cat" data-role="button" data-transition="slide" data-inline="true" >' +title+ '</a>'; 
     }); 
     $('#cat_list').append(scripts); 
     $('#cat_list').trigger('create'); 
     maximum = $(".categories ul a").size(); 
    } 

    function processError(data) 
     { 
      alert("error"); 
     } 

function scroll(){ 
$(".categories").swipeleft(function(event){ 
    if(current + step < 0 || current + step > maximum - visible) {return; } 
else { 
    current = current + step; 
    $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
} 
return false; 
}); 

    $(".categories").swiperight(function(event){ 
     if(current - step < 0 || current - step > maximum - visible) {return; } 
     else { 
     current = current - step; 
     $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
    } 
     return false; 
    });   
    }