Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #247

Some form elements, like <select> objects, show through underlying content such as Pop Menu Magic menus or PVII Widgets, showing on top of the content. What can I do to fix this?

The Answer

Prepared May. 2005 by Gerry Jacobsen, PVII

The <select> element in a form will appear above absolutely positioned elements in MSIE5 and 6 on Windows. This is a known behavior in those browsers, which has been fixed in IE7. It's usually advisable to lay out your page so that select lists do not intersect absolutely positioned elements. If that's not possible, you can use this JavaScript function to automatically hide the <select> element when the submenus are showing and conversely make them visible again when the menu is inactive.

How To...

1. You can use this special JavaScript function, P7_hideSelect(). Copy and Paste this function into your JavaScript file.

Here's the function:

  function P7_hideSelect(a){ //v1.0 by PVII
  var g,h=(a==1)?"hidden":"visible";
  if(document.getElementsByTagName){
  g=document.getElementsByTagName("select");
  if(g){for(var i=0;i<g.length;i++){
  g[i].style.visibility=h;}}}
  }
  

2. To activate this function all we need to do is to place the function call just ahead of the normal menu trigger, like:

-If your are using a PopMenu Magic 2 system, skip to the PMM 2 section.

-If your are using a PopMenu Magic 1 system, skip to the PMM 1 section.

-If you are using an autoLayers-based menu:

onmouseover="P7_hideSelect(1);P7_autoLayers(0,'Layer1')"

-or if you are using MenuMagicII:

onmouseover="P7_hideSelect(1);P7_trigMM2('p7TBim10')"

The number 1 in the argument tells it to hide all of the <select> elements on the page.

3. Conversely, to show them again, simply use a 0 (zero) as the argument, like:

P7_hideSelect(0)

Place this function call on the trigger that is used to close the submenus, in an autoLayers menu or the MenuMagicII system, this would be the closer layer. The function call would look like this:

-If you are using an autoLayers-based menu:

onmouseover="P7_hideSelect(0);P7autoLayers(0)"

-or if you are using MenuMagicII:

onmouseover="P7_hideSelect(0);P7_trigMM2()"

That's it!

All of the <select> elements on the page will now hide whenever the submenus are active, and then automatically become visible again when the menu is inactive.

Here's a quick example page that demonstrates this technique using our MenuMagicII system.

 

How to use this tweak in a Pop Menu Magic 2 system

The PopMenu Magic 2 system uses timed triggers to show and hide the sub menus, these triggers are not part of the html markup (makes it very efficient). In order to use the P7 hideSelect() function with PopMenu Magic 2 you will want to add it directly to the JavaScript file:

1. Open the p7PMMscripts.js file.

2. Add the P7_hideSelect(a) function JavaScript code, as listed above, to the end of the page.

3. Locate the the first two lines of the P7_PMMopen(d,bp) function, around line 341, it will look like this:

function P7_PMMopen(d,bp){
   var i,tA,tM,tD,w,h,mT,mL,pp,xx=0,yy=0,wd,pb,pr,sct,aw,sc,pt,pl,iM;

-add the P7_hideSelect(1); trigger on a new line just below the function line, so it looks like this:

function P7_PMMopen(d,bp){
  	P7_hideSelect(1);
   var i,tA,tM,tD,w,h,mT,mL,pp,xx=0,yy=0,wd,pb,pr,sct,aw,sc,pt,pl,iM;

4. Locate the last few lines of the P7_PMMshut(d) function, around line 265, it will look like this:

			P7_PMMclose(tD[k]);
  		}
    }
 }

add the P7_hideSlect(0) trigger on a new line, before the last }, so it looks like this:

			P7_PMMclose(tD[k]);
  		}
    }
   P7_hideSelect(0);
 }

5. Save and close the file.

 

How to use this tweak in a PopMenu Magic 1 system

The PopMenu Magic 1 system uses timed triggers to show and hide the sub menus, these triggers are not part of the html markup (makes it very efficient). In order to use the P7 hideSelect() function with PopMenu Magic 1 you will want to add it directly to the JavaScript file:

1. Open the popmenu.js file.

2. Add the P7_hideSelect(a) function JavaScript code, as listed above, to the end of the page.

3. Locate the last line of the P7_PMshow function, it will look like this:

  if(p7PMp[2]==1){if(!iem){P7_PManim(a,20);}}u.className="p7PMshow";
  }

-add the P7_hideSelect trigger on a new line, before the ending , so it looks like this:

if(p7PMp[2]==1){if(!iem){P7_PManim(a,20);}}u.className="p7PMshow";
 P7_hideSelect(1);
}

4. Locate the last line of the P7_PMclr function, it will look like this:

  for(i=tUU.length-1;i>-1;i--){P7_PMhide(tUU[i]);}}}
  }

add the P7_hideSlect(0) trigger on a new line, before the ending }, so it looks like this:

for(i=tUU.length-1;i>-1;i--){P7_PMhide(tUU[i]);}}}
  P7_hideSelect(0);
  }

5. Save the js file. Preserve your code modifications by following the instructions in infoBase artice#122, use p7popmenu_hs.js as the revised file name.

Back to the questions list