asked on

Point for ddoyle

Q:FORM elements appearing on top of higher Z-Indexed DIV.

A:
Use Scriptlet

Sample code:
<menupanecont.html>
<html>
<head>
<meta name="generator" value="Microsoft Scriptlet Wizard">
<meta name="content-type" value="text/html; charset=iso-8859-1">
<script language=javascript for=george event=onclick>
alert("george was clicked!");
george.Text = "Hi I\'m George";
</script>

<script language=javascript for=frank event=onclick>
alert("frank was clicked!");
frank.Text = "Hi I\'m Frank";
if (george.style.display=="none")
{
george.style.display="block";
}
else
{
george.style.display="none";
}
</Script>

<Script language=javascript for=frank event=onscriptletevent(eventname,eventobject)>
myText.innerHTML= "Frank received a: " + eventname;
</Script>

<Script language=javascript>
function init()
{
george.color="#CCCFFF";
frank.color="#00CC00";
}
</Script>

<script language=javascript for=frank event=onmousemove>
george.Text = "X:" + event.x + " Y:" + event.y;
</Script>
</head>

<body bgcolor="#FFFFFF" onload="init()">

<div style='z-index:0'>
<form>
<select name=selblah>
<option>blah blah
<option>blah blah
<option>blah blah
</select>

<input type=button value='click me' onClick='george.style.visibility=""'>
<input type=button value='click me' onClick='frank.style.visibility=""'>
</form>
</div>

<object type="text/x-scriptlet" style="position:absolute;top:0;width:300;height:30;z-index:9999;visibility:hidden" id="george">
<param name=url value="MenuPane.html">
</object>

<object type="text/x-scriptlet" style="position:absolute;top:30;width:300;height:30;z-index:9999;visibility:hidden" id="frank">
<param name=url value="MenuPane.html">
</object>

<Span style="position:absolute;top:100" id=myText></Span>
</body>
</html>

<menupane.html>
<html>
<head>
<title>MenuPane Scriptlet</title>
</head>

<script language=JScript>

var description = new MenuPane;

function MenuPane()
{

this.get_Text = public_get_Text;
this.put_Text = public_put_Text;
this.put_color = public_put_color;
this.get_golor = public_get_color;

}

var Text;
var color;

function public_put_color(newValue)
{
color = newValue;
document.bgColor = color;
}

function public_get_color()
{
//return color;
return document.bgColor;
}

function public_get_Text()
{
return Text;
}

function public_put_Text(newValue)
{
Text = newValue;
headline.innerHTML = Text;
}

function blick()
{
headline.innerHTML = "This is a menu item";
external.bubbleEvent();
}

function bouse()
{
external.bubbleEvent();
}

function sendEvent(evt)
{
external.raiseEvent(evt,document);
}
</script>

<body language=JScript onclick=blick() onmousemove=bouse() onmouseover=sendEvent("mouseover") onmouseout=sendEvent("mouseout") bgcolor="#FFFCCC">
<DIV id=bigdiv style="position:absolute;top:0;width:400;height:50;">
<SPAN style="position:absolute;top:0;" id=headline></SPAN>
</Div>

</body>
</html>

Although buggy, it does work.

ASKER CERTIFIED SOLUTION

ddoyle

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PBall

ASKER

Great, thanks again.