html5 - How to use 'TouchStart' events in Jquery Mobile -


in html5:- in footer store data cuming dynamically , footer part should move touch not whole window footer should move data present in footer left 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:- using ajax calling data dynamically in stored data in footer part of htm5 in there want use touch event how can use plz 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();       }); 

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

Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

html - Unable to style the color of bullets in a list -

c# - must be a non-abstract type with a public parameterless constructor in redis -