I just want to start this post off by saying, there is no page fold.

All kidding aside, that fact is especially true on this year’s mahamusicfestival.com. You’ll probably agree that the site functions quite well, and it is by far one of my personal favorites so far.

The Maha Music Festival site is designed to have an all-inclusive homepage, loading all of the information not like a typical website, but more like an interactive poster. This format works particularly well for showcasing events (see bigomaha.com) but certainly isn’t limited to just that. More and more, websites are turning to presenting information in this manner.

Now, you can joke all you want about antiquated print marketing rules and the necessity of the “page fold” on the web, but it is seriously true that the internet is constantly changing and leaving ideas like that behind is usually a good idea. It should be obvious to see the benefits of letting the old standards go the way of Betacord and the 8-track tape, but embracing new and exciting web standards doesn’t always come without problems. When building sites that lean away from convention, there is a whole host of things one must consider. First and foremost, the navigation on a site like this typically requires some sort of fixed header with anchor links which move you to sections of content. The navigation on such sites is what I will be focusing on for this installment of “Fun with code”.

A fixed header isn’t necessarily the issue, even Internet Explorer 7 has decent support for fixed elements via CSS. The issue comes when you focus on the overall usability of the site. We would prefer the user understands more transparently the fact that they are scanning over this interactive poster, and not snapping from page to page like they might typically expect.

Enter the jQuery slider

So, we need a piece of code that hijacks the regular behavior of an anchor (a link which drops you to a section of the current page) and replaces it with our new behavior. Fortunately, jQuery can be leveraged here to do a whole bunch of the heavy lifting, leaving us with just a little bit of work to do. Be warned, there’s some heavy tutorial stuff ahead, if you’d like you can skip to the conclusion.

Tutorial time (limited jQuery knowledge required)

Below is the code I ended up arriving at for the Maha Music Festival site. I always like to start with the super-handy jQuery(document).ready(function($) {}); which targets the document and waits for it to be loaded before running all of your JavaScript. This is especially important when binding actions to elements on the page because the elements need to exist before the code tries to find them. It is also really handy to pass the ($) variable into the function here to allow jQuery to attach that variable to itself, saving you a bunch of typing later.

jQuery(document).ready(function($) {
	var href, pos, hash, buffer = 84;
	function OxideSlider(id){
		$('html,body').animate({scrollTop: $(id).offset().top-buffer+'px'}, 'slow');
	}
	$('a').click(function(e) {
		href = $(this).attr('href');
		pos = href.indexOf('#');
		hash = href.substring(pos);
		if ( pos !== -1 && hash.length > 1 && $(hash).length > 0 ) {
			e.preventDefault();
			OxideSlider(hash);
		}
	});
});

Line 2 in this block is pretty simple, it is proper to pre-define your variables in JavaScript, therefore we set up everything we need here. The “buffer” variable is built in to account for the height of the fixed header you are using. For my purposes on the Maha site, 84 pixels tall, that way the animation doesn’t scroll our content under the header every time we click something.

Lines 3 through 5

I chose to put the animation action into a separate function so that I may call it at my leisure. When setting up the OxideSlider(id) function, I built in the passable variable (id) which simply allows me to tell the function which ID the anchor link is asking for when clicked. After the function is called, it asks jQuery to look for the elements, then animates the “scrollTop” property to the top offset (minus the preset buffer) of the requested element.

Lines 6 through 14

This is where the real magic begins. The Maha site has the long homepage, where we want these links to behave in this fashion, but also makes use of separate pages for the blog and other information. I want anchor links to animate when they find the corresponding element, but behave normally when the corresponding element isn’t on the current page, whisking us away to a new page and putting us right where we should be.

To achieve this, I bind a new function to the click action of any anchor element. In this function, I pass the variable (e), which corresponds to the default event received by the click action. I then start by setting up all the required variables, getting the “href” attribute of the link, then checking for the position of the hash (# – the anchor) using indexOf(), then using that position to get the whole anchor using substring().

After I have all of that, I set up the condition on line 10. I can first determine whether the link is an anchor at all, asking if the variable pos (the postion of the hash) is a positive result, then I can ask if the hash is properly formed by checking if it is longer than 1 character, and finally I can check if it properly resolves into a jQuery object. If all of those things check out, all I have to do is prevent the default event using jQuery’s preventDefault(); and substitute my slider function. Otherwise, the function will leave it alone and let the default behavior fire away.

Everything you need, in a tiny block of code

There you have it, by grabbing a few variables and using them to answer a few questions, I was able to build a wildly versatile function which solves the problem while staying out of the way. If you skipped ahead to the conclusion, you just witnessed everything you need to know about what you skipped.