IcoBlog: DHTML Bookmarks Using JSURL

The official Blog of Iconico & SoftwareMarketingResource

Wednesday, June 4, 2008

DHTML Bookmarks Using JSURL

There's hardly a website out these days that does not use some dynamic HTML to enrich the user interface. It's great to have tabs and other user interface widgets which can be easily flicked between without needing a page reload to show different content.

The problem is that there's no easy way for a user to bookmark a page in the state that they left it. Here's an example of the problem, say I'm looking at a slideshow on Flickr and I see a really great picture that I want to bookmark or send the link to a friend.

Well I don't see any handy email button in the user interface so I grab the URL out of the address bar and save it, but the URL goes to the first slide in the sequence, and I wanted it to go to the picture I chose!


Ok, there's the problem, and I stumbled across the solution on a recent consulting job. If you take a look at the slideshow on YourProm.com you'll see that what they have done is to save a variable to the URL using a non-existant anchor tag. What they did was to use javascript to change the URL to add on '#picture=234', which allow the page to be bookmarked using the regular browser bookmark button. Then when you return to the page a little bit of JavaScript is used to read that variable out again. Neato!

Ok, so lets go one better. Lets write a handy little library called JSURL that allows us to take any JavaScript variable and read and write it to the URL. You got it!

We've written this all up as a javascript library with four handy functions that you can use to store Numbers, Strings, Dates and Booleans to the URL. You can specify the token to be used in the URL, and here's the syntax:

var variable;
// Read from the URL
variable = variable.jsurlRead(token);
// Save to the URL
// Remove token from the URL
// See if the token is in the URL

Here's a demo of this in action, saving the state of a colored chip in the URL. There's also another demo showing multiple objects being saved to the URL.

If you want to use this please go ahead, you can Download the JSURL Zip file, and yes it works on all modern browsers.
Labels: ,


Iconico, Inc. Software Stores

Accurate Design and Development Software

24 Hour Discount Deals on Fantastic Software Applications

Iconico, Inc. Software Services

You Wrote the Code, Now How do you Sell it?

Our Official Blog

© copyright 2004-2009 Iconico, Inc. All Rights Reserved