Highlight current....??

**psilos** · 03-02-2007, 09:12 AM

Hello there,

I have been searching the whole forum with the phrase "highlight current"
and have found the same question

How to highlight the current page with XXX menu?

but still not a solution.

I know there is a way doing this with server-side script (e.g Php) like this one: easynav

but i was wondering if someone can achieve this with javascript, so i'm asking javascript gurus.

mwinter posted a good thought in this thread but i guess no luck since then.

Thank you.

**codeexploiter** · 03-02-2007, 09:53 AM

Try the following code. Hover your mouse over the links available on the browser and see the effect.

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
div a:hover
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}

#menu
{
	background-color:#000000;
	width: 300px;
	height:100px;
	text-align:center;
}
</style>
</head>

<body>
<div id="menu">
<a href="#">Demos</a>
<a href="#">Customising</a>
<a href="#">Downloads</a>
<a href="#">Comments</a>
</div>
</body>
</html>

What you are trying to achieve can be achieved using CSS without much trouble.

**psilos** · 03-02-2007, 10:50 AM

Hello codeexploiter,

Thanx for your answer!
But i guess u misunderstood my question, that's because i haven't explained properly!!

What i mean is not to achieve the hover effect(i know that).

For example in your menu..after i click at demos link,
the page demos.html is loaded in a iframe below your menu..
what i want is that link demos is still highligted(active) so as to show(indicate)
to the user, he is at page--> demos!!

I hope this explain a little better what i(we) want to achieve..

Thanx.

**mburt** · 03-02-2007, 11:23 AM

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
div a:hover
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}

.menu
{
	background-color:#000000;
	width: 300px;
	height:100px;
	text-align:center;
}
.hilite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
.lolite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				a[ai].onclick = function() {
					this.className = "hilite";
					}
				a[ai].id = "anc"+ai;
				}
			}
		}
	}
document.onmousedown = function(e) {
	var tg = document.getElementsByTagName("*");
	var obj = document.all?event.srcElement:e.target;
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				if (obj.id != document.getElementById("anc"+ai).id && obj.tagName != "HTML" && obj.className != "menu" && obj.tagName != "BODY") {
					document.getElementById("anc"+ai).className = "lolite"
					}
				}
			}
		}
	}
</script>
</head>

<body>
<div class="menu">
<a href="#">Demos</a>
<a href="#">Customising</a>
<a href="#">Downloads</a>
<a href="#">Comments</a>
</div>
</body>
</html>

**psilos** · 03-02-2007, 12:08 PM

Well mburt that was exactly what i wanted.
Thank you very much.

Is it possible to have a specific menu active when the page first loads??

Thanx

**badbussenab** · 03-03-2007, 07:10 PM

Originally Posted by psilos

Well mburt that was exactly what i wanted.
Thank you very much.

Is it possible to have a specific menu active when the page first loads??

Thanx

That would be very neat. Help anyone?

**mburt** · 03-04-2007, 01:53 PM

Yup, that would be easy:

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
div a:hover
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}

.menu
{
	background-color:#000000;
	width: 300px;
	height:100px;
	text-align:center;
}
.hilite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
.lolite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				a[ai].onclick = function() {
					this.className = "hilite";
					}
				a[ai].id = "anc"+ai;
				}
			}
		}
	}
document.onmousedown = function(e) {
	var tg = document.getElementsByTagName("*");
	var obj = document.all?event.srcElement:e.target;
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				if (obj.id != document.getElementById("anc"+ai).id && obj.tagName != "HTML" && obj.className != "menu" && obj.tagName != "BODY") {
					document.getElementById("anc"+ai).className = "lolite"
					}
				}
			}
		}
	}
function hilite(number) {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			if (number < a.length+1) {
				a[number-1].className = "hilite";
				}
			}
		}
	}
</script>
</head>
<body>
<div class="menu">
<a href="#">Demos</a>
<a href="#">Customising</a>
<a href="#">Downloads</a>
<a href="#">Comments</a>
</div>

<script type="text/javascript">
hilite(1);
</script>
</body>
</html>

So this is how it works: it takes the order of the links in question, and the function hilite(number) capitalizes on that. If number was "1", then the first element in the menu will hilite, "2" would be the second, etc.

**psilos** · 03-05-2007, 08:58 AM

mburt thank u very much...This script is great..

But i wnated to use it in an list, So when i replace content with something like that:

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#rightcontent a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:left;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
#rightcontent a:hover
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:left;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}

.menu
{
	background-color:#000000;
	width: 200px;
	height:100px;
	text-align:left;
}
.hilite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
.lolite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				a[ai].onclick = function() {
					this.className = "hilite";
					}
				a[ai].id = "anc"+ai;
				}
			}
		}
	}
document.onmousedown = function(e) {
	var tg = document.getElementsByTagName("*");
	var obj = document.all?event.srcElement:e.target;
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				if (obj.id != document.getElementById("anc"+ai).id && obj.tagName != "HTML" && obj.className != "menu" && obj.tagName != "BODY") {
					document.getElementById("anc"+ai).className = "lolite"
					}
				}
			}
		}
	}
function hilite(number) {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			if (number < a.length+1) {
				a[number-1].className = "hilite";
				}
			}
		}
	}
</script>
</head>

<body>
<div id="rightcontent" class="menu">
<ul>
<li><a href="#">Demos</a></li>
<li><a href="#">Customising</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
<script type="text/javascript">
hilite(1);
</script>
</body>
</html>

I get some weird results..
The background-color still changes but the color remains the same...

Isn't the element a properly selected??
I'm just learning javascript, so any help would be valiable..

Thanx in advance!!

**codeexploiter** · 03-06-2007, 08:17 AM

Try the following code some small changes in the CSS part compare it with your CSS part

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:left;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
div a:hover
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:left;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}

.menu
{
	background-color:#000000;
	width: 200px;
	height:100px;
	text-align:left;
}
.hilite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color:#FFFF99;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
.lolite
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #000;
	width:30px;
	height: 15px;
	text-align:center;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				a[ai].onclick = function() {
					this.className = "hilite";
					}
				a[ai].id = "anc"+ai;
				}
			}
		}
	}
document.onmousedown = function(e) {
	var tg = document.getElementsByTagName("*");
	var obj = document.all?event.srcElement:e.target;
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			for (var ai = 0;ai < a.length;ai++) {
				if (obj.id != document.getElementById("anc"+ai).id && obj.tagName != "HTML" && obj.className != "menu" && obj.tagName != "BODY") {
					document.getElementById("anc"+ai).className = "lolite"
					}
				}
			}
		}
	}
function hilite(number) {
	var tg = document.getElementsByTagName("*");
	for (var i=0;i<tg.length;i++) {
		if (tg[i].className == "menu") {
			var a = tg[i].getElementsByTagName("a");
			if (number < a.length+1) {
				a[number-1].className = "hilite";
				}
			}
		}
	}
</script>
</head>

<body>
<div id="rightcontent" class="menu">
<ul>
<li><a href="#">Demos</a></li>
<li><a href="#">Customising</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
<script type="text/javascript">
hilite(1);
</script>
</body>
</html>

**psilos** · 03-07-2007, 01:44 PM

@codeexploiter: Thanx for your answer, but i don't want to use div a selectors
since i have more than one divs with a selectors...

So the problem is in the css only?

Thanx

Thread: Highlight current....??

Thread Tools

Search Thread

Highlight current....??

Bookmarks

Bookmarks

Posting Permissions