The software we built for comment previews, lists and more
More and more of the designs for user interaction on guardian.co.uk that make their way onto my desk feature a familiar "lightbox"-style effect for page overlays and popup windows. As a client-side web developer it's my job to find ways of making these components reusable and generic so they can be easily dropped into the site as we continue to enhance it.
The first usage of this new technique can be seen on the recently-relaunched Guardian Books section we built. The site features a page for almost every book published, and users can click an "Add to list" button which, well, adds the book to their lists, with topics such as "Favourite Books" and "To-read".
The usual approach is to use a jQuery plugin, but while there are plenty of jQuery plugins for lightbox effects and overlay windows, we decided to produce one in-house. There was one main reason for this: frequently with jQuery plugins we find they either over-deliver or under-deliver.
In the case of our carousel components, for example, we use a mixture of both jCarousel, jCarousel Lite, and our own in-house carousel component. jCarousel adds a fairly large set of page assets and is usually overkill for what we need; jCarousel Lite is smaller but limited in scope, and our own version was built to pacify these two problems.
The use case of the plugin is key – there are a number of scenarios where we want this kind of functionality. These include usages such as taking an element already present in the DOM and presenting it to the user, submitting a form via AJAX and showing the resulting page in the overlay window, and fetching the source of a URL via AJAX and popping it up on the screen for the user.
Enter our jQuery Ajax Overlay plugin. It's just over 300 lines of code and weighs in at 13kb (or 4kb when compressed). There's also some corresponding CSS for styling the overlay itself.
So how can the plugin be used? Here are a couple of annotated examples.
$(document).ready(function(){
$('a.ajax-link').ajaxoverlay();
});
The above example will cause any link element with a class of "ajax-link" to present a popup window whose contents consist of the source of the URL the link points to. Obviously this is subject to the browser's cross-domain policy, so only a URL on the same domain the link exists on will work.
Let's show another example. What if the content you want to display is already present in the DOM, and perhaps hidden?
$(document).ready(function(){
$('a.ajax-link').ajaxoverlay({
'source' : 'div#my-hidden-content'
});
});
The "source" option allows us to specify a jQuery selector (not an object) pointing to some existing content to populate the overlay with. Cool!
Here's a more complex example. In the recent case of Comment Preview, we needed a way to intercept the submission of a form and present the user with the resulting page. We added support for this to the plugin in this manner:
$(document).ready(function(){
$('a.ajax-link').ajaxoverlay({
'form' : {
'selector' : 'form#my-form'
}
});
});
This will tell the plugin that when the form #my-form is submitted, it should intercept that submission and populate the overlay with the resulting response. We can optionally specify a URL to submit the form to, in the case where the form's action attribute is undesirable. We can also specify a different trigger for the form submission to fire on if the form's submit() event isn't appropriate – eg, in the case of the Preview button, we needed the event to fire when the Preview button was clicked.
The plugin has an array of other options, like the "recursiveselector" option which allows us to pass a jQuery selector for successive overlays, so any matching elements within the overlay response will themselves trigger an overlay – this is useful for multi-step overlays such as wizards.
There are also a number of callbacks – dobeforeopen, doafteropen, dobeforeclose and doafterclose. These allow you to hook your own events into the plugin, and we used them for the Preview button to transplant the comment submission form into the overlay window once it had opened.
The code for the plugin itself is fairly robust, but can certainly be improved. There are a couple of Guardian-specific lines that hide some elements on the page when clicked, so for third party usage they'd need to be removed, but other than that it should Just Work™.
Areas for possible improvement are the following:
- Support for resizing the overlay to match the dimensions of the "source" element (if specified)
If you have any improvements, suggestions, bugs or general responses to the plugin, please let us know below.
You can download the Javascript and CSS for this plugin code here on Github.
--
Source: http://www.guardian.co.uk/info/developer-blog/2011/jul/15/jquery-overlay-plugin
~
Manage subscription | Powered by rssforward.com
0 comments:
Post a Comment