Like many people, I have a vanity domain name, www.stuart-grassie.co.uk. Many moons ago I used to host my blog on there, but for a variety of reasons I bought this domain and switched my blog here. So I put up a basic index page, listing a few interesting factoids about me, and what I do. When I say a “basic” page, I mean basic - black text on a white background, almost as if it was just few words typed into a text file - although there was semantically correct and valid xhtml behind it.

The other day I came across a link, 30 Examples of Extreme Minimalism in web design and it inspired me to do a small make-over on my vanity domain name site. Which I think has turned out fairly ok. Athough that isn’t the point of this blog post.

As there is not a massive amount of information (after all it’s just a “here I am, here’s some information about me, here’s how you can contact me” site, all of it is on one page. I’m using jQuery to hide everything, until the user clicks a link to see the information they want. I used jQuery UI, to use a couple of basic slide in/out effects. The actual effects are “clip” and “blind”, using “toggle” to turn them on/off. All the other content apart from the “frontpage” is hidden.

Initially, I had it working so that you could click a link, and the requested “page” would transition into view, the “frontpage” would transition out of view, then I had a <span><back</span>, which I made react to mouse clicks, using jQuery, and you could then click back to the “frontpage”.

Maybe you would like to read this example page.


This is some example content.

$(document).ready(function(){
    $("#example").hide(); // Hide the example on page load
});

// detect when the link is clicked, and toggle the two
's
$(function() {
    $("#examplelink").click(function() {
	$("#example").toggle("clip", {}, 500);
        $("#main").toggle("blind", {}, 500);
	return false;
    });
});</pre>
In my excitement to get this learned and done (I've never used jQuery before), I've lost the original code, but that's essentially what I had, without the code to detect when the fake back button back is clicked - all it did was to run the toggle again, which returned the user to the "frontpage". I had to to do it this way, because the browser forward/back doesn't work.

Clearly, this is not an ideal situation, because it has broken one of the cardinal web design guidelines, by breaking the users browser, by rendering the forward/back buttons inoperable.

I'll show you what I did next time.