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.

sidebar

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
      $("#pageslide-slide-wrap").click(function(e){
        if ( $('a, ' + settings.closers).index( $(e.target) ) == -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.

One Response

1

Nicola Pizzamiglio on December 31, 2011 at 4:12 am  #

Hi there!
I like the way you modded the PageSlide… would it be possible to have the modded file? or: in which file am I supposed to insert the piece of coding in the article?
I am trying to build a “startpage” that loads the bookmarks library, displaying folders on the secondary page, opening the list of bookmarks in the main page…
Thanks in advance!

Add a Comment

search