Posted on Leave a comment

jQuery Lights out Plugin

jQuery Logo

In current times, saving energy in all its variants is becoming more and more important each day. When it comes to websites one simple way to save energy is to dim the display when idle.

Both Interact has released a simple yet versatile cross-browser jQuery lights out plugin. In order to keep things simple you only need to make sure to include jQuery 1.3 and higher and the plugin itself. It will then do the magic of automatically adding the required DOM elements for the overlays and register some event handlers to track user interactions and idle times.

Feel free to download the jQuery lights out plugin from Github and adjust it to your needs.

Posted on Leave a comment

Adding advanced formatting to Harshen’s jQuery countdown timer plugin

jQuery Logo

Harshen’s jQuery countdown timer plugin works great and is simple to use. In a recent project we needed to use special formatting for the countdown timer to be implemented. Although, Harshen’s solution offer to timeSeparator option to specify the separator string to be used this was not flexible enough. The customer wanted the countdown timer to display the remainder time in the format:

ddd / ddh / ddm / dds

Although, using the timeSeparator option it is possible to get the separating “/” to work, we needed the days(d), hours(h), minutes(m) and seconds(s) formatted using HTML.

The plugin extension

Having a quick look at the plugin to only thing to do was to overwrite the $this.html() functionality by a custom function that takes care of processing additional formatting rules. In order to keep the formatting as flexible as possible I opted to add regulare expression support through additional options:

  1. regexpMatchFormat
  2. regexpReplaceWith

regexpMatchFormat specifies the format to match the original output string produced by the plugin. regexpReplaceWith then takes care of replacing the original string with the desired regular expression format. Furthermore, an additional function called html was introduced:

/**
 * Replaces content by optional regular expression specified via options 
 * regexpMatchFormat and regexpReplaceWith.
 * @param Object $this
 * @param String content
 */  
function html($this, content) {
  var processedContent = content;

  if (typeof window['regexpMatchFormat_' + $this.attr('id')] !== 'undefined' &&
      typeof window['regexpReplaceWith_' + $this.attr('id')] !== 'undefined') {
    var regexp = new RegExp(window['regexpMatchFormat_' + $this.attr('id')]);
    processedContent = content.replace(regexp,
      window['regexpReplaceWith_' + $this.attr('id')]);
  }

  $this.html(processedContent);
}

Handling of the addtional two options was added in the countdown function:

var regexpMatchFormat = "";
var regexpReplaceWith = "";
if (options.regexpMatchFormat != undefined && options.regexpReplaceWith != undefined) {
  window['regexpMatchFormat_' + $this.attr('id')] = options.regexpMatchFormat;
  window['regexpReplaceWith_' + $this.attr('id')] = options.regexpReplaceWith;
}

Below you find the regular expression used for this project’s requirements:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function ($) {
    $('#future_date').countdowntimer({
      dateAndTime: "2015/01/01 00:00:00",
      size: "lg",
      regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
      regexpReplaceWith: "$1<sup>d</sup> / $2<sup>h</sup> / $3<sup>m</sup> / $4<sup>s</sup>"
     });
    });
// ]]></script>

Thanks again to Harshen for the very nice plugin 🙂

Posted on Leave a comment

jQuery Multi File Upload

jQuery Logo

A couple of days ago I accidently discovered https://blueimp.net/‘s jQuery File Upload.

Update
Finally I found some time to post back on jQuery File Upload. As of this writing I have successfully integrated blueimp’s jQuery multi file uploader plugin into a Zend-based web application. The plugin has proven to be quite valuable as it provides a bunch of out of the box functionality, such as handling chunked uploads using a simple PHP script. Of course this script only serves as a starting point for more serious projects, but still it is quite helpful.

The API and the corresponding documentation for the plugin is available via the project’s homepage (https://github.com/blueimp/jQuery-File-Upload/wiki). They are both very well written and easy to understand. Furthermore, in case you are interested in the code, the inline documentation is also pretty exhaustive. Details on the file upload can be managed on both sides of the application, i.e. using the JavaScript code during instantiation of the plugin and on the server side when processing upload requests.

Styling of the plugin can be extended pretty easy too. The author has provided template stylesheets that can be overwritten and extended. One of the core aspects of this plugin is the templating plugin used to display uploaded files. The JSON used to update these templates can be altered on the server side, thus making it possible to add further functionality to the UI, such as adding checkboxes to select certain files. The event hooks provided by the UI part of the plugin allow to modify the uploader’s behavior even more.

All in all, I am glad I stumbled across the well written and documented jQuery plugin, available from the project’s homepage: http://aquantum-demo.appspot.com/file-upload.