Forum Moderators: open
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
$(function() {
$('#my_div').on('swipeleft', function() {
alert('left');
});
});
</script>$(function() {
$('#my_div').off('swipeleft').on('swipeleft', function(event) {
event.stopImmediatePropagation();
alert('left');
});
});
$(function() {
$('#my_div').on("swipeleft", swipeleftHandler);
function swipeleftHandler(event) {
alert('left');
}
});
Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration in the left direction. See the swipe event entry for more detailed information on the swipe event.
<script>
$(function() {
$('#carousel').on('swipeleft', function(event) {
console.log(event.type);
alert('left');
});
$('#carousel').on('swiperight', function(event) {
event.stopPropagation();
alert('right');
});
});
</script>
<div id="carousel">
<div class="blah blah">
<div class="blah blah blah">
<ul>
<li onMouseOver="this.style.cursor= 'pointer';" onClick="#">
<img src="https://www.example.com/photos/sample_0.jpg?h=$this_date" style="width: 294px; height: auto">
</li>
<li onMouseOver="this.style.cursor= 'pointer';" onClick="#">
<img src="https://www.example.com/photos/sample_1.jpg?h=$this_date" style="width: 294px; height: auto">
</li>
</ul>
</div>
</div>
</div>
// in the header
$('#body_con').on('swipeleft', function() {
$(this).css('left', '0');
$('#mobile_nav').hide();
});
// this comes right after <body>, so "body_con" encloses the entire page
<div id="mobile_nav"></div>
<div id="body_con">
// later in the page
<script>
$(function() {
$('#carousel').on('swipeleft', function(event) {
alert('left');
});
$('#carousel').on('swiperight', function(event) {
event.stopPropagation();
alert('right');
});
});
</script>
<div id="carousel">
<div class="blah blah">
<div class="blah blah blah">
<ul>
<li onMouseOver="this.style.cursor= 'pointer';" onClick="#">
<img src="https://www.example.com/photos/sample_0.jpg?h=$this_date" style="width: 294px; height: auto">
</li>
<li onMouseOver="this.style.cursor= 'pointer';" onClick="#">
<img src="https://www.example.com/photos/sample_1.jpg?h=$this_date" style="width: 294px; height: auto">
</li>
</ul>
</div>
</div>
</div>
// closing the "body_con" div
</div>
