Adding an onClick event

**mrickert** · 08-03-2005, 06:47 PM

Script: Top Navigational Bar
URL: http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

I need to add an onClick event handler to every menu item. I've looked through the menu.js file and realize that it should go in there somewhere, I just can't seem to get it to work.

Code:

if (n)
	{
		MENUitem += "<ilayer name="+idItem+">";
		MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"displayPrompt=false;\">";
		MENUitem += "|&nbsp;";
		MENUitem += text;
		MENUitem += "</a>";
		MENUitem += "</ilayer>";
	}

The part in red is what I changed, but it doesn't seem to work. Any suggestions?

**Twey** · 08-03-2005, 06:56 PM

That whole chunk only applies to Netscape. Don't know if you're using NS or not, but you should alter it to work with other browsers too. If you're not using NS, then that's the problem.

**mrickert** · 08-03-2005, 07:04 PM

I've done it for all browsers, sorry for not being clear.

Code:

function addItem(idItem, text, hint, location, altLocation)
{
	var Lookup = "<!-- ITEM "+idItem+" -->";
	if (HTMLstr.indexOf(Lookup) != -1)
	{
		alert(idParent + " already exist");
		return;
	}
	var MENUitem = "";
	MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
	if (n)
	{
		MENUitem += "<ilayer name="+idItem+">";
		MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"displayPrompt=false;\">";
		MENUitem += "|&nbsp;";
		MENUitem += text;
		MENUitem += "</a>";
		MENUitem += "</ilayer>";
	}
	if (ie||ns6)
	{
		MENUitem += "<td>\n";
		MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
		MENUitem += "<a ";
		MENUitem += "class=clsMenuItemIE ";
//		MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
		if (hint != null)
			MENUitem += "title='"+hint+"' ";
		if (location != null)
		{
			MENUitem += "href='"+location+"' ";
			MENUitem += "onmouseover=\"hideAll()\" ";
		}
		else
		{
			if (altLocation != null)
				MENUitem += "href='"+altLocation+"' ";
			else
				MENUitem += "href='.' ";
			MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
			MENUitem += "onclick=\"displayPrompt=false;\" "
		}
		MENUitem += ">";
		MENUitem += "|&nbsp;\n";
		MENUitem += text;
		MENUitem += "</a>\n";
		MENUitem += "</div>\n";
		MENUitem += "</td>\n";
	}
	MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
	MENUitem += "<!-- MAIN_MENU -->\n";

	HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}

That's the complete addItem function. the displayPrompt variable has been declared before the menu is loaded, the only thing is that I'm changing the default onClick from "return false;" to "displayPrompt=false;". What will the effect of this be, is it necessary for "return false" to be there? I'd imagine they put it there for a reason

**Twey** · 08-03-2005, 07:17 PM

Yes indeed... "return false" will stop anything else from happening (browser following the link, scrolling to the top of the page if the href is #, &c.).

In the ie||ns6 block, the onclick will only be added if location is null.

Is the variable being changed? Type javascript:alert(displayPrompt) in the address bar to see the value of displayPrompt. If it is being changed as you expect, it's probably a problem with the code that uses displayPrompt.

This would be a lot easier if you posted a link to the page in question...

**mrickert** · 08-03-2005, 07:26 PM

Hmmm, I'll have to do a little more research into exactly what's going on. I'd post a link but the source is mostly done in PHP so just the link may not tell you much. Plus it's a password protected area that I'd rather not give access to, sorry. I'll try to root out the exact problem and let you know. Thanks for your help.

**mrickert** · 08-03-2005, 07:33 PM

Maybe this will be helpful. I'm using PHP to check if a cookie is set, and if it is I insert the following into the top of <head>:

Code:

<script language="javascript">
  var displayPrompt=true;
  </script>
  <script language="JavaScript" event="onbeforeunload()" for="window">
  if (displayPrompt){
  event.returnValue = "If you leave now, your current cart will be lost.";
  </script>

This will prompt the user if they try to close their browser, change URL, etc. The problem is that it also prompts them when they navigate using the Dynamic Drive menu. That's why when they click a menu item, I want to change displayPrompt to FALSE, so they wont get the prompt. Then, once the page they want to go to loads, the script will be invoked and displayPrompt will go back to TRUE.

So all I need to know is how to change the variable displayPrompt to FALSE when a menu item is clicked, before the onbeforeunlaod method is invoked.

Hope you understand what I'm saying.

**Twey** · 08-03-2005, 07:58 PM

Aha.

Code:

if (displayPrompt){
event.returnValue = "If you leave now, your current cart will be lost.";

You should take that brace out, or close it at some point.

Also, you really shouldn't use onbeforeunload. It's IE-only.

**mrickert** · 08-04-2005, 12:23 PM

Ha, the why is the easy stuff so hard to get? Thanks Twey.

**Twey** · 08-04-2005, 01:08 PM

No problem... greater empires than yours have been lost for want of a semicolon

Thread: Adding an onClick event

Thread Tools

Search Thread

Adding an onClick event

Bookmarks

Bookmarks

Posting Permissions