Archive for the ‘Tutorials’ Category

Javascript: Shortening a breadcrumb using JQuery

Wednesday, January 27th, 2010

A lot of sites these days use breadcrumb trails to make navigation easier for their users. This is essentially a list of every parent category/section of the page you're on, and might look something like this:

Home > About us > Meet the team

Each of these is typically a hyperlink back to the relevant section. Now these are great, but what happens if your breadcrumb isn't that small? It's easy to see a situation where you have a bunch of really long titles that cause the breadcrumb to span over two or three lines. This isn't always what you want, since it can make the breadcrumb look broken. You might just decide to make some of the titles smaller, but with content managed sites and page names stuffed with SEO keywords, this is often easier said than done.

(more…)

Quick Tip: Checking if a javascript function exists

Tuesday, August 25th, 2009

I recently had to write a javascript function that would be used across several sites, and it would call another function that might or might not exist on any of these sites.  There are probably a couple of ways you could get around the inevitable error caused by calling a function that doesn’t exist (I’m thinking some sort of overload here), but I found that the simplest method is to wrap the function call in an if statement like so:

if(typeof myFunction == 'function') {
	myFunction();
}

Handy, huh?

if(typeof yourFunctionName == ‘function’) {
yourFunctionName();
}

Rounded Corners and Fluid Boxes

Friday, May 22nd, 2009

Rounded corners have long been a hot topic for web developers, with several methods out there, each with their benefits and disadvantages.  Although rounded corners seem to have fallen out of favour recently in favour of simple, clean designs, they still remain a powerful tool in any designer’s arsenal, which means knowing how to create them is essential.  This tutorial will show you how to create tableless rounded corners than scale with fluid width and height, and can be expanded on to incorporate drop shadows or custom borders. (more…)