Anylink menu - onclick not working on long pages

**mlr** · 08-22-2006, 02:47 PM

1) Script Title: AnyLink Drop-Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: I posted this earlier, but am rewording my problem in hope for some help. I have a page that uses the Anylink menu in a table column. If the table gets really long, the onclick event does not work on the rows that require scrolling down the page. Clicking on the menu link makes the page jump back up to the top instead of displaying the menu. Is this related to the script or in general a behavior of the onclick event so that I cannot use the script on a long page?

Thank you for looking into this.

Example 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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px}
.grd_hd_new {	background-color: #cacaca;	color: #036;	font-weight:bold;}
.grd_hd2 {background-color: #fff; color:#036; font-weight:bold;}  
.rowu {background-color: #efefef; color:#000} 
.rowe {background-color: #e5e5e5; color:#000}
.hovermenu {border: 1px solid #e9fecb; border-style:outset;  background:#e9fecb; color: #000; padding:2px; margin:2px;}
a.hovermenu {color:#000;  display:block; width:50px}
</style>
<link rel="stylesheet" type="text/css" href="anylinkvertical.css" />
<script type="text/javascript" src="anylinkvertical.js">
/***********************************************
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div id="datatable">
  <table cellspacing="0" rules="all" border="1" id="dgMatrix" style="width:100%;border-collapse:collapse;">
    <tr class="grd_hd_new" style="font-weight:bold;">
      <th scope="col" style="width:50px">Actions</th>
      <th scope="col">Year</th>
      <th scope="col" width="100%">Name</th>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2005</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2005</td>
      <td >John </td>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2006</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2008</td>
      <td >John </td>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2006</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2008</td>
      <td >John </td>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2006</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2008</td>
      <td >John </td>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2006</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2008</td>
      <td >John </td>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2006</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2008</td>
      <td >John </td>
    </tr>
    <tr class="rowe">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2006</td>
      <td >Mike</td>
    </tr>
    <tr class="rowu" id="AL-EMA1">
      <td ><a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1')"> Options</a> </td>
      <td >2008</td>
      <td >John </td>
    </tr>
  </table>
  <div id="anylinkmenu1" class="anylinkcss"> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div>
</div>
</body>
</html>

**DimX** · 08-22-2006, 03:00 PM

Code:

onclick="dropdownmenu(this, event, 'anylinkmenu1')"

Wrong syntax, it should be:

Code:

onclick="dropdownmenu(this, event, anylinkmenu1, 'width')"

(width is optional)

**jscheuer1** · 08-23-2006, 05:25 AM

Does the page address (in the address bar of the browser) get a hash (#) mark appended to it the first time this happens? If so, you need to add ';return false;' to the onclick events:

Code:

<a href="#" class="hovermenu" onclick="dropdownmenu(this, event, 'anylinkmenu1');return false;">

The script itself is supposed to take care of this but, your combining it with the hovermenu may be interfering. So much so that the above fix may not be enough but, it is a good shot if that hash mark is showing up.

**mlr** · 10-04-2006, 01:30 PM

Sorry for my late reply, but I was working on other stuff for the last couple of weeks.

I followed your instructions and it works now. You saved my life (or at least my job

. The world is a better place with people like you.

Thank you,
Margit

Thread: Anylink menu - onclick not working on long pages

Thread Tools

Search Thread

Anylink menu - onclick not working on long pages

this worked

Bookmarks

Bookmarks

Posting Permissions