how to use scroll function in dynamically data is coming in footer - html

Question

i have to use scroll function in footer in which data is been stored in button dynamically and that scroll should hide then we scroll it show again and all data and scroll should be dynamically load in footer only window screen should not change only footer will change at time of scroll
in jquery:-
function callXMLConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "url.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: processSuccess,
});
}
function processSuccess(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_button1")
.append(scripts)
.trigger('create');
});
}
$(document).unbind('ready').bind('ready', function () {
$("#menu_button1").scroll(function () {
// if ($("#menu_button1").scrollLeft(300) == $(document).width() - $("#menu_button1").width())
if ($("#menu_button1").scrollHeight - $("#menu_button1").scrollTop() == $("#menu_button1").outerHeight())
{
callXMLConnection();
}
});
});
in html5:-
<div data-role="footer" data-position="fixed" id="scroll_menu" style="overflow: scroll;">
<div class="menu" id="menu_button1" ></div>
</div>

Answer 1

Finally i got the answer of these
In 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>
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;
});
}