Simple(?) jQuery href thingy

[mikedorrphoto]

Hello all,

I’m brand new to Javascript/jQuery, so for my first project I thought I’d try something simple…turns out it’s not so simple for me.

Here is what I wanted to do:
I have a div on my site with an id of “jp”. When I click the link in that div, I want the site to redirect me to the Japanese version of that page. My site’s English version is mysite.com/index.htm and the Japanese version would be mysite.com/jp/index.htm

So, if I am on the page mysite.com/about/education/index.htm and then click on the Japanese language link, I want it to take me to mysite.com/jp/about/education/index.htm

I thought this would be easy enough, but none of the materials I have cover this kind of manipulation of the page address.

Any help would be greatly appreciated!

Cheers!

-Mike

[Bob]

Can’t you just wrap that div in an achor link tag? Like this:

...

[mikedorrphoto]

Hi Bob,

Thanks for your help. What I’m trying to do is stay away from hardcoding in a link on every page. If my site has a ton of pages, I will have to make a different link on each page…this seems like a lot of work. I was thinking there was maybe a way to use jQuery to take the current page’s address and add the “jp/” just after the .com/

If I were to ever add another language, I wouldn’t want to hardcode in a hundred or more links again (depending on how many pages my site has).

There’s gotta be a way, right?!?

Cheers!

-Mike

[noahgelman]

$(document).ready(function() {

var pathName = window.location.pathname.replace('http://www.mysite.com/', 'http://www.mysite.com/jp/');

$('div#jp a').attr.('src', pathName)

});

});

Basically what I did was create a variable called pathName and I grabbed the url of the current page and told it to replace the beginning with the same beginning but with the /jp/ on the end. So this stored variable is the exact same url you are at but with the /jp/ right after the .com part like you wanted. And then I selected the anchor inside the div with the id of jp, selected the src attribute, and then gave that src the value of our variable. This should make that anchor link to the exact same page you are on, on any page you are on, but with the/jp/ in there.

[noahgelman]

Just in case, you might have to split that ‘replace’ into a second line, like this:

$(document).ready(function() {

var pathName = window.location.pathname;

var newPath  = pathName.replace('http://www.mysite.com/', 'http://www.mysite.com/jp/');

$('div#jp a').attr.('src', newPath)

});

});

[mikedorrphoto]

Wow! I can see how that would work. It’s not much code, but still kinda hard to wrap my head around. I’ll give it a try later today. Thank you!

[noahgelman]

Yeah, when someone starts out on jQuery it can take some time to wrap your head around code even if you know what the code is doing. After you work with it for a while, it starts to become easier to picture mentally.

If the above code doesn’t work (i think it should) come back and I’ll try to find another solution.

[Author]

Posts