Posts Tagged ‘jquery’

Restoring conventional page navigation to your javascript application with jQuery history plugin

Thursday, October 1st, 2009

I’m not sure how, but my jQuery application suddenly got very complicated. One minute I was adding cool onmouseover effects and then BANG I’m inserting new elements all over the place and I have to look into heavy compression just to get the thing to download this side of the apocalypse.

Browsing through my application is a breeze. All the links are rewired to AJAX requests with smooth transitions and lots of slideUp-and-downs. There’s one glaring hole that might just bring this happy user experience down quicker than a Lehman brother wearing Iron Boots.

Whenever my lovely users click ‘back’ on their browser they get taken back to the obscenity that is the non-standards-compliant flashing gif-ridden site they came from, not the last thing they were viewing on my site. And if he or she clicks ‘refresh’ the application state goes back to the original and my user has to navigate back to the page he or she was viewing all over again. What a knightmare.

The browser navigation controls – back, forwards and refresh – are a staple of any user’s experience. Of course, being a web developer you will recognise the lack of page refreshes and the changing of page elements and automatically look for site-specific navigation links on the page itself. However, your average user is going to get very confused, thinking their browser buttons are broken or worse – your website is broken.

And it’s not only the user that’s going to encounter problems. If a Google Spider can’t see pages with unique URLs it’s not going to index them. So all I’m going to get on a Google search is whatever is on the landing page, which is just header information and a footer – not very useful. If my user wants to bookmark a page for later, he or she is going to have to start again, before all the AJAX fun began. The list goes on. It’s like building a vast palace with turrets and different wings but neglecting to build any doors. Your guests are going to walk over the drawbridge and marvel at the splendour of your architecture, the complete set of Power Ranger themed bedrooms, yet have no idea how to get there.

Anyway, here’s how I solved it:

(more…)

Image map rollover effects using jQuery’s MapHilight plugin

Saturday, August 8th, 2009

Update: you can see the finished version of my map here.

So I want to make a big map of europe that hilights the different countries when you move your mouse over them. Initially I thought this would be really easy using a bit of CSS and :hover . . . . no dice. But to my surprise I found out that it’s possible to use an ordinary HTML image map to define some pretty complex shapes, and let’s face it, shapes don’t get much more complex than this.

OK, so it’s possible to create clickable areas in HTML using an image map, but how do I add rollover effects to this? CSS didn’t seem to work so my next port of call was the wonderful jQuery. I found a plugin call mapHilight that takes an HTML image map, and adds some javascript hilighting wizardry to it. You can see a really cool example using a map of the states, this is almost exactly what I want but for Europe. I’m going to try and record everything I do, in the hope that someone else might find this useful, so here goes.

(more…)

JQuery Image Dimensions

Tuesday, June 30th, 2009

Simple code to grab the dimensions of any image on your page. Here’s an example:

My Image

Tell JQuery to find out how big this image is by using:

var width = $("#my_image").width();
var height = $("#my_image").height();