Playing With Some More jQuery Plugins

I decided to play with some more jQuery plugins. I’m building up some experience, learning a lot, and having a ton of fun doing it. So, what did I decide to do this time? I added a sidebar to ~/bin. When you click on the logo in the top right an instructions panel will slide out on the right hand side of the screen. There is also a little magic going on with the logo.


This sidebar has some neat animation so it was fun to put into the page. It is a modified version of the jQuery pageSlide plugin. To my pleasant surprise the plugin already had the capability to run callback functions before and after the transition is run. I added a property allowing for static html so I wouldn’t need to depend on an Ajax call. Also, the default behavior of the plugin is that clicking anywhere on the document, except in the sidebar, will cause the page to slide back to normal. This is okay except that I wanted a button for usability purposes to close the sidebar and also links in the sidebar (normal anchor tags) to work. That took a little creativity but I eventually got it:

      // Make it so if the user clicks in the pageslide, it won't close
      // Exception for given closers that may be in the pageslide
        if ( $('a, ' + settings.closers).index( $( ) == -1 ) {
          return false;


Protecting the Innocent

I also wanted to play around with some jQuery lightboxes. The one that always comes to mind is facebox. For once I didn’t have to make any major changes to the source of this plugin, instead I made a few small tweaks to the CSS.

My goal here was to provide IE6 users with a simple little “Please Upgrade Your Browser” message. I went to work, learned a lot, and came up with the following: (to view this yourself go to ~/bin and paste “javascript:if_i_were_ie6()” in your URL bar, without the quotes!):

facebox browser upgrade warning

Sure that looked great, and it had a nice message, but it ended up looking disgraceful in IE6 itself! Rather then scrap the work I left it there, to prove the point to whatever few IE6 visitors I get. The facebox works perfectly in IE8 (I haven’t tried IE7) and so I can make use of what I’ve learned elsewhere I just hope that IE6 will go away soon. I said my goodbye already.

Adding Looping to a Content Slider

A few days ago I came across the wonderfully magnificent easySlider jQuery plugin. It makes sliding content vertically or horizontal drop dead simple using totally natural markup and CSS. I immediately worked it into the design of ~/bin (this animation was in my original design on paper) and it worked flawlessly. However, like the plugin’s title implies, it was and is meant to be simple and therefore lacks some features in order to gain ease of use.

I took some time to become more fluent in jQuery, and add some enhancements by modifying the plugin. One of those enhancements was looping, and is the topic of this article. I had no prior experience working with these types of galleries and implementing looping seemed like a fun idea. So here was the result of my tinkering:

How Do You Implement Looping?

Give yourself a minute to get creative. Develop some ideas and strategies on how you would take the following markup for the slides, and make it loop.

<div id="slider">
    <li>content here...</li>
    <li>content here...</li>
    <li>content here...</li>

I came up with two strategies that use a similar technique to implement the loops. The above loop is an implementation of one of these strategies, but I wanted to compare and contrast my two versions here, and hopefully get some reader feedback on different techniques!

Hidden Moves Strategy

This strategy actually involves physically moving unseen slides around in the DOM. By moving the slides in such a way that there is always the proper “next slide” and looping can continue forever in either direction without errors.

Hidden Moves Strategy

Instantaneous Jumps between Clones Strategy

This strategy actually involves cloning the first slide and adding it to the end of the list. This now makes the first and last slides exactly the same. When we need to handling transitions to and from these slides we can instantly jump between them, and the user is none the wiser.

Instantaneous Jumps Between Clones

Comparing the Pros and Cons of Each

Hidden Moves:

  • Requires no extra space (in theory).

  • Simple to implement moves. 1 line executed as a callback on “next” and before the transition if “prev”

  • Expensive. Requires moving slides on every transition. This is actual DOM manipulation. Sure in nearly all cases this is negligible but it could be a pain for large, complex slides.

  • Wouldn’t work on looping a single slide. Kinda useless though right?

  • Does it work? By taking a slide off of the front won’t everything shift? Yes, this could get tricky, I honestly haven’t tried it.

Instant Jumps:

  • Requires extra space to duplicate the first slide.

  • Simple to clone a slide. 1 line of jQuery.

  • 1 time cost to clone, never again is there a DOM Manipulation cost.

  • Has the ability to loop on a single slide.

  • Tricky code to handle when to jump. Nothing difficult, just messy.

  • Does it work? Yes, Its what I’m using above..

Thats it for my analysis. Do you have any suggestions?