Using Javascipt to define a link

[Farland]

Is there a way to use javascript to make a link point to a different place? In other words, I want to make all links to maps.html point to mapsthumbs.html under a certain condition.

 

[feherke]

Hi

As far as you explained it, yes.

Post some code, will be easier for us to answer and our answers will be relevant. ( Please cut off the decorations before posting. )

Feherke.

http://rootshell.be/~feherke/

 

[BillyRayPreachersSon]

Something like:

var anchors = document.getElementsByTagName('a');

for (var loop=0, max=anchors.length; loop<max; loop++) {
	var a = anchors[loop];
	if (a.href.indexOf('/maps.html') != -1) {
		a.href = '/mapsthumbs.html';
	}
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Farland]

That seems like what I need, but I am having a bit of trouble making it work. Thanks for your patience with a newbie .

The idea is to check browser width and call a separate style sheet if the browser is <915 res (code was modified from the Man in Blue's code).

What I'd like to do is insert an additional bit of code to also redefine maps to mapsthumbs if the browser is <915.

Anyway, here's my current code. Could it be modified to change the link too?


checkBrowserWidth();

attachEventListener(window, "resize", checkBrowserWidth, false);




function checkBrowserWidth()
{
var theWidth = getBrowserWidth();

if (theWidth == 0)
{
var resolutionCookie = document.cookie.match(/(^|farland_res_layout[^;]*(;|$)/);

if (resolutionCookie != null)
{
setStylesheet(unescape(resolutionCookie[0].split("=")[1]));
}

addLoadListener(checkBrowserWidth);

return false;
}

if (theWidth < 915)
{
setStylesheet("globalsmall");
document.cookie = "farland_res_layout=" + escape("globalsmall");
}
else
{
setStylesheet("");
document.cookie = "farland_res_layout=";
}

return true;
};




function getBrowserWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0)
{
return document.documentElement.clientWidth;
}
else if (document.body)
{
return document.body.clientWidth;
}

return 0;
};




function setStylesheet(styleTitle)
{
var currTag;

if (document.getElementsByTagName)
{
for (var i = 0; (currTag = document.getElementsByTagName("link")); i++)
{
if (currTag.getAttribute("rel").indexOf("style") != -1 && currTag.getAttribute("title"))
{
currTag.disabled = true;

if(currTag.getAttribute("title") == styleTitle)
{
currTag.disabled = false;
}
}
}
}

return true;
};

 

[BillyRayPreachersSon]

It doesn't look like you've even tried to integrate the code - try putting it in and see what happens.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Farland]

Sorry, Dan, I did try several times, but with no luck. So I took it out and posted the clean code. I suppose I just don't know where to insert it.

 

[BillyRayPreachersSon]

Try inside the "if (theWidth < 915)" text block...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Farland]

That did work. I changed it to this and it worked:

if (theWidth < 915)
{
setStylesheet("globalsmall");
document.cookie = "farland_res_layout=" + escape("globalsmall");

var anchors = document.getElementsByTagName('a');

for (var loop=0, max=anchors.length; loop<max; loop++) {
var a = anchors[loop];
if (a.href.indexOf('maps.html') != -1) {
a.href = 'mapsthumbs.html';
}
}
}

 

[Farland]

But here's my next problem. I think it's a problem with this line, as indicated by the "resize":

checkBrowserWidth();

attachEventListener(window, "resize", checkBrowserWidth, false);

Basically the code is only executing if a user resizes his browser. How would I make it so the code checks the user's browser size and executes the code when they visit a page as opposed to only when they resize?

Thanks for all the help so far, BTW! You guys have been great.

 

[BillyRayPreachersSon]

Modify the "resize" to be "load".

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Farland]

That did it. I think that's all. Thanks so much. It really helped me!