www.webdeveloper.com
Results 1 to 10 of 10

Thread: How to highlight the selected menu item in javascript ?

  1. #1
    Join Date
    Jan 2005
    Location
    UK
    Posts
    29

    How to highlight the selected menu item in javascript ?

    Hi friends. I have a javascript list menu, I want the menu item stay in given background color when we are at that page. How do we achieve that with javascript ? pls help.

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD><TITLE>page_2</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/CSS>
    
    </STYLE>
    <SCRIPT type="text/javascript">
    
    </SCRIPT>
    <META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
    <BODY scroll="auto">
    	<SELECT id="s0" size=4>
    		<OPTION>page one
    		<OPTION>page two
    		<OPTION>page three
    		<OPTION>page four
    		<OPTION>page five
    	</SELECT>
    
    <SCRIPT type="text/javascript">
    	var inx=document.title
    	inx=inx.substring(inx.indexOf('_')+1,inx.length)
    	document.getElementById('s0').options[inx-1].style.backgroundColor='pink'
    </SCRIPT>
    
    </BODY></HTML>

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    Quote Originally Posted by justinbarneskin View Post
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD><TITLE>page_2</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/CSS>
    
    </STYLE>
    <SCRIPT type="text/javascript">
    
    </SCRIPT>
    <META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
    <BODY scroll="auto">
    	<SELECT id="s0" size=4>
    		<OPTION>page one
    		<OPTION>page two
    		<OPTION>page three
    		<OPTION>page four
    		<OPTION>page five
    	</SELECT>
    
    <SCRIPT type="text/javascript">
    	var inx=document.title
    	inx=inx.substring(inx.indexOf('_')+1,inx.length)
    	document.getElementById('s0').options[inx-1].style.backgroundColor='pink'
    </SCRIPT>
    
    </BODY></HTML>
    What on God's earth is this code from? Offering code suggestions like this may get you beat up by any other "real" developer.

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    Quote Originally Posted by Webnerd View Post
    What on God's earth is this code from? Offering code suggestions like this may get you beat up by any other "real" developer.
    Beat away, bitter web veteran. I'm not afraid.

  5. #5
    Join Date
    Jul 2010
    Posts
    2
    I think my reply was more adaptable, which given the original post may have been more relevant, but it hasn't appeared

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    Quote Originally Posted by justinbarneskin View Post
    Beat away, bitter web veteran. I'm not afraid.
    - For one, you have unclosed HTML tags = bad
    - Your tags are all uppercase = bad
    - Your attributes aren't quoted = bad
    - You have script and style tags with no content = wtf?
    - You have MSIE proprietary attributes in body tag = bad

    Offering help is one thing but presenting generated garbage code is not the answer. And certainly, offers no real help to the person submitting the original post. You are setting this poor guy up for failure by even showing markup like that. It may have been acceptable circa 1998 but it is now 2010 and that is just horrible to even suggest code like that.

  7. #7
    Join Date
    Oct 2006
    Posts
    939
    Yeah well, since i found the post on page two with no replies and the question
    posed cryptically, my reply is mostly a half-hearted guess. While the author of the
    original post has not chimed in for more, rest assured that my effort was for my
    own amusement and not to serve as a guide.

    If you wish to brandish your almighty coding wisdom, be sure to answer a post before I get to it.
    You'll not see me berating anything you may offer. Now, get off my back.

  8. #8
    Join Date
    Jul 2010
    Posts
    2
    I would suggest that we answer posts with the authors needs in mind, not our own amusement. The original poster is indeed looking for a guide.

  9. #9
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    The key in this post is that there is no information provided that explains the context of "menu". We can help but some clarification needs to be provided.

  10. #10
    Join Date
    Jul 2010
    Posts
    2
    Hi linux1880,

    i assume you need the following:

    make a file called highlight.js with the following code:

    Code:
    function extractPageName(hrefString)
    {
    	var arr = hrefString.split('/');
    	return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();               
    }
    
    function setActiveMenu(arr, crtPage)
    {
    	for (var i=0; i<arr.length; i++)
    	{
    		if(extractPageName(arr[i].href) == crtPage)
    		{
    			if (arr[i].parentNode.tagName != "DIV")
    			{
    				arr[i].className = "current";
    				arr[i].parentNode.className = "current";
    			}
    		}
    	}
    }
    
    function setPage()
    {
    	hrefString = document.location.href ? document.location.href : document.location;
    
    	if (document.getElementById("main_menu")!=null)
    		setActiveMenu(document.getElementById("main_menu").getElementsByTagName("a"), extractPageName(hrefString));
    }
    Put this in the head of your html page:

    Code:
    <script type="text/javascript" src="/js/highlight.js"></script>
    And this is the code for the menu itself:

    HTML Code:
    <div id="main_menu">
        <ul>
           <li><a href="page1.html">page1</a></li>
           <li><a href="page2.html">page2</a></li>
           <li><a href="page3.html">page3</a></li>
           <li style="background:none" class="last"><a href="page.4html">page4</a></li>
        </ul>
            <script type="text/javascript">setPage()</script>
     </div>
    The css styles:

    Code:
    #main_menu { height: 29px; width: 94%; margin-left: 6%; text-transform:uppercase; padding-top: 6px; font-size: 13px; float: left; margin-top: 200px; }
    
    #main_menu li {float:left; list-style-type:none; background:url(/images/menu-line.gif) no-repeat right 5px;}
    #main_menu li a { text-decoration:none; color:#3c4044; padding: 0px 19px 0 19px; display:block; margin-top:3px; padding-bottom: 5px; font-weight: bold; }
    
    #main_menu li a:hover {color: #FFF; text-decoration:none;}
    #main_menu li .last { background:none;}
    #main_menu li .last a { padding-right:0;}
    #main_menu li .current {color:#FFF; text-decoration:none;}
    The class .last is for the menu divider (as an image) and in the class .current you can set the highlight color and text-decoration.

    Hope this helps you....

    Grtz

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles