Prevent ALL default animations/actions

OK, so I have a basic jQuery Mobile page.

What I need is : When user clicks on an element (e.g. the slider or a button)

  • No animation should show
  • No "action" should be enabled (like the slider moving etc)
  • No colour changes should occur, like the button changing on hover

<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
    <head>
        <title>Website Title</title>

        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

        <link rel="stylesheet" href="jquery.mobile.min.css" />
        <link rel="stylesheet" href="custom.css" />
        <link rel="stylesheet" href="dev.css" />


    </head>

    <body id="jqm-website-3539" class=""  >


        <!-- New Page #1 -->
        <div data-role="page" comp-id="jqm-page-2862" id="jqm-page-2862" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >

            <!-- New Header #1 -->
            <div data-role="header" comp-id="jqm-header-6813" id="jqm-header-6813" class="" data-position="fixed" data-fullscreen="false" data-theme="" >
                <h1></h1>
            </div>
            <!-- / New Header #1 -->

            <!-- New Content #1 -->
            <div data-role="content" comp-id="jqm-content-7853" id="jqm-content-7853" class="" data-theme=""  >

                <!-- New Button #1 -->
                <div comp-id="jqm-button-6345" >
                    <a data-role="button" id="jqm-button-6345" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme=""  href="#" data-transition="">
                        Button
                    </a>
                </div>
                <!-- / New Button #1 -->

                <!-- New Navigation Bar #1 -->
                <div data-role="navbar" data-position="fixed" id="jqm-navbar-5393" class="" data-iconpos="left"  >
                    <ul comp-id="jqm-navbar-5393" >

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a comp-id="jqm-navbar-item-5974" href="#" id="jqm-navbar-item-5974" class="" data-icon="home" data-theme="" >
                            One
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a comp-id="jqm-navbar-item-5409" href="#" id="jqm-navbar-item-5409" class="" data-icon="plus" data-theme="" >
                            Two
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a  comp-id="jqm-navbar-item-925" href="#" id="jqm-navbar-item-925" class="" data-icon="gear" data-theme="" >
                            Three
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->
                    </ul>
                </div>
                <!-- / New Navigation Bar #1 -->

                <!-- New SearchField #1 -->
                <div data-role="fieldcontain" data-controltype="searchinput" comp-id="jqm-input-search-9514" id="jqm-input-search-9514" class="" data-mini="false" data-theme=""  >
                    <input name="" placeholder="" value="" type="search">
                </div>
                <!-- / New SearchField #1 -->

                <!-- New Switch #1 -->
                <div data-role="fieldcontain" data-controltype="toggleswitch" comp-id="jqm-input-switch-2499" id="jqm-input-switch-2499" class="" data-highlight="false" data-mini="true" data-theme="" data-track-theme=""  >
                    <select data-role="slider">
                        <option value="0">
                            On
                        </option>
                        <option value="Off">
                            Off
                        </option>
                    </select>
                </div>
                <!-- / New Switch #1 -->

                <!-- New TextArea #1 -->
                <div data-role="fieldcontain" data-controltype="textarea" comp-id="jqm-text-area-8880" id="jqm-text-area-8880" class="" data-mini="false" data-theme=""  >
                    <label>

                    </label>
                    <textarea name="" placeholder="" id="jqm-text-area-8880" class="" data-mini="false" data-theme=""  ></textarea>
                </div>
                <!-- / New TextArea #1 -->

            </div>
            <!-- / New Content #1 -->
        </div>
        <!-- / New Page #1 -->

        <!-- New Page #1 -->
        <div data-role="page" comp-id="jqm-page-7022" id="jqm-page-7022" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >

        </div>
        <!-- / New Page #1 -->


        <script src="jquery.min.js"></script>
        <script src="jquery.mobile.min.js"></script>
        <script src="custom.js"></script>
        <script src="dev.js"></script>

    </body>
</html>
<!-- / New Website #1 -->

Is this doable? And if so, how?

Answers


If you want nothing at all to happen, then just call event.preventDefault on click.

$("#button").click( function (event) {
    event.preventDefault();
});

If you still want to perform some function, like linking to a URL, include it in your callback.

$("#button").click( function (event) {
    window.location = $(this).attr("href");
    event.preventDefault();
});

If you're goal is to "disable" the whole page, you could overlay an (semi-)transparent div:

function disablePage() {
    $('body').append($('<div />').css({
        width: '100%',
        height: '100%', 
        background: '#fff',
        position: 'fixed',
        zIndex: 999,
        top: 0,
        left: 0,
        opacity: .2 // or 0 for completely transparent
    }));
}

You can use jQuery(':animated') function

$('.btn1').click(function(){
    $('.one').animate({'width':'100%'},5000);
});
$('.btn2').click(function(){
    $('.two').animate({'width':'100%'},5000);
});
$('.btn3').click(function(){
    $('.three').animate({'width':'100%'},5000);
});

$('.all').click(function(){
    $(':animated').stop();
});

demo


Need Your Help

Python Client/Server send big size files

python file sockets send folders

I am not sure if this topic have been answered or not, if was I am sorry:

How do async methods use stack?

c# asp.net .net async-await

I just started to use .NET async programming and everyone tells that it's better for server-side code because if I use async keywork ASP.NET won't create threads for every request and will reuse th...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.