dynamic menu

T

tribal boy

Guys,

I am using a dynamic menu which uses xml,xsl a css file
and javascript.

This works fine when there are no server controls around
or underneath it.

The problem is whenever the menu encounters a server
control, it closes itself.

How Can I get around this. I guess that the server
controls are getting rendered (refreshed) and this is
preventing the menu from being shown

I would appreciate if any one can help me out on this

please find the js & css files below

Thanks

/*===========================================*/

var eOpenMenu = null;

function OpenMenu(eSrc,eMenu)
{
eMenu.style.left = eSrc.offsetLeft +
divMenuBar.offsetLeft;
//eMenu.style.top =
divMenuBar.offsetHeight + divMenuBar.offsetTop;

eMenu.style.top = divMenuBar.offsetHeight
+ divMenuBar.offsetTop + 33 + 12;

eMenu.style.visibility = "visible";
eOpenMenu = eMenu;
}

function CloseMenu(eMenu)
{
eMenu.style.visibility = "hidden";
eOpenMenu = null;
}

function document.onmouseover()
{
var eSrc = window.event.srcElement;
if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "Black";
var eMenu = document.all
[eSrc.id.replace("tdMenuBarItem","divMenu")];
if (eOpenMenu && eOpenMenu !=
eMenu)
{
CloseMenu(eOpenMenu);
}
if (eMenu)
{
OpenMenu(eSrc,eMenu);
}
}
else if (eOpenMenu && !eOpenMenu.contains
(eSrc) && !divMenuBar.contains(eSrc))
{
CloseMenu(eOpenMenu);
}
}

function document.onmouseout()
{
var eSrc = window.event.srcElement;
if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "";
}
}

/*==========================================*/

*====================================================
* Styles for the dynamic menu
*====================================================*/

BODY
{
font-size: 70%;
font-family: verdana;
}

H1
{
font-size: 120%;
font-style: italic;
}

/*Background color for main navigation panel*/
DIV#divMenuBar
{
background-color: #c00000;
}

/*Main menu items and separator*/
TABLE#tblMenuBar TD
{
padding-right: 5px;
padding-left: 5px;
font-weight: bold;
font-size: 9pt;
padding-bottom: 0px;
cursor: default;
color: white;
padding-top: 0px;
font-family: Arial;
background-color: #c00000;
}

/*Used for on mouse over*/
TABLE#tblMenuBar TD.clsMenuBarItem
{
font-weight: bold;
cursor: hand;
}

DIV.clsMenu
{
padding-right: 5px;
border-top: white 1px solid;
padding-left: 8px;
font-size: 8pt;
visibility: hidden;
padding-bottom: 5px;
width: 130px;
color: white;
padding-top: 5px;
font-family: arial,helvetica;
position: absolute;
background-color: black;
}

/*All drop down items */
DIV.clsMenu A
{
font-weight: bold;
color: white;
font-size: 8pt;
font-family: arial,helvetica;
background-color: black;
text-decoration: none;
}

/*On mouse over the drop down menu items */
DIV.clsMenu A:hover
{
color: red;
}

BUTTON
{
font-size: 100%;
font-family: tahoma;
}

/*========================================================
========*/
 
K

Ken Cox [Microsoft MVP]

The problem occurs because of the z-index behaviour of HTML elements.
There's some help in this article:

INFO: How the Z-index Attribute Works for HTML Elements

http://support.microsoft.com/default.aspx?scid=KB;EN-US;q177378&


Here's an explanation that Joseph King of Coalesys posted some time ago:

"So what that means is an IFrame can block out the select box, and be under
a
DIV at the same time. And that is how it is done. We dynamically write the
IFrame to the document, size it to the dimension of the popup DIV, and shim
between the popup DIV and the rest of the page.

There is another, more complex trick you can do. And that is to take a DIV
and copy it's inner content to the new IFrame itself, and then just start
treating the IFrame like you would have been treating the DIV. We were
doing this in our 2.0 betas, and it worked quite well. And it even works
going back to IE 4.0. However, it did require a kind of complex inter-frame
JavaScript bridge to maintain all the features in the product (Once you
write your DIV contents into the IFrame, your popup is actually a whole new
document with it's own JavaScript execution environment). Another caveat is
that in IE 5.0 and earlier, mouse over and mouse out events need to be
handled differently when the mouse is traversing frames (they don't always
fire in the expected order). So, although we had it working quite well, it
wasn't KISS. The shim technique is, so we went decided to go with that.
For IE 5.0, we continue hiding the select boxes as we have done in the
past."


tribal boy said:
Guys,

I am using a dynamic menu which uses xml,xsl a css file
and javascript.

This works fine when there are no server controls around
or underneath it.

The problem is whenever the menu encounters a server
control, it closes itself.

How Can I get around this. I guess that the server
controls are getting rendered (refreshed) and this is
preventing the menu from being shown

I would appreciate if any one can help me out on this

please find the js & css files below

Thanks

/*===========================================*/

var eOpenMenu = null;

function OpenMenu(eSrc,eMenu)
{
eMenu.style.left = eSrc.offsetLeft +
divMenuBar.offsetLeft;
//eMenu.style.top =
divMenuBar.offsetHeight + divMenuBar.offsetTop;

eMenu.style.top = divMenuBar.offsetHeight
+ divMenuBar.offsetTop + 33 + 12;

eMenu.style.visibility = "visible";
eOpenMenu = eMenu;
}

function CloseMenu(eMenu)
{
eMenu.style.visibility = "hidden";
eOpenMenu = null;
}

function document.onmouseover()
{
var eSrc = window.event.srcElement;
if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "Black";
var eMenu = document.all
[eSrc.id.replace("tdMenuBarItem","divMenu")];
if (eOpenMenu && eOpenMenu !=
eMenu)
{
CloseMenu(eOpenMenu);
}
if (eMenu)
{
OpenMenu(eSrc,eMenu);
}
}
else if (eOpenMenu && !eOpenMenu.contains
(eSrc) && !divMenuBar.contains(eSrc))
{
CloseMenu(eOpenMenu);
}
}

function document.onmouseout()
{
var eSrc = window.event.srcElement;
if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "";
}
}

/*==========================================*/

*====================================================
* Styles for the dynamic menu
*====================================================*/

BODY
{
font-size: 70%;
font-family: verdana;
}

H1
{
font-size: 120%;
font-style: italic;
}

/*Background color for main navigation panel*/
DIV#divMenuBar
{
background-color: #c00000;
}

/*Main menu items and separator*/
TABLE#tblMenuBar TD
{
padding-right: 5px;
padding-left: 5px;
font-weight: bold;
font-size: 9pt;
padding-bottom: 0px;
cursor: default;
color: white;
padding-top: 0px;
font-family: Arial;
background-color: #c00000;
}

/*Used for on mouse over*/
TABLE#tblMenuBar TD.clsMenuBarItem
{
font-weight: bold;
cursor: hand;
}

DIV.clsMenu
{
padding-right: 5px;
border-top: white 1px solid;
padding-left: 8px;
font-size: 8pt;
visibility: hidden;
padding-bottom: 5px;
width: 130px;
color: white;
padding-top: 5px;
font-family: arial,helvetica;
position: absolute;
background-color: black;
}

/*All drop down items */
DIV.clsMenu A
{
font-weight: bold;
color: white;
font-size: 8pt;
font-family: arial,helvetica;
background-color: black;
text-decoration: none;
}

/*On mouse over the drop down menu items */
DIV.clsMenu A:hover
{
color: red;
}

BUTTON
{
font-size: 100%;
font-family: tahoma;
}

/*========================================================
========*/
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Just adding some detail support... 1
need help with css. don't see the border, box, and font specification 2
asp:Menu bug? 3
CSS menu 1
The elusive hover and <p> 2
Height at 100% Not Working 1
How to float a menu on the right within a div? 1
table cell 1

Top