Mattbanks has published an easy to use jQuery plugin to include to your website:
https://github.com/mattbanks/jQuery.equalHeights

To integrate it in your website, simply

1. download the jquery.equalheights.min.js file to your app,
2. integrate it after your jQuery reference (see below)
3. trigger the divs that should be of equal height

Integrate the js files (recommended at the end of your page).

<script language="javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/jquery/jquery.equalheights.min.js"></script>

Trigger the equal height plugin

$(document).ready(function() {
  window.setTimeout(function(){
    $('.equalColumns').equalHeights();
  }, 200);
});

Note, the timeout function is used to trigger the equal height asynchronously. You do not have to do this, but it is recommended if you face any trouble with other JS plugins on your website.

A good jQuery plugin to do this is jquery.mobile.fastButtons.js available at
http://www.jqueryscript.net/mobile/jQuery-Plugin-For-Removing-The-300ms-Delay-On-Mobile-Device-fastButtons.html

The plugin is easy to install and uses an approach to replace the click events with vclick events which are faster applied. The plugin is also very lightweight. So just a small overhead in loading and only replaces the default click handler.

To enable the plugin, simply download the file, place it in your application and include the script file after the jQuery and jQuery Mobile libraries. For example:

  <script src="js/lib/jquery-1.10.2.min.js"></script>
  <script src="js/lib/mobile/jquery.mobile-1.4.0.min.js"></script>
  <script src="js/lib/jquery.mobile.fastButtons.js"></script>

Other approaches, such as the fastbutton plugin add a layer div or span on top of your application and try to estimate the element visually present under this layer. This is done by pixel calculations with a small deviation. It works fine for static elements not located close to other elements. But for example, if your header contains an icon close to the screens border to open a sliding panel, the click behaviour can be completely messed up du to this deviation.

To programmatically control he loading dialog, jQuery provides a Javascript API. For example, you can show the dialog by calling

$.mobile.loading('show');

or hide the dialog via

$.mobile.loading('hide');

However, what is missing in the documention, this control is not available at anytime during your program execution. As described in this stack overflow thread, the loader can only controlled directly during the showpage event processing.

To solve this issue and control the loader widget at anytime, you must execute it asynchronously. This can be achieved by putting it into a setTimeout() callback.

function showLoader() {
    window.setTimeout(function(){
        $.mobile.loading('show');
    }, 1);
};

function hideLoader() {
    window.setTimeout(function(){
        $.mobile.loading('hide');
    }, 1);
};

Note: Some people, as in the stack overflow discussion mentioned above, use a solution based Javascript’s setInterval() method. It did not work reliably in my experience, and the intend of setInterval() is to execute something periodically. In our case, we want to control the loader widget only once. So setTimout() better fits to out intention.

Invoking reset() on the collection does not have the required effect because it does not clean the LocalStorage.

An approach often documented in the web is to simply iterate over the collection and calling distroy() on each model object:

collection.each(function(model) { model.destroy(); } )


This is not a fully reliable approach because manipulating a collection while you are iterating over it at the same time can have un-intended effects. Not all model objects might be destroyed at the end.

A better way to do this is to use underscore.js clone facilitites to first get a clone of the list. Iterating over this clone and destroying each model element will result in a savely cleaned up collection including its local storage.

_.chain(Todos.models).clone().each(function(model){
console.log('deleting model ' + model.id);
model.destroy();
});