Geoff Muskett. Blog.
A personal scrapbook, where I post progress on current projects, scribbles, code snippets I've found useful, maybe a photograph or two, and anything else web / graphics / art that I find inspiring.
-
using jQuery pathname to assign a class or change an element based on URL
Monday 1th February 2012
This is a pretty useful one, I use it quite often.
I’m currently building a navigation which has an icon above each link. The icon is a background image that contains a transparent and non-transparent versions (CSS sprite). I want the background position to be showing transparent unless the user is on the page which the link refers to.
So, this looks at the URL and assigns it to a variable:
var page = $(location).attr(‘pathname’);
And this checks against the variable and moves the background to show the non-transparent icon. ‘navFirst a’ is the first link in the navigation, ‘navSecond a’ is the second etc.
if (page == ‘/’) {
$(‘.navFirst a’).css({backgroundPosition:’0 0’});
} else if (page == ‘/collections/tableware’) {
$(‘.navSecond a’).css({backgroundPosition:’0 0’});
} else if (page == ‘/collections/weddings’) {
$(‘.navThird a’).css({backgroundPosition:’0 0’});
}
Job done!
blog comments powered by Disqus
All images, design, and art © Geoff Muskett
