loading

Super lightweight jQuery slider

[Fun with code is a multi-part series. Read the rest.]

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.

2 Comments

11 Jul 2012

Reply

Thanks for the fun code and explanations! I’m still an amateur so I appreciate the break down of the lines with simplicity. I look forward to reading more of
this section!

14 Sep 2012

You’re welcome, and thanks for the kind words! There will be more soon, so stay tuned.

22 Sep 2019

‘Enter’ to submit

SVG is a thing now; you should use it.

With all this talk about resolution independence and responsive design, how many times have you built something for the internet and thought, hey, it sure would be nice if I could have a vector graphic here instead of a series of pre-saved bulky images switching in and out some way or another? For example: every single logo ever, social media buttons, line art of any type. If your concern is responsiveness and you’re using images, then you’re in for trouble.…

The multiply effect is a lie

This year’s fabulous Big Omaha website is showcasing a little visual trick. Early on, when Nathan and I were discussing the intended visuals on the site, I failed to notice he was using the multiply effect in Photoshop to achieve the appearance of the red overlays – and he went forward working that into the design. To my dismay, when I went to add the red layers by simply overlaying a slightly transparent layer of red over the top of…

Fun with code at Meet The Pros

Last week I spoke at Meet The Pros and, not surprisingly, my presentation was titled Fun with code. When I had volunteered to speak way back when, I envisioned myself talking about a bunch of code stuff and making it really interesting and fun. If you’re a regular reader of the Fun with code series here, you probably don’t remember any of it being terribly interesting or fun. It may be really helpful and useful, but it’s certainly too specialized…

Detecting a retina display

A few weeks ago, we announced that oxidedesign.com was fully retina optimized. For those of you who do not know, a retina display is a monitor or device that has more pixels per inch of space than a normal display. This basically means it is harder to tell where the edges of pixels are, allowing for an extremely crisp and clean appearance. This works great on the web for things like text, but a problem arises when displaying images. Since…

Access Restriction for Live Staging Sites

We have a lot of active, ongoing projects here at Oxide, especially when it comes to the web. In order to build and make changes to sites which can still be viewable for internal or client review, we run live staging versions of them on subdomains of oxidedesign.com. Don’t bother digging around looking for a secret gem though, because you can’t get in. At least, not anymore.

Extend post types with custom taxonomies

For part two of this series, I want to show how I extended the default functionality of WordPress custom post types and taxonomies in order to build a user-friendly way to associate posts from one type to another. To recap, in part one, we set up a couple of custom post types. To start this tutorial we’ll be using a very similar function to set up the taxonomy which we will leverage for post-to-post association.

Using custom post types for WordPress

Over the past few years, I’ve written quite a bit of code and I’ve had a lot of fun doing it. I’ve got tons of useful snippets in my back pocket and I’m just itching to share them with the world. I’m going to take this opportunity to start a new series here on the Oxide blog, Fun with code. To get things started, let’s outline a problem and uncover a situation which creative code can solve.