html5 - Creating a smooth swipe behavior using jQueryMobile which reveals a div -
what im trying reveal content while sliding right/left. im basing behavior on simple event "on swipeleft" doesn't give me intended to.
$("li").on("swipeleft",function(){ alert("you swiped left!"); });
i want while doing swipe, content of li move left , while happening fixed div revealed. hope suggest me right way doing because currentnly, alert i'm showing, appears after finish swipe , not while i'm doing it.
you absolutely position hidden divs @ right , left, , on swipe animate left/right margins reveal divs:
<li><div class="leftfixed">div</div><a href="#">acura</a><div class="rightfixed">div</div></li>
the css:
.leftfixed { position: absolute; top: 0; bottom: 0; left: 0; width: 60px; background-color: red; color: white; text-shadow: none; z-index: 1; display: none; text-align: center; } .rightfixed { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: 60px; background-color: red; color: white; text-shadow: none; z-index: 1; display: none; text-align: center; } ul li a{ z-index: 100; }
the swipe event handlers:
$("li a").on("swiperight",function(){ $(this).parents("li").find(".leftfixed").show(); $(this).parents("li").find(".rightfixed").hide(); $(this).animate({"margin-left": "60px", "margin-right": "0px"}, 200); }); $("li a").on("swipeleft",function(){ $(this).parents("li").find(".leftfixed").hide(); $(this).parents("li").find(".rightfixed").show(); $(this).animate({"margin-right": "60px", "margin-left": "0px"}, 200); });
Comments
Post a Comment