layers

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:02

layers

Poster: Jay Shobe
Dated: Thursday December 2 2004 - 16:35:09 GMT

I have a application where the menu shares the same screen area as a results tree. I have succeeded in toggling the visibility of the menu and tree. My problem is that when the menu is hidden, the results tree doesn't respond to the mouse-over event. Strangely, I discovered a magic sequence that "fixes" the problem. Clicking the "toggle visibility" button demonstrates the problem. Clicking the "this works" button demonstrates the "fix".

Code:

<html> 
<body> 
       
<script type="text/javascript" src="milonic_src.js"></script>    
<script type="text/javascript" src="mmenudom.js"></script>    
<script type="text/javascript" src="menu_data.js"></script>    
<script   type="text/javascript"> 

function bgcolorin(elem,name){
  elem.style.backgroundColor = "#cccccc";
  elem.style.cursor = "hand"
}
function bgcolorout(elem){
  elem.style.backgroundColor = "white";
}

function mm_showMenu() 
{ 
  var menuName = "Main Menu"
  _m[getMenuByName(menuName)][7] = 1
  var menuNum = getMenuByName(menuName); 
  menuDisplay(menuNum, 1); 
  
  dataDiv.style.visibility = "hidden"
  
  visibility.value = "menu"
} 

function mm_hideMenu() 
{ 
  var menuName = "Main Menu"
  _m[getMenuByName(menuName)][7] = 0
  var menuNum = getMenuByName(menuName); 
  menuDisplay(menuNum, 0); 
  
  dataDiv.style.visibility = "visible"
  
  visibility.value = "tree"
}

function mm_moveLeft()
{  
  spos(gmobj("menu0"),0,10,null,null) 
} 

function mm_moveRight()
{  

  spos(gmobj("menu0"),0,300,null,null) 
} 

function mm_showBoth()
{
  mm_showMenu() 
  dataDiv.style.visibility = "visible"
}

function mm_ThisWorks() 
{
  mm_moveRight()
  mm_showBoth()
  mm_showMenu() 
  mm_hideMenu() 
  mm_showMenu() 
  mm_hideMenu() 
}

function toggleVisibility() 
{

  if (visibility.value == "menu") {mm_hideMenu()}
  else {mm_showMenu() }
}



</script> 

<div id=dataDiv style="position:absolute;left:0px">
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 1</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 2</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 3</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 4</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 5</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 6</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 7</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 8</span><br>
<span onMouseOver=bgcolorin(this) onMouseOut=bgcolorout(this)>line number 9</span><br>
</div>
<button onclick="mm_ThisWorks()" style="position:absolute;top:250px">This Works!</button> 
<button onclick="toggleVisibility()" style="position:absolute;top:300px">Toggle Visibility</button> 
<button onclick="mm_showBoth()" style="position:absolute;top:400px">Show Both</button> 
<button onclick="mm_moveLeft()" style="position:absolute;top:450px">Move Menu Left</button> 
<button onclick="mm_moveRight()" style="position:absolute;top:500px">Move Menu Right</button> 
<input type=hidden id=visibility value=menu>

<script language=javascript>
//mm_showBoth()
//mm_moveRight()
mm_showMenu()
</script>
</body> 
</html> 

Thanks in advance,

Jay

Poster: kevin3442
Dated: Saturday December 4 2004 - 7:14:24 GMT

Hi Jay,

As you must have deduced, given the subject of your post, the main problem is in layering. The menu has a pretty high z-index. You don't specify a z-index for your dataDiv, so the default layer that it occupies is below the menu's, even when the menu is not visible. You can see this by toggling on your results tree, then pointing at the seemingly non-functional top links all the way to the left of the text (a part that isn't covered by the menu); the link will probably work when you point at the far left side.

The solution would be to set the z-index of the dataDiv higher than the menu's when the menu is hidden, and lower than the menu's when the menu is shown. I think the highest z-index the menu uses is 999 (with some experimenting, you should be able to find a good value for the dataDiv's z-index). You could set the dataDiv's z-index in your mm_showMenu() and mm_hideMenu() functions.

I hope you don't mind some more advice... if you want to, you could probably tighten up the toggling procedure a little.

(1) In your toggle function, you can toggle the menu's alwaysvisible property (_m[menuNum][7]) using the not operator (!) and therefore aviod conditional tests.

(2)With this approach, the value of _m[menuNum][7] keeps track of whether you're showing the menu or not, so you don't really need the visibility.value variable (which you're basically using as a flag).

(3) You could then use the value of _m[menuNum][7] as the second parameter to menuDisplay() to show or hide the menu (again, doing away with conditional tests).

(4) _m[menuNum][7] could also be used as an index into a global array to set the visibility of the dataDiv, again avoiding conditional tests.

(5) You can also get away with calling getMenuByName() only once to show or hide the menu.

With all of the above in mind, the following code would take care of the entire toggle, including the z-index part:

Code:

var dataDivVisibility = new Array();
dataDivVisibility[false] = "visible";
dataDivVisibility[true] = "hidden";

function toggleVisibility()
{
  var menuNum = getMenuByName("Main Menu");
  _m[menuNum][7] = !_m[menuNum][7];
  menuDisplay(menuNum, _m[menuNum][7]);
  dataDiv.style.visibility = dataDivVisibility[_m[menuNum][7]];
  dataDiv.style.zIndex = 1000 * !_m[menuNum][7];
}

I also noticed in your current approach that, in addition to showing or hiding the menu, you're also setting the menu's alwaysvisible property to 0 (false) when hidden and 1 (true) when shown. But you don't have to do that as far as I know. The "alwaysvisible" property normally means what its name suggests, but when you start custom coding, the name can be somewhat misleading. In other words, even if you left the menu's alwaysvisible property set to 1, you could still hide, then re-show the menu with the menuDisplay() function, without adjusting the value of alwaysvisible (i.e., _m[menuNum][7]). Of course, if you did that, you couldn't use _m[menuNum][7] as a flag to track the toggle, so you'd have to use your own flag. The following code is an example of how you could do the toggle function without adjusting the menu's alwaysvisible propery:

Code:

var menuIsVisible = true;

function toggleVisibility()
{
  menuIsVisible = !menuIsVisible;
  menuDisplay(getMenuByName("Main Menu"), menuIsVisible);
  dataDiv.style.visibility = dataDivVisibility[menuIsVisible];
  dataDiv.style.zIndex = 1000 * !menuIsVisible;
}

Sorry for the long-winded reply (I get that way sometimes). Hope you find some of it useful.

Cheers,

Kevin

Industrial Strength JavaScript and DHTML Menus

layers