| home / programming / javascript / form |   [previous] |
|
|
|
Form Elements Overlapping A Styled Layer
complete working code for the example shown.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"/>
<meta name="Author" content="Khalid Ali"/>
<title>CSS Menu overlapping by Select Box work around.</title>
<style type="text/css">
.menuBlock{position:relative;top:14px;width:165px;border:2px solid black;background-color:menu;font-family:Verdana;
line-height:20px;cursor:default;font-size:14px;z-index:100;visibility:visible;
}
#subMenus{position:relative;left:15px;top:15px;width:171px;padding-left:2px;padding-right:2px;border:2px solid black;
background-color:menu;font-family:Verdana;line-height:20px;cursor:default;font-size:14px;z-index:100;visibility:hidden;
}
.highLite{background-color:gray;color:#FFFFFF;padding-left:10px;padding-right:10px;}
#lb_1{position:absolute;left:10px;top:40px;
}
</style>
<script type="text/javascript">
var isActive = false;
function menuItem(url,text){
this.url = url;
this.text = text;
}
function showMenu(){
isActive = true;
document.getElementById("lb_1").style.visibility="hidden";
document.getElementById("subMenus").style.visibility="visible";
}
function hideMenu(){
isActive = false;
setTimeout('hide()',100);
}
function hide(){
if(!isActive){
document.getElementById("subMenus").style.visibility = "hidden";
document.getElementById("lb_1").style.visibility="visible";
}
}
function openWin(url){
window.open(url,"newWin");
}
function setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = "Gray";
menuItem.style.color = "#FFFFFF"
}
function setDefault(menuItem){
isActive = false;
menuItem.style.backgroundColor = "";
menuItem.style.color = ""
hideMenu();
}
function init(){
document.getElementById("main").style.top = (document.all)?"56px":"72px";
}
</script>
</head>
<body onload="init();">
<div id="main" class="table-with-thin-border" style="position:absolute;width:200px;">
<div id="menuBlock" class="menuBlock" onmouseover="showMenu();" onmouseout="hideMenu();">CSS Menu</div>
<div id="subMenus" >
<div id="0" onclick="openWin('http://netscape.net');" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >Netscape</div>
<div id="1" onclick="openWin('http://mozilla.org');" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >Mozilla</div>
<div id="2" onclick="openWin('http://apache.org');" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >Apache</div>
<div id="3" onclick="openWin('http://w3c.org');" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >W3C</div>
</div>
<form name="form1" action="">
<select id="lb_1" name="lb_1">
<option value="-1"/>Select one
<option value="1"/>One
<option value="2"/>Two
<option value="3"/>Three
</select>
</form>
</div>
<p align="center" class="text-small-bold">SELECT Element Overlapping CSS/JS Menu Workaround.</p>
<div style="position:absolute;left:250px;">
<table class="table-with-thin-border" style="width:300px;">
<tr>
<td valign="top">
<p class="small-text-bold">Description</p>
All html documents have 2 types of elements on them
<span class="heading">Windowed Elements</span>
<ol>
<li>SELECT elements.</li>
<li><OBJECT> tag elements. </li>
<li>Plug-ins. </li>
<li>Dynamic HTML (DHTML) scriptlets. </li>
<li>IFRAMEs in IE 5.01 and earlier.</li>
</ol>
All windowed elements are painted on top of all of the windowless elements
by default.This means a CSS javascript menu will appear under the SELECT element or frame element.
<br/>
<br/>
<span class="heading">Windowless Elements</span>
<ol>
<li>Most DHTML elements, such as hyperlinks or tables. </li>
<li>IFRAMEs in Internet Explorer 5.5 and later.</li>
</ol><br/>
</td>
</tr>
</table>
</body>
</html>
Khalid Ali is a freelance developer who works out of Calgary,
Alberta, Canada. Over the past several years he has participated in projects using
various programming languages, including VB, C/C++ and Java. His web related
experience includes projects using Java servlets/jsp XML/XSL and Javascript/DHTML/XSS/HTML.
Khalid can be reached at via email at: k_ali@shaw.ca
| home / programming / javascript / form | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: June 2, 2003
Revised: June 2, 2003
URL: http://webreference.com/programming/javascript/form
