JavaScript - Navigation Menu, Need Help With Mouseout Function

due to the version of dreamweaver i have (MX-2004) i have had to hand code a drop down menu myself however i have come across a problem.

i'm not sure if the problem is in the Javascript, HTML, or CSS however here go

when ever i hover over the menus dont drop down they cascade up and the other problem is that when ever i hover over one of the buttons a menu from another pops up and not the one that should.

here is the codes so you can have a look

javascript:
Code:

<script type="text/javascript">

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

function mopen(id)
{	

	mcancelclosetime();

	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}

function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

document.onclick = mclose; 
</script>

HTML code
Code:

<table align="center" width="950px" border="0" cellpadding="0">
  <tr>
  	<td height="50">
	<div align="center">
        <table width="100%" border="0" cellpadding="2" cellspacing="0">
          <tr>
            <td width="100%" height="48" align="center" bgcolor="#CF8D72">
              <ul id="sddm"><li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<!-- travel guides drop menu -->
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Guides</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
    	<a href="#">Africa</a>
		<a href="#">Asia</a>
		<a href="#">Australia</a>
		<a href="#">Europe</a>
		<a href="#">North America</a>
		<a href="#">South America</a>
		<a href="#">Vesas</a>
		<a href="#">Carnas</a>
		<a href="#">Driving Over Sea</a>
        </div>
    </li>
	<!-- adventures drop menu -->
	<li><a href="#"
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Adventures</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">up & coming Adventures</a>
		<a href="#">The Team</a>
		<a href="#">the Journey</a>
		<a href="#">pod casts</a>
		<a href="#">Photo Gallery</a>
        </div>
    </li>
	<!-- travel news drop menu -->
	<li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Travel News</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
    	<a href="#">Advice</a>
		<a href="#">Destinations</a>
		<a href="#">Holidays</a>
		<a href="#">Cities</a>
		<a href="#">Cruses</a>
		<a href="#">Hotels</a>
		<a href="#">Snow & skis</a>
		<a href="#">Expats</a>
		<a href="#">Watch Dog</a>
        </div>
    </li>
    <li><a href="#">Forum</a></li>
	<li><a href="#">Chatroom</a></li>
	<li><a href="#">Travel Shop</a></li>
</ul>
<div style="clear:both"></div>
</td>
          </tr>
        </table>
   </div></td>

and the CSS
Code:

#sddm
{ 
	width: 99%;
	margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 0px
	font-weight: bold;
	z-index: 30
}

#sddm li
{	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: "Baskerville Old Face", Baskerville, "Times New Roman" bold 11px; 
}

#sddm li a
{	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 90px;
	background: url(/images/navigation/chromebg4.gif) center center repeat-x;
	color: #000000;
	text-align: center;
	text-decoration: none;
}

#sddm li a:hover
{	
	background: url(image/navigation/chromebg4-over.gif) center center repeat-x;
}

#sddm div
{
	position:absolute;
	top: 0;
	border: 1px solid #E8BEBE;
	border-bottom-width: 0;
	font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 140px;
	visibility: hidden;
	height: 296px;
}

	#sddm div a
	{	
		position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px bold;
	}

	#sddm div a:hover
	{	background-color: #FFECEC;
		color: #000000;}

Hi,

I'm after a drop down script that basically you press categories and down it drops with say one side products by category the left side and say product by price the right side.

Ign.com do it when you click on one of the top links I'm just not sure of the name and the most easiest to implement?

Any help wolf be great
Many thanks
Joe

Need some help understanding why and how to fix this.... btw this site is something I've been working on for some time..... and learning bit by bit !!!

this is the site :
http://www.teiafirme.com/hargrave.html

this is the problem :
The specific problem is that when you mouse over pictures i have a script to enlarge those pics, but my menu stays on top of those pictures !!!!!!!!!!!!! what do i need to do to fix this? If needed I will post the page html code...

I also have another problem which is with the flash movie on the home page which is only loading after i navigate way from the home page and then comeback to it...... Movie does not start on initial page load !!!!!

Okay, I'll try to give as much detail on what I'm trying to do here and please correct me if this is not possible to do using javascript. Let's say you have 3 files:
document.html = the page where all this is displayed
menu.js = the script that will read the menufile.txt and parse it into a navigation menu
menufile.txt = content of the menu that will be parsed

The idea here is that when the website grows, I want a simple way of updating the menu for all the pages without going and doing it page by page.

The content of menufile.txt will look like this:
+Menu Item1 "Link1"
-SubMenu Item1 "Link2"
-SubMenu Item2 "Link3"
+Menu Item2 "Link4"

Each link corresponds to the item before it as you can see, and I'm using + to signify a main menu item while - signifies a submenu item. The logic I can see for doing this is reading the whole file into an array, then going through the array searching for + or - and breaking the line into pieces.

Take the first line for example:
+Menu Item1 "Link1"
This is broken into 3 variables:
+ -> is the what tells me if it's a main menu item or a sub menu item
Menu Item1 -> is the name i want put into a variable
"Link1" -> This is the link variable for the page associated with the item, this could be left blank if there is no link available to the corresponding item.

So to sum it up, I'm reading the file link by line, breaking it into 3 variables. But I am not that experienced with javascript and don't know how I can go about doing that or if it's even possible.

Thank you in advance for taking the time to read this. If you need more clarification on anything I mentioned please let me know, I'll be glad to elaborate.

Hello everyone,

For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript:

Code:

$(function(){

    var config = {    
         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         interval: 200,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };
    
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }
 
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.pMenu li").hoverIntent(config);
    
    $("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");

});

My css that corresponds to this is:

Code:

.pMenu{
	margin:0;
	padding:0;
}

#health{
	width:10%;
	padding-left:14%;
	padding-right:2%;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:10%;
	padding-right:2%;
}

#education{
	width:13%;
}

ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:3px ridge #C00;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-left:2%;
	padding-right:2%;
	padding-top:10px;
	padding-bottom:10px;
}

ul.pMenu li a:hover{
	background:#FF0;
	border:3px ridge #FF6;
	color:#FF0;
}

ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li a{
	width:auto;
	background:#CCC;
	border:1% outset #999;
	font-size:95%;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	border-right:none;
	width:100%;
	display:inline-block;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

Hi,

I created a simple menu:

Code:

<html>

<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>

<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>

<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>

<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>

<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>

</tr>
</tbody>
</table>
</body>

</html>

Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on.


Regards
Rain Lover

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

The following piece of codes work like this:

When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes.

<html>
<head>

<script type="text/javascript">
function over(e)
{
if(e.toElement){
if(e.toElement.tagName.toLowerCase() == "input"){
e.toElement.value="IE New";
}
}

}


function out(event)
{

if (event.srcElement){
if(event.srcElement.tagName.toLowerCase() == "input"){
event.srcElement.style.background= "green";
}
}

}


</script>
</head>

<body>
<div id="1">aaaaaaaaaaaaaaaaaa </div>
<input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" />

</body>

</html>


This sequence works fine, until the following case:

First let's see the direction of the button:

(left) <--------> BUTTON <--------> (right)

Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed.

Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered.

What caused this?

Thanks

Scott

So after a great deal of work I finally get my code working...
Main hurdle was clearing the setTimeOut...
A simple example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>

<script type="text/javascript" src="js1.3.js"></script>

<style>
.windowcht {
position:absolute;
top:30%;
width:150px;
height:150px;
right:50%;
background:yellow;
}
</style>

<script>
$(function() {
//mouse hover effects

$('.windowcht').fadeTo('slow', 0.1);
	$('.windowcht').mouseenter(function() {
    $(this).fadeTo('fast', 1);
         });
$('.windowcht').mouseleave(function() {
    var hov = this;
    var timeout;
    timeout = setTimeout(function() {
        $(hov).fadeTo('slow', 0.1);
    }, 2000);
	$('.windowcht').mouseenter(function() {
	clearTimeout(timeout);
         });
});


});

</script>

</head>
<body>
<div class="windowcht">
This is my text
</div>





</body>
</html>

I would love any suggestions for my code to be less resource hungrey, I mean pure js code, not jquery.
Suggestion??

Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout?

http://www.javascriptkit.com/script/....shtml#current

I pretty sure just looking at this that there must be a simpler way of executing this.

I have a number of objects (always varies) coming into the div tag #apply_row and has the class .rotate_color and .highlight

Code:

<div id="apply_row" class="rotate_color highlight">
  milk
</div>
<div id="apply_row" class="rotate_color highlight">
  coffee
</div>
<div id="apply_row" class="rotate_color highlight">
  cheese
</div>

And I have the javascript written to give a different color for dd and :even and to add a highlight color when user puts the mouse over.

Code:

$(document).ready(function()
{
  	//alternate div colors
	$("div.rotate_color:odd").css("background-color", "#FFFFFF");
	$("div.rotate_color:even").css("background-color", "#F9F5E8");
        
        //highlight and return back to original color on mouseout
	$("div.highlight").mouseover(function(){
   		$(this).css("background-color", "#F6E9D0");
  		$("div.highlight").mouseout(function(){
  			//clear background color to none
  			$(this).css("background-color", "");
                        //change back to original
  			$("div.rotate_color:odd").css("background-color", "#FFFFFF");
			$("div.rotate_color:even").css("background-color", "#F9F5E8");
		});
  	});
	

  
});

This does seem a bit excessive, but it does work except that it is *really slow to make the css changes. I couldn't really get .hover to work either with changing the background back to the original. The way the site is set up right now, it would be best to leave the background-color for these particular ID's and Classes out of the CSS file itelf (blah, too long to explain why).

Any suggestions???


Thanks,
Daniel

I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element.

I've been using the script from quirksmode but it can be hard to get working.
Code:

function doSomething(e) {
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
}

I have a function that needs to work only when the parent is moused out of.
I didn't make this script.

It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)"
in the html

Code:

function transition(ele,dirflag) {

 if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
  var totDur = arguments[2] || 1000; // third argument, or one seconds
  var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
  var intrval = totDur/numSteps; // renamed so it can't conflict
  ele.sopac = 0; // we start at 0
  ele.shght = 50; // we start at 50px
  ele.eopac = 1; // we end at 1
  ele.ehght = 140; // we end at 140px
  ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
  ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
  ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
  ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
  ele.dirflag = dirflag; // changed name to dirflag, stored for reference
  if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
  if(dirflag) { // 1 or true = increment
	// alter visibility here to make an invisible item visible before starting
	ele.style.display='block';
	ele.intrans= setInterval(function() {
	  if(ele.copac<ele.eopac ) { // if mods needed
		ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
		if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
		ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
		if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
		// set styles accordingly
		ele.style.opacity = ele.copac;
		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
		ele.style.height = ele.chght+'px';
	  } else {
		clearInterval(ele.intrans); // we're done -- clear timeout
	  }
	},intrval); // do it on intrval timeline
  } else { 
  
 // 0 or false = decrement
	ele.intrans= setInterval(function() {
	  if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
		ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
		if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
		ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
		if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
		// set styles accordingly
		ele.style.opacity = ele.copac;
		ele.style.MozOpacity = ele.copac;
        ele.style.KhtmlOpacity = ele.copac;
		ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
		ele.style.height = ele.chght+'px';
	  } else {
		clearInterval(ele.intrans); // we're done -- clear timeout
		// and make the item disappear here since it's done transitioning.
		ele.style.display='none';
	  }
	},intrval); // do it on intrval timeline
  }
} // all done!

I tried to do this: Code:

function transition(ele,dirflag,e){

if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
  var totDur = arguments[2] || 1000; // third argument, or one seconds
  var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
  var intrval = totDur/numSteps; // renamed so it can't conflict
  ele.sopac = 0; // we start at 0
  ele.shght = 50; // we start at 50px
  ele.eopac = 1; // we end at 1
  ele.ehght = 140; // we end at 140px
  ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment 
........

With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event)

but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all.

I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong.

and please no script librarys.

This is what my code is supposed to do:

1. create a select list that changes the photo showing, (which I have)
2. create script so that when the user hovers over the image it shows a div
3. when the users mouse is off the image/div shows the coordinates where it last left
4. on mouseout hides the div again (this is the part I'm stuck on)

This is my html:
Code:

<style>
		#selectdiv
		{
			position:absolute;
			left:10px;
			top:10px;
			width:400px;
			height:400px;
		}
		#mylist
		{
			position: absolute;
			left: 200px;
			top: 100px;
			width:inherit;
			height:inherit;
		}
		#myyellow
		{
			position: absolute;
			left: 600px;
			top: 100px;
			width:300px;
			height:200px;
			background-color:#FF3;
		}
	</style>
<body>
	  <div id="selectdiv">
      <h1 style="font-size:28px">Select a Beatle</h1>
      <select name="beatles" size="1" id="myselect" onchange="showDiv();">
	  		<option value="-">-</option>
            <option value="J">John</option>
            <option value="P">Paul</option>
            <option value="G">George</option>
            <option value="R">Ringo</option>
      </select>
      </div>
      <div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
      <div id="John" style="display:none">
      	<img src="beatles_john.jpg" />
      </div>
      <div id="Paul" style="display:none">
      	<img src="beatles_paul.jpg"  />
      </div>
      <div id="George" style="display:none">
      	<img src="beatles_george.jpg" />
      </div>
      <div id="Ringo" style="display:none">
      	<img src="beatles_ringo.jpg" />
      </div>
	  <div id="myyellow" style="display:none"></div>
      <div id="msg"></div>
</body>

This is my script:
Code:

function showDiv()
		{
			var mySelect = document.getElementById("myselect");
			var myList = document.getElementById("mylist");
			
			switch (mySelect.value)
			{
				case 'J':
						myDiv = document.getElementById("John");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block"; 		//Makes div viewable
						break;
						
				case 'P':
						myDiv = document.getElementById("Paul");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			//Makes div viewable
						break;
						
						
				case 'G':
						myDiv = document.getElementById("George");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			//Makes div viewable
						break;
						
						
				case 'R':
						myDiv = document.getElementById("Ringo");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			//Makes div viewable
						break;
			}
		}
		
		function showYellow(event)
		{
			var myyellow = document.getElementById("myyellow");
			myyellow.style.display = "block";
			
		}
		function showpixels(event)
		{
		 	x=event.clientX
			y=event.clientY

			var myMsg = document.getElementById("msg");
			myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
		}

Any feed back is greatly appreciated.

HI,
we suppose of being able to choose on a various menu drop down functions, for example:

pippo=a+b
pippa=a-b
cippa=a*b
zippa=a/b

using a menu drop down for the choice of the operation pippo, pippa,cippa,zippa, how I could make this script . PLease help me

Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.

My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.

I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.

Here is the existing function which tells a link to be active or selected:

Code:

var Lst;

function CngClass(obj){
 if (Lst) Lst.className='.topnav';
 obj.className='selected';
 Lst=obj;
}

and here is the menu code:

Code:

<ul class="topnav">
	<li><a href="#">Home</a></li>
	
	<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
		<ul>
			 <li><a onclick="CngClass(this);" href="#">Cookies</a></li>
			 <li><a onclick="CngClass(this);" href="#">Events</a></li>
			 <li><a onclick="CngClass(this);" href="#">Forms</a></li>
			 <li><a onclick="CngClass(this);" href="#">Games</a></li>
			 <li><a onclick="CngClass(this);" href="#">Images</a></li>
			 <li><a onclick="CngClass(this);" href="#">Navigations</a>
				<ul>
					<li><a onclick="CngClass(this);" href="#">CSS</a></li>
					<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
					<li><a onclick="CngClass(this);" href="#">JQuery</a></li>
				</ul>
			</li>
			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a onclick="CngClass(this);" href="#">Tutorials</a>
		<ul>
			 <li><a onclick="CngClass(this);" href="#">HTML</a></li>
			 <li><a onclick="CngClass(this);" href="#">CSS</a></li>
			 <li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
			 <li><a onclick="CngClass(this);" href="#">Java</a>
				<ul>
					<li><a onclick="CngClass(this);" href="#">JSP</a></li>
					<li><a onclick="CngClass(this);" href="#">JSF</a></li>
					<li><a onclick="CngClass(this);" href="#">JPA</a></li>
					<li><a onclick="CngClass(this);" href="#">Contact</a></li>
				</ul>
			</li>
			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a onclick="CngClass(this);" href="#">Contact</a></li>
	<li><a onclick="CngClass(this);" href="#">Upload script</a></li>
</ul>

Thanks for any help or advice.