sheikhhasan
asked on
javascript onmouseout hide submenu help
Hi,
I need help implementing onMouseOut hide submenu for the following menu script that another expert(Lisa) has helped me implement.
Right now she has implemented onClick hide, but I tried to implement onMouseOut but it seems not to work.
here is the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<Script language='JavaScript'>
function SubMenu(Cell){
switch (Cell)
{
case "S0":{
var elem = document.getElementById("S 1");
elem.style.visibility = 'hidden'
}
break
case "S1":{
var parent = document.getElementById("T 1");
var x = getRealLeft(parent);
var y = getRealTop(parent);
var elem = document.getElementById("S 1");
elem.style.position = "absolute";
elem.style.left = x + 151; //width attribute of parent menu table + 1
elem.style.top = y;
elem.style.visibility = 'visible'
}
break
}
}
function HideSub()
{
SubMenu("S0");
return true;
}
window.onclick=HideSub;
document.onclick=HideSub;
</Script>
</HEAD>
<body>
<P>
<script language="javascript">
//// FUNCTIONS TO POPUP AND SWAP MENU ITEMS
function Hide(Cell){
Cell.style.visibility = "hidden"
}
function Show(Cell)
{
Cell.style.visibility = "visible"
}
function Swap(Cell){
//alert("Swap" + Cell.id);
switch (Cell.style.color){
case "":
{
Cell.style.color="white"
Cell.style.background="ste elblue"
}
break
case "white":
{
Cell.style.color=""
Cell.style.background="whi tesmoke"
}
break
default:
Cell.style.visibility = "hidden"
}
}
function NavTo(Loc){
window.location = Loc
}
function getRealLeft(el) {
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
function getRealTop(el) {
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
</script>
<TABLE onMouseOver=SubMenu('S1'); Swap(this) onMouseOut=Swap(this) class='Menu' id='T1'
style='Z-INDEX: 1;' cellSpacing='0' cellPadding='3' width='150' height='20' border='0'>
<TR>
<TD title='Menu 1'>Menu 1</TD>
</TR>
</TABLE>
<TABLE class='SubMenu' id='S1' style='visibility: hidden; Z-INDEX: 2;cellSpacing='0' cellPadding='3' width='150' border='0'>
<TR>
<TD title='SubMenu 1-2' height='20'onMouseOver=Swa p(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx' )>SubMenu 1-2</TD>
</TR>
<TR>
<TR>
<TD title='SubMenu 1-3' height='20'onMouseOver=Swa p(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx' )>SubMenu 1-3</TD>
</TR>
<TR>
<TR>
<TD title='SubMenu 1-4' height='20'onMouseOver=Swa p(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx' )>SubMenu 1-4</TD>
</TR>
<TR>
<TR>
<TD title='SubMenu 1-5' height='20'onMouseOver=Swa p(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx' )>SubMenu 1-5</TD>
</TR>
</TABLE>
</body>
</HTML>
I only have 125 points left. sorry.
thanks.
I need help implementing onMouseOut hide submenu for the following menu script that another expert(Lisa) has helped me implement.
Right now she has implemented onClick hide, but I tried to implement onMouseOut but it seems not to work.
here is the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<Script language='JavaScript'>
function SubMenu(Cell){
switch (Cell)
{
case "S0":{
var elem = document.getElementById("S
elem.style.visibility = 'hidden'
}
break
case "S1":{
var parent = document.getElementById("T
var x = getRealLeft(parent);
var y = getRealTop(parent);
var elem = document.getElementById("S
elem.style.position = "absolute";
elem.style.left = x + 151; //width attribute of parent menu table + 1
elem.style.top = y;
elem.style.visibility = 'visible'
}
break
}
}
function HideSub()
{
SubMenu("S0");
return true;
}
window.onclick=HideSub;
document.onclick=HideSub;
</Script>
</HEAD>
<body>
<P>
<script language="javascript">
//// FUNCTIONS TO POPUP AND SWAP MENU ITEMS
function Hide(Cell){
Cell.style.visibility = "hidden"
}
function Show(Cell)
{
Cell.style.visibility = "visible"
}
function Swap(Cell){
//alert("Swap" + Cell.id);
switch (Cell.style.color){
case "":
{
Cell.style.color="white"
Cell.style.background="ste
}
break
case "white":
{
Cell.style.color=""
Cell.style.background="whi
}
break
default:
Cell.style.visibility = "hidden"
}
}
function NavTo(Loc){
window.location = Loc
}
function getRealLeft(el) {
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
function getRealTop(el) {
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
</script>
<TABLE onMouseOver=SubMenu('S1');
style='Z-INDEX: 1;' cellSpacing='0' cellPadding='3' width='150' height='20' border='0'>
<TR>
<TD title='Menu 1'>Menu 1</TD>
</TR>
</TABLE>
<TABLE class='SubMenu' id='S1' style='visibility: hidden; Z-INDEX: 2;cellSpacing='0' cellPadding='3' width='150' border='0'>
<TR>
<TD title='SubMenu 1-2' height='20'onMouseOver=Swa
</TR>
<TR>
<TR>
<TD title='SubMenu 1-3' height='20'onMouseOver=Swa
</TR>
<TR>
<TR>
<TD title='SubMenu 1-4' height='20'onMouseOver=Swa
</TR>
<TR>
<TR>
<TD title='SubMenu 1-5' height='20'onMouseOver=Swa
</TR>
</TABLE>
</body>
</HTML>
I only have 125 points left. sorry.
thanks.
ASKER
I was able to fix the mouseover hide menu. :)
Glad you got the hide menu onmouseover to work.
I don't understand what the other problem is. The color seems to change correctly for me, from steelblue to whitesmoke, although originally there is no background color. If you are still having the problem, please explain.
Lisa
I don't understand what the other problem is. The color seems to change correctly for me, from steelblue to whitesmoke, although originally there is no background color. If you are still having the problem, please explain.
Lisa
ASKER
Hi
http://208.202.161.42/idmextranet/menu/index.aspx
this is the link to the menu, any idea how to fix the space between the menu items? Once you rollover they get fixed.
http://208.202.161.42/idmextranet/menu/index.aspx
this is the link to the menu, any idea how to fix the space between the menu items? Once you rollover they get fixed.
Add position:absolute to the style of the submenu tables like so (put spaces between the tag attributes for clarity):
<TABLE
class='SubMenu'
id='S1'
onMouseOver=SubMenu('S1'); Swap(this)
onMouseOut=Swap(this);SubM enu('S0')
style='position:absolute;b order: 1px solid gray; visibility: hidden; Z-INDEX: 2;'
cellSpacing='0'
cellPadding='0'
width='100'>
--Lisa
<TABLE
class='SubMenu'
id='S1'
onMouseOver=SubMenu('S1');
onMouseOut=Swap(this);SubM
style='position:absolute;b
cellSpacing='0'
cellPadding='0'
width='100'>
--Lisa
ASKER
thank you so much
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
the points are all yours.
ASKER