Results 1 to 4 of 4

Thread: Anylink menu - onclick not working on long pages

  1. #1
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Anylink menu - onclick not working on long pages

    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>

  2. #2
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    Code:
    onclick="dropdownmenu(this, event, 'anylinkmenu1')"
    Wrong syntax, it should be:
    Code:
    onclick="dropdownmenu(this, event, anylinkmenu1, 'width')"
    (width is optional)

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default this worked

    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

Bookmarks

Posting Permissions

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