Posted on Tuesday, April 29th 2008 at 13:58
Introducing the Lab
5 comments so far | Digg | del.icio.us
DevKick has a new section called the Lab. DevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.
:path
Bundled with the grand opening, I will release the first version of a new jQuery selector called :path. :path is a very useful selector that automatically adds an active state to all your navigational elements. Normally, this is done server-side or by adding lots of redundant classes to each navigational element and use descendant selectors in CSS. To simplify this process for front-end developers or designers, :path filters out anchor elements where the href attribute matches the window.location path, including ancestors and lets you style those easily using jQuery and CSS. The package also includes a :current pseudo-class that targets the anchor that links to the current page.
More about :path and active states in a forthcoming blog post.
In time, I will also move my previous projects here, such as Galleria and Tripoli.
Leave a Reply
5 Responses so far.
-
At 4:33 pm on May 1st, 2008 , Wes wrote:
Seems like a great tool. I guess my only question is what is wrong with the method of body id’s and navigation element id’s? Using jQuery some people might miss out on the styling.
For instance:
Home
About….
CSS:
body#index #nav_index, body#about #nav_about { /* active nav info */ }-
At 2:45 pm on May 3rd, 2008 , admin (author) wrote:
@Wes: Have a look at our latest post http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/
It explains some of the pros and cons. I prefer the jQuery route myself.
-
At 11:36 am on May 6th, 2008 , Eugene Efimochkin wrote:
OK guys, :path is nice but there’s a great problem there. I dealed with it once I was hired to my current job (http://www.itech-design.ru). The problem is that you make a link _look_ like it is not a link, when it obviously _is_ a link. It even acts like a link (and if you prohibit it’s default behaviour with script you are going one step more the wrong path). My rule of thumb for visual states and links is: when you don’t need a link, don’t make it. That’s it. You see, we use server-side page generators most of the time, hence we _can_ remove the <a></a> garments each time we don’t need a link (performance is the question — but it always was dealable anyway). It is possible nowadays.
When we create static pages - why not think a bit and find a way to develop a template based site that doesn’t have links where we don’t need them? It is also possible with modern tools (damn, it is even MORE possible when we use just Notepad)!
Here in ITECH.group we don’t use such tricky JavaScript «link tortures» for at aleast a year (just since the moment I was hired), you can check our portfolio. When we don’t need a link - we don’t put it.
-
At 11:52 am on May 6th, 2008 , David (author) wrote:
@Eugene: You raise a valid point, but it does not necessarily rule out :path. :path does not tell you how to style your active or current links, it’s just a front-end alternative that pulls active hrefs automatically. Nielsen recommends that you should not have a link that points to the current page, just as you say, that’s why :path comes bundled with :current. This example replaces the anchor that points to the current page with it’s containing text (thus removing the anchor):
$(’ul a:current’).each(function() {
$(this).replaceWith($(this).text());
});-
At 8:01 am on August 23rd, 2008 , Jurgen Posselt wrote:
I just discovered your web site yesterday and in a nutshell, you guys have restored my faith in the internet. How long have you been around? KEEP UP THE GREAT WORK. I love this site !!
