Results 1 to 10 of 10

Thread: Highlight current....??

  1. #1
    Join Date
    Oct 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Highlight current....??

    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.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.
    Last edited by codeexploiter; 03-02-2007 at 10:05 AM. Reason: highlighted CSS code

  3. #3
    Join Date
    Oct 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  5. #5
    Join Date
    Oct 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by psilos View Post
    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?

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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.
    - Mike

  8. #8
    Join Date
    Oct 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!!
    Last edited by psilos; 03-05-2007 at 09:05 AM.

  9. #9
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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>

  10. #10
    Join Date
    Oct 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •