Sunday, December 28, 2008

[jQuery] bind add hash to url to an existing function

Hey,
I am a designer who is redesigning my portfolio and incorporating some
jQuery on the new site. I have a function that acts to filter some
items on a page. I would like to also be able to link into the page
and have it already filter the results.

Here is the page:
http://www.jlanedesign.com/download/jld_new/code/projects/

If you click any one of the inline list items near the top: web
design, web dev, print, branding, photography, they have an onclick
function that hides the other options.

What I would like to do is have a url be able to directly do this same
function. IE: http://www.jlanedesign.com/download/jld_new/code/projects/#print
would filter the results of the page and show only the print projects
as the link at top does.

Okay be kind but my basic function looks like this:

// filtering for sub nav on projects/index.html
$("a.print").click(function(){
$(".webprojects, .devprojects, .photoprojects, .logoprojects").hide
();
$(".all, .printprojects").show();
$(".print").addClass("selected");
$(".all, .web, .dev, .photo, .logo").removeClass("selected");
});

$("a.web").click(function(){
$(".printprojects, .devprojects, .photoprojects, .logoprojects").hide
();
$(".all, .webprojects").show();
$(".web").addClass("selected");
$(".all, .print, .dev, .photo, .logo").removeClass("selected");
});

...

Is there a way to bind the hash to this function? Is there another way
to go about this? Thoughts, ideas, comments?

No comments: