jQuery Mobile swiperight Event

jQuery Mobile swipeleft Event

Last Updated : 25 Dec, 2020

jQuery Mobile swipeleft event is fired when we swipe left in the element area. We can use this event for different purposes.

Syntax:

jQuery( ".selector" ).on( "swipeleft", function( event ) {  } )

Approach: First, add jQuery mobile scripts needed for your project.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src=
        "http://code.jquery.com/jquery-1.11.1.min.js">
    </script>

    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>

    <script type="text/javascript">
        $(document).on('swipeleft', 'a', function() {
            console.log('swipeleft event fired');
        })
    </script>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>swipeleft Event using jQuery Mobile</h4>
    </center>

    <a data-role="button" id="gfg">click</a>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src=
        "http://code.jquery.com/jquery-1.11.1.min.js">
    </script>

    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>

    <script type="text/javascript">
        $(document).on('swipeleft', 'a', function(event) {
            console.log(event)
        })
    </script>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>swipeleft Event using jQuery Mobile</h4>
    </center>

    <a data-role="button" id="gfg">click</a>
</body>

</html>

Output:

jQuery Mobile swiperight Event

taran910

Improve

Article Tags :

Similar Reads

jQuery Mobile swipe Event

jQuery Mobile swipe event is fired when we swipe in the element area. We can use this event for different purposes. Syntax: jQuery( ".selector" ).on( "swipe", function( event ) { } )Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http://code.jquery

jQuery Mobile swiperight Event

jQuery Mobile swipe event is fired when we swipe right in the element area. We can use this event for different purposes. Syntax: jQuery( ".selector" ).on( "swiperight", function( event ) { } ) Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http:/

jQuery Mobile pageinit Event

jQuery Mobile pageinit event is triggered when the page is initialized. We can use this event for different purpose. Syntax: jQuery( ".selector" ).on( "pageinit", function( event ) { } ) Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http://code.j

jQuery Mobile Slider stop Event

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Slider stop event that triggered at the end of an interaction with the slider. Callback Parameter: The callback

jQuery Mobile vmouseout Event

jQuery Mobile vmouseout event is fired when we hover and take the mouse out of the element area. We can use this event for different purpose. Syntax: jQuery( ".selector" ).on( "vmouseout", function( event ) { } ) Approach: First, add jQuery Mobile scripts needed for your project. <link rel="style

jQuery Mobile Slider start Event

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Slider start event to trigger the initial interaction with the slider. Callback Parameter: The callback function

jQuery Mobile taphold Event

jQuery Mobile taphold event is fired when we click and hold in the element area. We can use this event for different purposes. Syntax: jQuery( ".selector" ).on( "taphold", function( event ) { } )Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http:

jQuery Mobile vmousemove Event

jQuery Mobile vmousemove event is fired when we move the mouse in the element area. We can use this event for different purposes. Syntax: jQuery(".selector" ).on( "vmousemove", function( event ) { }) Approach: First, add jQuery mobile scripts needed for your project. <link rel="stylesheet" href="

jQuery Mobile vmouseover Event

jQuery Mobile vmouseover event is fired when we hover the mouse over an element. We can use this event for our different purposes. Syntax: jQuery( ".selector" ).on( "vmouseover", function( event ) { } ) Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hre

jQuery Mobile scrollstop Event

jQuery Mobile scrollstop event is fired when a scroll finishes. We can use this event for different purposes. Syntax: jQuery( ".selector" ).on( "scrollstop", function( event ) { } ) Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http://code.jquery