Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Custom Menu CSS Class-Checker Script Not Running

    Hello, I'm building a simple custom dropdown menu for a web-site so that I can control look and feel as well as the behavior of an iframe.

    I've set it up so that when the user clicks on any of the menu's active components, an "if" sequence in the clickHandler() function is activated that gets the element's class. If the event occurred on a dropdown option, the event-target id is checked, and the appropriate function is called. At least this is how it's supposed to work.

    All of the drop-down options have been assigned the "dmo" class. When I test the menu and click on other elements, it works fine. But when I click the "dmo" drop-down options, nothing happens. Firebug and IE Explorer Developer Tools both show no errors, but on clicking a dropdown option, the correlate code doesn't run at all, and after hours of head-banging, I have no idea why.

    I need help on this one. Here's the code.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    BODY {
    	background:#000;
    }
    .DropMenu {
    	width:228px;
    	height:1.5em;
    }
    .DropMenu span {
    	color:#FFF;
    	font-size:0.875em;
    	font-family:Verdana, Geneva, sans-serif;
    	font-weight:bold;
    }
    .DropMenuLabel {
    	float:left;
    	width:85px;
    	height:1.5em;
    	padding:0.2em 0 0 0;
    	text-indent:0.3em;
    }
    .DropMenuTopList {
    	width:130px;
    	float:left;
    	height:1.5em;
    	padding:0 0 0 0;
    	cursor:pointer;
    }
    .DropMenuTopList img {
    	padding:0.4em 0 0 0.3em;
    	cursor:pointer;
    }
    .DropMenu span {
    	color:#FFF;
    	font-size:.875em;
    	font-family:Verdana, Geneva, sans-serif;
    	font-weight:bold;
    	vertical-align:center;
    }
    #dropMenuButton {
    	cursor:pointer;
    }
    #dropMenuOptions {
    	position:relative;
    	width:130px;
    	left:85px;
    	padding:0.2em 0 0 0;
    	visibility:hidden;
    	cursor:pointer;
    }
    .MenuList {	
    	list-style-type:none;
    	top:0;
    	left:0;
    	width:100%;
    	margin:1.5em 0 0 0;
    	padding:0;
    }
    .MenuList li{
    	height:1.5em;
    	margin:0.2em 0 0 0;
    	padding:0;
    	width:100%;
    	background-color:#666;
    	border-color:#AAA;
    	border:0.5px solid;
    	text-indent:0.3em;
    }
    .dmo {
    	z-index:100;
    }
    
    </style>
    
    <script type="text/javascript" language="javascript">
    
    window.onload = function() 
    	{	
    		setBehavior();
    	}
    
    function setBehavior()
    	{
    		/*
    		var downButton = document.getElementById('dropMenuButton')
    		downButton.onclick = new Function ( "showMenu()" );
    		*/
    		window.onclick = new Function ( "evt" , "clickHandler( evt )" );
    	}
    
    function clickHandler( evt )
    	{
    	
    		var dropMenu = document.getElementById('dropMenuOptions');
    	
    		var e = evt;
    		var targ;
    	
    		if (e.target) {targ = e.target}
    		else if (e.srcElement) {targ = e.srcElement}
    		
    		var targClass = targ.getAttribute('class');
    				
    		/* classnames 
    		
    		dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
    		dmo - option - once clicked, this should turn the dropdown visibility off
    		
    		*/
    		
    		var exclude = ("dmb" || "dmo")
    		if (targClass != exclude )
    			{
    				hideMenu()				
    			}
    		
    		else if (targClass == "dmb" )
    			{
    				if (dropMenu.style.visibility == "visible") { hideMenu() }
    				else showMenu();
    			}
    
    		else if (targClass == "dmo" )
    			{
    				if ( targ.id == "option1" ){ window.open(www.bing.com,"Bing") }
    				else if ( targ.id == "option2" ){ window.open(www.bing.com,"Bing") }
    				else if ( targ.id == "option3" ){ window.open(www.cuil.com,"Cuil") }
    				hideMenu();
    			}
    	}
    
    function showMenu()
    	{
    		var dropMenu = document.getElementById('dropMenuOptions');
    		
    		dropMenu.style.visibility= "visible";
    	}
    
    function hideMenu()
    	{
    		var dropMenu = document.getElementById('dropMenuOptions');
    		
    		dropMenu.style.visibility= "hidden";
    	}
    
    </script>
    
    
    </head>
    
    <body>
    
    <div id="customMenu" class="DropMenu">
    	<span>
        
        <div class="DropMenuLabel">Options:</div>
        
        <div class="DropMenuTopList dmb" id="dropMenuTopList">Temp Text
       	    <img class="dmb" id="dropMenuButton" src="Assets/Buttons/DropMenuDownButton.png">
            </img>
        </div>
        
        <div class="dmo DropMenuOptions" id="dropMenuOptions">
            <ul id="menuList" class="dmo MenuList">
                <li id="option1" class="dmo">Option1</li>
                <li id="option2" class="dmo">Option2</li>
                <li id="option3" class="dmo">Option3</li>
            </ul>                
        </div>
            
        </span>    
    
    </div>
    
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <script type="text/javascript" language="javascript">
    
    window.onload = function()
    	{
    		setBehavior();
    	}
    
    function setBehavior()
    	{
    		/*
    		var downButton = document.getElementById('dropMenuButton')
    		downButton.onclick = new Function ( "showMenu()" );
    		*/
    		document.onclick =function(){ clickHandler(); };
    	}
    
    function clickHandler( evt )
    	{
     var e=window.event||arguments.callee.caller.arguments[0];
    
    		var dropMenu = document.getElementById('dropMenuOptions');
    
    		var targ;
    
    		if (e.target) {targ = e.target}
    		else if (e.srcElement) {targ = e.srcElement}
    
    		var targClass = targ.className;
    		/* classnames
    
    		dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
    		dmo - option - once clicked, this should turn the dropdown visibility off
    
    		*/
    
    		var exclude = ("dmb" || "dmo")
    		if (targClass != exclude )
    			{
    				hideMenu()
    			}
    
    		else if (targClass == "dmb" )
    			{
    				if (dropMenu.style.visibility == "visible") { hideMenu() }
    				else showMenu();
    			}
    
    	    else if (targClass == "dmo" ) //
    			{
    
    				if ( targ.id == "option1" ){ window.open('www.bing.com',"Bing") }
    				else if ( targ.id == "option2" ){ window.open('www.bing.com',"Bing") }
    				else if ( targ.id == "option3" ){ window.open('www.cuil.com',"Cuil") }
    				hideMenu();
    			}
    	}
    
    function showMenu()
    	{
    		var dropMenu = document.getElementById('dropMenuOptions');
    
    		dropMenu.style.visibility= "visible";
    	}
    
    function hideMenu()
    	{
    		var dropMenu = document.getElementById('dropMenuOptions');
    
    		dropMenu.style.visibility= "hidden";
    	}
    
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the attempt but it produced the same behavior. I was finally able to solve the issue by rewiring the logic of the if statement:

    Code:
    function clickHandler( evt )
    	{
    		var e=window.event||arguments.callee.caller.arguments[0];
    
    		var dropMenu = document.getElementById('dropMenuOptions');
    
    		var targ;
    
    		if (e.target) {targ = e.target}
    		else if (e.srcElement) {targ = e.srcElement}
    
    		var targClass = targ.className;
    		/* classnames
    
    		dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
    		dmo - option - once clicked, this should turn the dropdown visibility off
    
    		*/
    
    		if ( targClass != "dmb" && targClass != "dmo" )
    			{
    				hideMenu()
    			}
    
    		else if (targClass == "dmb" )
    			{
    				if (dropMenu.style.visibility == "visible") { hideMenu() }
    				else showMenu();
    			}
    
    	    else if (targClass == "dmo" ) //
    			{
    
    				if ( targ.id == "option1" ){ window.open('www.bing.com',"Bing") }
    				else if ( targ.id == "option2" ){ window.open('www.bing.com',"Bing") }
    				else if ( targ.id == "option3" ){ window.open('www.cuil.com',"Cuil") }
    				hideMenu();
    			}
    	}


  •  

    Tags for this Thread

    Posting Permissions

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