From the lab: Nav-o-Matic
…written by Will and has 9 comments so far
“Another labs post, only a week after the last one?” we hear you cry! We just have so many useless awesome ideas that we want to share with you, that’s all!
When we build websites, we like to make them load as quick as possible. To this end, we use something called navigation matrix’s. Simply put; this is when use one image with all the buttons and shift that image around for the different states. It works a treat, but it does take a while to set up. Calculating background positions, widths and heights isn’t a quick process and when the client wants to change Home to Homepage after you’re all finished it just makes us love them even more.
This is where the Nav-o-Matic comes in! Using some clever Javascript (and a bit of flash) you can now upload your image, lay down some guides (just like in Photoshop), click ‘Apply’ and you’re done! The Nav-o-Matic will supply you with all the code you’ll need. Just stick it in your page and you’re done.
There are a few things to remember though before you dive in. Firstly, this is not for the rubbish browsers. If you use Firefox, Safari or Chrome you’ll be fine, but anything else (Internet Explorer) and you’ll struggle. There is a simple solution to that though…
Second, this is version 1. There is a lot more functionality planned, but for now, there is only support for 2 states: Normal and hover (hover also acts as the active/on state). As long as your image looks something like this though you’ll do fine. Support for more states is coming soon however there is no harm in uploading your navigation anyway. It will still work out all the widths and horizontal background positions for you which is the main bit.
And lastly, no vertical navigation (yet) I’m afraid. You’ll just have to do it the long way for now.
Anyway, enough reading, head over to the labs page and give it a go yourself. We’d really appreciate any feedback you have so leave us a message on the blog or Tweet about it!
Carte Memoire Says:
It is a nice post. And luckily I am user of Mozilla Firefox. so I did not have to face any problem in browsing it. And you said this is version 1 so should I suppose that second version is coming soon??
September 24th, 2009 at 11:35 amDave Says:
As simple as it is, seems hard to go wrong! Nonetheless, I cannot get it to work. Example: http://voiceresults.com/navTest.htm
April 28th, 2010 at 1:30 pmWill Says:
Hi Dave,
It looks like you just need to grab yourself a reset stylesheet. That will remove all the browser applied default styling.
Give it a google, or just grab this one from Giraffe! reset.css
Hope that helps,
Will
P.S. Vote for giraffe in the webby awards! Tell all your friends
http://www.giraffe.net/webby
April 28th, 2010 at 1:43 pmDavid Says:
Javascript error on main page prevented me from using the site.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; InfoPath.2)
Timestamp: Wed, 28 Apr 2010 15:57:03 UTC
Message: Object doesn’t support this property or method
Line: 26
Char: 86
Code: 0
URI: http://labs.engageinteractive.co.uk/nav-o-matic/js/jquery.uploadify.v2.0.2.min.js
using IE 8
April 28th, 2010 at 3:57 pmDavid Says:
Ok, well then, now that I know that IE support was excluded on purpose, I guess I won’t be coming back here any time soon. Awesome, thanks, Good Job!
April 28th, 2010 at 3:59 pmWill Says:
Hmm, we recently updated jquery to 1.4.2. Maybe the uploadify js needs an update as well.
It’s just the tool that doesn’t support IE. Not the end result.
April 28th, 2010 at 4:00 pmHakan Göçmez Says:
need translate
tnaks for that
June 9th, 2010 at 7:03 pm