Site icon akquinet AG – Blog

Enhance your web application with these two jQuery plugins

In one of our last projects, we built a platform independent desktop client completely based HTML5 for the UI. HTML 5 provides a powerful way to build UI. Coupled with JQuery and H-UBU, we have developed a pretty exciting UI. One of the issues faced during this development was the management of the user interactions:

To deal with those issues, and enhance the user experience, the akquinet Web team has developed these two JQuery plugins which might be handy for your next web based applications as well.

“Do you wanna have some toasts” – jquery-toastmessage-plugin

If you are developing Android applications you might be familiar with the concept of toast. Toast messages are a concept of showing informations or errors to the user in a very seamless and natural way. It is close to Mac OS Growl notifications. They may or may not disrupt the user and they are still informative. It’s a quite nice way to report info or error to the user without breaking the interaction flow.

To bring that concept of a notification system into the world of web technologies we built the jquery-toastmessage-plugin. This JQuery plugin provides a mechanism to toast messages.

The main features are:

The following methods will display a toast message of different types:

$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', "some message here");
$().toastmessage('showWarningToast', "some message here");
$().toastmessage('showErrorToast', "some message here");

To be available, you just need to load jquery, the plugin and the CSS:

<link type="text/css" href="css/jquery.toastmessage-min.css" rel="stylesheet"/> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="jquery.toastmessage-min.js"></script> 

For further information and a little demo just have a look here.

The plugin is open source and licensed under ASL 2.0. The source code is provided on github.

“All good things to those who wait” – jquery-waitingpopup-plugin

Another simple but very handy JQuery plugin is the “jquery-waitingpopup-plugin”. This plugin provides an easy way to show up a modal waiting popup window when your application is doing some heavy work in the background and your UI should not be accessible in the meantime. The current screen will be faded out slightly and a popup window will be opened with some informations about was is going on right now. Furthermore the screen in the background is completely locked for any user interactions.

You are able to show and hide the waiting popup manually, or to register the waiting popup for all jQuery AJAX requests.

The main features are:

// initializing the plugin once
// To open the waitingpopup you have to call:
// To close a waitingpopup you have to call:

To use the plugin, you just need to import jQuery, the plugin and a CSS:

<link type="text/css" href="css/jquery-ui-1.8.7.custom-min.css" rel="stylesheet"/> 
<link type="text/css" href="css/jquery.waitingpopup-min.css" rel="stylesheet"/> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script> 
<script type="text/javascript" src="jquery.waitingpopup-min.js"></script> 

For further information and a little demo just have a look here.

The plugin is open source and licensed under ASL 2.0. The source code is provided on github.


This blog post has presented two jQuery plugins to enhance the user interactions. The Toast Plugin provides a new way to inform the user without breaking the interaction flow. The Waiting Popup proposes an easy and nice way to block the interactions until hard work is done in the background. Those two plugins were created by the akquinet Web team and were open sourced on GitHub.

Exit mobile version