How to use 'TouchStart' events in Jquery Mobile

Question

In Html5:- in footer it will store the data which is cuming dynamically and footer part should move by touch not whole window only footer should move with the data is present in footer left to right

<div data-role="page" id="page1">
         <div data-role="footer" data-position="fixed" id="footer">
              <div class="menu" id="menu_button1" id="scroll_menu" onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'></div>
         </div> 
</div>

In Jquery:- I am using Ajax calling to get the data dynamically in stored that data in footer part of Htm5 in there i want to use touch event how i can use plz help me out

function callMenuConnection() {  
        $.support.cors = true;
           $.ajax({
                type: "POST",
                url: "one.html",
                contentType: "text/xml",
                dataType: "xml",
                data: "",
                cache:false,
                processData:false,
                crossDomain:true,
                success: processSuccess,
                error: processError
            }); 
      }

      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'); 
        });
      }

         function processError(data)
           {
               alert("error");
           }
    $(document).unbind('pageinit').bind('pageinit', function () {
         callMenuConnection(); 
     });

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;
  });         
}

Answer 2

Please use swipe event on the footer selector. Something like :

// Temp Id Card back page swipe event $("#FooterId").on('swipe', function (e) { // keep changing the data here in some div, it would give illusion that footer is changing... });