Jump to content

Setting Links Active

webstyles

By webstyles
in JavaScript

Recommended Posts

webstyles Newbie

webstyles

Posted
Posted

Hi Could anyone offer some help with a java script for my site.i want to let the link change colour when clicked on and be the active link. until another link is selected.but i cannot see what i have to change in the script

<script type="text/javascript">		function setActive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref == pageName) //If this is the current page, set it to red				{					bannerA[i].setAttribute("class", "active"); //For firefox and others					bannerA[i].setAttribute("className", "active"); //For IE				}			}			setInactive(pageName);		}				function setInactive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref != pageName) //For all pages that are not the current page, set them to normal				{					bannerA[i].setAttribute("class", "link");					bannerA[i].setAttribute("className", "link");				}			}		}	</script>

thanks in advance

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Your code looks over complicated for such an easy task, but as you have not supplied htm or link to page we can't truly get an idea of what you trying to achieve?this is a simple code to highlight current page link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var currentPage = document.location.href;var link_parent = document.getElementById("link_wrapper");var anchor_childs = link_parent.getElementsByTagName("a");for(i=0;i<anchor_childs.length;i++){anchor_childs[i].href==currentPage ? anchor_childs[i].className="active" : anchor_childs[i].removeAttribute("className");}}/*--*//*]]>*/</script><style type="text/css">.active{color:#FF0033;}</style></head><body><div id="link_wrapper"><a href="/">home</a><a href="otherone.htm">otherone</a><a href="othertwo.htm">othertwo</a></div></body></html>

the javascript code, css, should placed in, and linked to a external js file.

Link to comment
Share on other sites
webstyles Newbie

webstyles

Posted
  • Author
Posted

Sorry here is the full page code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>	<meta http-equiv="content-type" content="text/html; charset=UTF-8">	<link rel="stylesheet" type="text/css" href="styles.css">	<title>	The Hungarian-South African Chamber Of Commerce	</title>	<script type="text/javascript">		function setActive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref == pageName) //If this is the current page, set it to red				{					bannerA[i].setAttribute("class", "active"); //For firefox and others					bannerA[i].setAttribute("className", "active"); //For IE				}			}			setInactive(pageName);		}				function setInactive(pageName)		{			var bannerA = document.getElementsByTagName("a");			for(var i = 0; i < bannerA.length; i++)			{				var firstIndex = bannerA[i].href.lastIndexOf('/') + 1;				var lastIndex = bannerA[i].href.length;				var bannerAHref = bannerA[i].href.substring(firstIndex, lastIndex);				if(bannerAHref != pageName) //For all pages that are not the current page, set them to normal				{					bannerA[i].setAttribute("class", "link");					bannerA[i].setAttribute("className", "link");				}			}		}	</script></head><body>	<table class="bannerTable">		<tr>			<td>				<a href="aboutUs.html" target="contentFrame" onclick="setActive('aboutUs.html')">					About Us				</a>			</td>			<td>				<a href="boardOfDirectors.html" target="contentFrame" onclick="setActive('boardOfDirectors.html')">					Board Of Directors				</a>			</td>			<td rowspan="3">				<img class="globeImg" src="../images/globe.png" />			</td>			<td>				<a href="businessWithSA.html" target="contentFrame" onclick="setActive('businessWithSA.html')">					Doing Business With RSA				</a>			</td>			<td>				<a href="investmentsInSA.html" target="contentFrame" onclick="setActive('investmentsInSA.html')">					Invest In RSA				</a>			</td>		</tr>		<tr>			<td>				<a href="members.html" target="contentFrame" onclick="setActive('members.html')">					Members				</a>			</td>			<td>				<a href="membership.html" target="contentFrame" onclick="setActive('membership.html')">					Membership				</a>			</td>			<td>				<a href="businessWithHungary.html" target="contentFrame" onclick="setActive('businessWithHungary.html')">					Doing Business With Hungary				</a>			</td>			<td>				<a href="investmentsInHungary.html" target="contentFrame" onclick="setActive('investmentsInHungary.html')">					Invest In Hungary				</a>			</td>		</tr>		<tr>			<td>				<a href="calendar.html" target="contentFrame" onclick="setActive('calendar.html')">					Calendar Of Events				</a>			</td>			<td>				<a href="contactUs.html" target="contentFrame" onclick="setActive('contactUs.html')">					Contact Us				</a>			</td>			<td>				<a href="memberLogin.html" target="contentFrame" onclick="setActive('memberLogin.html')">					Members Login				</a>			</td>			<td>				<a href="links.html" target="contentFrame" onclick="setActive('links.html')">					Links				</a>			</td>		</tr>	</table></body></html>

Link to comment
Share on other sites
webstyles Newbie

webstyles

Posted
  • Author
Posted
Is this using frames, iframes i see they target "contentFrame", but i see none of these?
yes they are running as seperate htm pages
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

this should work, but it will make the link active even if the page is not found.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function setActive(pageName)	{	var link_parent = document.getElementById("link_wrapper");	var anchor_childs = link_parent.getElementsByTagName("a");	for(i=0;i<anchor_childs.length;i++)		{		//alert(pageName.href+" : "+anchor_childs[i].href)		anchor_childs[i].href==pageName.href ? anchor_childs[i].className="active" : anchor_childs[i].className="link";		}	}	function assignonclick(){	var link_parent = document.getElementById("link_wrapper");	var anchor_childs = link_parent.getElementsByTagName("a");	for(i=0;i<anchor_childs.length;i++)		{		if(i>0)			{			anchor_childs[i].className="link";			}		else			{			anchor_childs[i].className="active";			}		anchor_childs[i].onclick = function(){setActive(this);};		}}		window.onload=function(){	assignonclick();}/*--*//*]]>*/</script><style type="text/css">.active{color:#FF0033;}.link{color:#666666;}</style></head><body><div></div><table id="link_wrapper" class="bannerTable">		<tr>			<td>				<a href="aboutUs.html" target="contentFrame">					About Us				</a>			</td>			<td>				<a href="boardOfDirectors.html" target="contentFrame">					Board Of Directors				</a>			</td>			<td rowspan="3">				<img class="globeImg" src="../images/globe.png" />			</td>			<td>				<a href="businessWithSA.html" target="contentFrame">					Doing Business With RSA				</a>			</td>			<td>				<a href="investmentsInSA.html" target="contentFrame">					Invest In RSA				</a>			</td>		</tr>		<tr>			<td>				<a href="members.html" target="contentFrame">					Members				</a>			</td>			<td>				<a href="membership.html" target="contentFrame">					Membership				</a>			</td>			<td>				<a href="businessWithHungary.html" target="contentFrame">					Doing Business With Hungary				</a>			</td>			<td>				<a href="investmentsInHungary.html" target="contentFrame">					Invest In Hungary				</a>			</td>		</tr>		<tr>			<td>				<a href="calendar.html" target="contentFrame">					Calendar Of Events				</a>			</td>			<td>				<a href="contactUs.html" target="contentFrame">					Contact Us				</a>			</td>			<td>				<a href="memberLogin.html" target="contentFrame">					Members Login				</a>			</td>			<td>				<a href="links.html" target="contentFrame">					Links				</a>			</td>		</tr></table></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...