Mike Ormond's Blog

Musings on mobile development and Windows Phone 7 in particular.

Just Switched My Blog Scripts to jQuery

Just Switched My Blog Scripts to jQuery

  • Comments 1

As I've mentioned before [a] I like jQuery and [b] we'll be shipping jQuery with Visual Studio in the future. I felt I really ought to visit my blog scripts and migrate them to jQuery. My blog scripts aren't very complicated. They perform 4 actions:

  • Add a "Follow Me on Twitter" link to the menu bar
  • Hide the standard tag cloud and rename the news section "Tags" (where I display my own tag cloud)
  • Add a "Recent Tweets" section to the left nav
  • Enable "lightbox" effects on so I can simply display thumbnails and get nice animations when you click to see the full image

Up 'til now I've used prototype.js to do this because the Lightbox JS script from Lokesh Dhakar has a dependency on prototype.js. To keep the number of scripts to a minimum I just did all my other housekeeping using prototype.js. To switch to jQuery I needed a new "lightbox" script and I plumped for the jQuery lightBox plugin from Leandro Vieira Pinho. Switching from prototype to jQuery was a doddle:

  • document.observe("dom:loaded", MakeLayoutChanges) becomes $(document).ready(MakeLayoutChanges)
  • $('TagSideBar').setStyle({ display: 'none' }) becomes $('#TagSideBar').css('display', 'none')
  • $('NewsSidebar').select('h3').first().update('Tags') becomes $('#NewsSidebar h3:first').text('Tags')
  • var nb = $('navbar').select('ul').first() becomes var nb = $('#navbar ul:first')
  • $('RecentPostsSideBar').insert({ after: '<div id=\'TwittersSideBar\'></div>' }) becomes $('#RecentPostsSideBar').after('<div id=\'TwittersSideBar\'></div>')
  • $('TwittersSideBar').insert('<h3>Recent Tweets</h3>') becomes $('#TwittersSideBar').append('<h3>Recent Tweets</h3>')
  • etc etc

Generally speaker, jQuery allows you to express things a little more succinctly but the two dialects are remarkably similar. I'm not hosting the lightbox (icon) images on my blog domain so I had to set the image paths at initialisation:

      $('a[@rel*=lightbox]').lightBox({
          imageLoading:'http://mikeo.co.uk/MSDN_Blogs/OtherStuff/jQueryLightBox/images/lightbox-ico-loading.gif',
          imageBtnPrev:'http://mikeo.co.uk/MSDN_Blogs/OtherStuff/jQueryLightBox/images/lightbox-btn-prev.gif',
          imageBtnNext:'http://mikeo.co.uk/MSDN_Blogs/OtherStuff/jQueryLightBox/images/lightbox-btn-next.gif',
          imageBtnClose:'http://mikeo.co.uk/MSDN_Blogs/OtherStuff/jQueryLightBox/images/lightbox-btn-close.gif',
          imageBlank:'http://mikeo.co.uk/MSDN_Blogs/OtherStuff/jQueryLightBox/images/lightbox-blank.gif'
        }); // Select all links that contains lightbox in the attribute rel

Using this selector mimics the behaviour of the original Lightbox JS script but of course you have all the flexibility provided by jQuery selectors to enable lightBox functionality of different elements.

I'm still using the same Twitter.js script from Remy Sharp that I was using before and it continues to do sterling service.

The most difficult part was resisting the temptation to add lots of crazy jQuery effects...