PDA

View Full Version : 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 (http://onlinetools.org/tools/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 (http://www.dynamicdrive.com/forums/showthread.php?t=2482&highlight=highlight+current+section)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.



<!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
<!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
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:

<!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:


<!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...
:confused:
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


<!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