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
Post a Comment