PDA

View Full Version : Custom Menu CSS Class-Checker Script Not Running



marklavin
Nov 15th, 2009, 05:03 PM
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.




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

vwphillips
Nov 15th, 2009, 05:25 PM
<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>

marklavin
Nov 16th, 2009, 06:02 AM
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:




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();
}
}