Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Having trouble, making a pulldown script firefox compatible

Status
Not open for further replies.

FvS

Programmer
Apr 5, 2006
20
NL
Hi i' am using a script to show a pulldown menu on my internetsite but it doesn't seem to work in firefox.

Because the script uses ( i've downloaded it from a free javascript site) "getBoundingClientRect()" but Firefox doesn't support this.

My experience with javascript is not all that so i hoop dat someone could help me?!

Below are the 2 function that use the "getBoundingClientRect()" function

Code:
function ShowMenu(obj_id) {
  HideMenu('menuBar')
  var obj = document.getElementById(obj_id);
  var menu= document.getElementById(obj.getAttribute('menu') )
  var bar = document.getElementById(obj.id)
  bar.className="barOver"
  menu.style.visibility = "visible"
  //menu.style.pixelTop =  obj.offsetTop + obj.offsetHeight + document.getElementById('Bdy').scrollTop
  //menu.style.pixelLeft = obj.offsetLeft + document.getElementById('Bdy').scrollLeft  
  menu.style.pixelTop =  obj.[COLOR=red]getBoundingClientRect()[/color].top + obj.offsetHeight + document.getElementById('Bdy').scrollTop
  menu.style.pixelLeft = obj.[COLOR=red]getBoundingClientRect()[/color].left + document.getElementById('Bdy').scrollLeft
}

Code:
function ShowSubMenu(obj_id) {
  var my_obj = document.getElementById( obj_id );
  window.alert("tada7a: id=" + my_obj.id );  
  PMenu = document.getElementById(my_obj.parentElement.id)
  HideMenu(PMenu.id)
  window.alert("tada7b: id=" + my_obj.id+ " menu="+my_obj.getAttribute('menu') );  
  if(my_obj.getAttribute('menu') !== null &&
     my_obj.getAttribute('menu') !== undefined ) {
    var menu = document.getElementById( my_obj.getAttribute('menu') )
    menu.style.visibility = "visible"
    menu.style.pixelTop =  my_obj.[COLOR=red]getBoundingClientRect()[/color].top + document.getElementById('Bdy').scrollTop
    menu.style.pixelLeft = my_obj.[COLOR=red]getBoundingClientRect()[/color].right + document.getElementById('Bdy').scrollLeft
    if(menu.[COLOR=red]getBoundingClientRect()[/color].right > window.screen.availWidth ) {
       menu.style.pixelLeft = my_obj.[COLOR=red]getBoundingClientRect()[/color].left - menu.offsetWidth
    }
  }  
}
 
Have you tried using the code in the commented lines (i.e. replacing "obj.getBoundingClientRect().top" with "obj.offsetTop", etc)?

If that fails, consider using a different menu. There are so many good, free, cross-browser, cross-OS compatible menus out there, there's simply no need to rely on an archaic IE-only one.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hey BillyRay,

The offsetTop and offsetLeft return different values.

Do you have a suggestion of where i could find some free cross-browser (cascading) menu?
 
Dear BillyRayPreachersSon,

Thanx for the suggestions i've downloaded a dropdown-menu from
Could you please help me to solve one more thing?
I need to use the menu in the following why:
[MENU BUTTON] [DESCRIPTION FIELD]

On the mouseover-event of the [MENU BUTTON] it must show the menu, but it has the following effect that between the button and description field, space is reserved to show the submenu. It would be great if i could change the script so, that instead of openening the first menu to the right of the [MENU BUTTON] it opens below the [MENU BUTTON].

Could you please help me solve this problem i'am still a beginner and it would cost me days to solve this.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="classic.css" />
<script language="javascript" src="jsdomenu.js"></script>
<script type="text/javascript" src="mousepos.js"></script>

<SCRIPT type="text/javascript">
<!--
  function createjsDOMenu() {
  cursorMenuBar = new jsDOMenu(100, "static", "MenuBar");
  with (cursorMenuBar) {
    addMenuItem(new menuItem("Select" , "Main", ""));
    show();
   }

cursorMenuMain = new jsDOMenu(165);
  with (cursorMenuMain) {
    addMenuItem(new menuItem("Option1","H0000000",""))
  }

cursorMenuM0000000= new jsDOMenu(165);
  with (cursorMenuM0000000) {
    addMenuItem(new menuItem("Option1a", "","code:alert('hello world')"))
    addMenuItem(new menuItem("Option1b", "","code:alert('hello world')"))
  }

cursorMenuBar.items.Main.setSubMenu(cursorMenuMain);
cursorMenuMain.items.H0000000.setSubMenu(cursorMenuM0000000)
-->
</SCRIPT>
</HEAD>

<BODY  bgcolor="A0D9D9" onload="initjsDOMenu()" ID="Bdy" bgColor=white >

<table border=0 cellpadding=0 cellspacing=0 width=100% align="center">
<tr >
  <td width="30%" class="prompt"> Choose categorie</td>
  <td><DIV Id="MenuBar" width="100"></DIV></td>
  <td><input maxlength=0 name=omschrijving size=30></td>
</tr>
</table>
</BODY>
</HTML>

I've downloaded the following:
 
The scripts generates a kind of button with the caption "Select". sorry for my bad english.
Code:
 cursorMenuBar = new jsDOMenu(100, "static", "MenuBar");
  with (cursorMenuBar) {
    addMenuItem(new menuItem("Select" , "Main", ""));
    show();
   }
 
Why not email the author (using the link at the top of the DD page) and ask him if this is possible?

He'll know straight away, wherease we'd have to learn the menu code to find out.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
I have mailed the author this morning, i hope he is going to answer it. thnx for the suggestion.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top