...
PDA

Maintain Visibility on Mouseout of a DIV

murrayw
07-08-2005, 03:39 PM
I'm trying to maintain a display on several divs when displayed. I activate the DIV display by a button. I close/hide the DIV on onmouseout of the DIV. However, when I mouseout at the top of the DIV, I want the DIV to maintain it's block display.

Here is a piece of the DIV:

<input type="text" name="displaytheme" value="" onclick="var picker = document.getElementById('PickTheme');readonly="readonly" style="width:379px; border:0px;" id="displaytheme"><span id="event.buttons.theme" name="event.buttons.theme" class="SpanButtonOver" style="background:#C6C3C6; width:16px height:16px" onmouseover="this.className='SpanButtonOver';" onmousedown="this.className='SpanButtonDown';this.childNodes[0].style.left='1px'; this.childNodes[0].style.top='1px';" onmouseout="document.getElementById(this.id + '.img').src='../images/img.combo.gif';this.className='SpanButtonOver';this.childNodes[0].style.left='0px'; this.childNodes[0].style.top='0px';" onmouseup="this.className='SpanButtonOver';this.childNodes[0].style.left='0px';this.childNodes[0].style.top='0px';" onclick="var picker = document.getElementById('PickTheme'); if(picker.style.display=='none'){picker.style.width=this.parentNode.offsetWidth; picker.style.display='block';}else {picker.style.display='none';}"><span style="position:relative;"><NOBR><img id="event.buttons.theme.img" name="event.buttons.theme.img" src="../images/img.combo.gif" border=0 align="absmiddle"></NOBR></span></span>
</span><span class="SpanButton" onmousedown="this.className='SpanButtonDown'" onmouseup="this.className='SpanButton'" onmouseout="this.className='SpanButton'" onmouseover="this.onclick=ShowHistory">&nbsp;...&nbsp;</span>

<div id="PickTheme" name="PickTheme" style="position:absolute; overflow:auto; left:0px; top:20px; background:white; border:1px solid black; height:100px; width:250px; display:none;" onmouseout="sclose('PickTheme')">

<table border="0" cellpadding="0" cellspacing="0" width="100%" onmouseover="sopen('PickTheme')">
<TR>
<TD onmouseover="sopen('PickTheme')"><input type="checkbox"></TD>
<TD onmouseover="sopen('PickTheme')" width="99%">Blue Sky Events<input type=hidden id="" value="Blue Sky Events"></TD>
</TR>

...


Here are the two functions:
function sopen(target)
{
obj=document.getElementById(target);
obj.style.display='block';
}

function sclose(target)
{
obj=document.getElementById(target);
obj.style.display='none';
}

Thank you,

Warren Murray
vwphillips
07-08-2005, 04:31 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function zxcInit(obj) {
ars=zxcInit.arguments;
for (zxc0=0;zxc0<ars.length;zxc0++){
obj=document.getElementById(ars[zxc0]);
obj.onmouseover=function(event) { zxcMseDown(event,this);}
}
}

function zxcMseDown(event,obj) {
zxcObj=obj;
// Left Right Top Bottom
zxcObj.pos=[zxcPos(zxcObj)[0],zxcPos(zxcObj)[0]+zxcObj.offsetWidth,zxcPos(zxcObj)[1],zxcPos(zxcObj)[1]+zxcObj.offsetHeight];
document.onmousemove=function(event){zxcDrag(event);}
}

function zxcMseUp(event) {
document.onmousemove=null; zxcDragX=-1; zxcDragY=-1;
}

function zxcDrag(event) {
zxcMse(event);
zxcCk=false;
document.Show.Show1.value='MseX = '+zxcMseX;
document.Show.Show2.value='MseY = '+zxcMseY;
if (zxcMseX<zxcObj.pos[0]){
document.Show.Show3.value='ExitLeft';
zxcCk=true;
}
else if (zxcMseX>zxcObj.pos[1]){
document.Show.Show3.value='ExitRight';
zxcCk=true;
}
else if (zxcMseY<zxcObj.pos[2]){
document.Show.Show3.value='ExitTop';
zxcCk=true;
}
else if (zxcMseY>zxcObj.pos[3]){
document.Show.Show3.value='ExitBottom';
zxcCk=true;
}
if (zxcCk){
document.onmousemove=null;
}
}

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
}

function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}


//-->
</script>
</head>

<body onload="zxcInit('D1','T1','T2','T3','T4');" >
<div id="D1" style="position:relative;top:100px;left:200px;width:100px;height:50px;background-color:red;" ></div>

<table border="1">
<tr>
<td width=50 id="T1">1</td>
<td width=50 id="T2">2</td>
</tr>
<tr>
<td id="T3">3</td>
<td id="T4">4</td>
</tr>
</table>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
</form>
</body>

</html>


Take it you can take it from there
murrayw
07-08-2005, 05:43 PM
I'm trying to decrypt it and I'm not doing well at all.

Warren
vwphillips
07-08-2005, 06:14 PM
decrypt?

if you run the code and mouse over an object you will see the mse coords in the text box

when you mseout you will see the side of the object the mouse left the obj

replace the 'document.Show.Show6's with the required calls.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum