scroll is not working in phonegap - html

Question

Suppose in footer part i want 50 data which is coming through ajax call and all data should be in straight line when we touch the data it will also move and through mouse also it will also move like it should scroll plz help me out i m getting data but it is not scrolling and data is not coming in straight line
thanks in advance
In HTML5:-
<div data-role="footer" data-position="fixed" id="footer_ids" onmousedown="startReverseSlider(event)" ontouchstart="startReverseSlider(event)">
<div class="menu_cat_ids" id="menu_button_ids" ></div>
</div>
<style>
#footer_ids{
position: fixed;
width:100%;
overflow-x:auto;
bottom: 1px;
z-index: 10;
text-align: center;
height: 5%;
}
</style>
in jquery:-
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: function (data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
var scripts = "<a href='#' data-role='button' data-theme='b' data-inline='true'>"+title+"</a>"
$("#menu_button_ids").append(scripts).trigger('create');
});
}
});
}
function startReverseSlider(event){
theElement=event.currentTarget;
startX = endX = getCurrentPositionX(event);
startY = endY = getCurrentPositionY(event);
mx = getCurrentPositionX(event) - $('#menu_button_ids').offset().left;
document.addEventListener("mousemove",moveReverseSlider,true);
document.addEventListener("mouseup",dropReverseSlider,true);
document.addEventListener("touchmove",moveReverseSlider,true);
document.addEventListener("touchend",dropReverseSlider,true);
//event.stopPropagation();
event.preventDefault();
}
function dropReverseSlider(event)
{
document.removeEventListener("mouseup",dropReverseSlider,true);
document.removeEventListener("mousemove",moveReverseSlider,true);
document.removeEventListener("touchend",dropReverseSlider,true);
document.removeEventListener("touchmove",moveReverseSlider,true);
//event.stopPropagation();
}
function moveReverseSlider(event)
{
endX = getCurrentPositionX(event);
endY = getCurrentPositionY(event);
var clientX = getCurrentPositionX(event) - mx;
if(clientX+sliderLeft < -w+vx-sliderLeft){
} else if (clientX > sliderLeft) {
} else {
$('#menu_button_ids').css('left',(clientX-sliderLeft)+'px');
var X =$('#menu_button_ids').offset().left - sliderLeft;
var P=-X*(rs)/(w);
if (P > rs-ts) {
P = rs - ts;
}
}
}

Answer 1

In HTML 5:
<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>
Now In 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;
});
}