Fixing a layer after dynamic showing it

Quasibobo · Sep 17, 2004

Hello,

The problem I'm having is that I am (still) unsuccesfull in fixing a layer after I made it visible with an onMouseover. I know this problably doesn't make any sense so please take a look at http://home.planet.nl/~munst264/stuff/.

Go over the black or white square and try to click on of the numbers, or at least that's what I want to be able to. Can someone help me??

Don't eat yellow snow!

LFI · Sep 17, 2004

It took a little playing-with, but how does this work for you?:

Code:

 <script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function show_choose(id, event) {
 tempX = event.clientX; [b]//different[/b]
 tempY = event.clientY; [b]//different[/b]
 document.getElementById(id).style.top = tempY;
 document.getElementById(id).style.left = tempX;
 document.getElementById(id).style.visibility = "visible";
 [b]//no messing with 'fixed' and 'absolute' anywhere
}

function show(id) {
 [b]//DON'T show if onmouseover of black or white square
 // was triggered when 'Choose' DIV closed with it's onclick
 // event.[/b]
 if (!clicked && document.getElementById(id).style.visibility != "visible")
	{
		show_choose(id, event);
	}
}

var mouseoverChooser1 = false; [b]//true when over black or white square[/b]
var mouseoverChooser2 = false; [b]//true when over 'Choose' DIV[/b]
var clicked = false; [b]//true when 'Choose' DIV clicked on[/b]
function maybeHide(id)
{
 [b]//only hide if mouse not over black or white square or 'Choose' DIV[/b]
 setTimeout("if(!mouseoverChooser1 && !mouseoverChooser2){hide('"+id+"');}", 100);
}

function hide(id) {
 document.getElementById(id).style.visibility = "hidden";
 [b]//reset clicked to false if mouse not over black or white square[/b]
 setTimeout("if(!mouseoverChooser1){clicked=false}", 100);
}
//-->
</script>
<body>
</div>
<table id="b3" width="80" height="120" border="0" cellpadding="0" cellspacing="0" bgcolor="000000" [b]onMouseOver="mouseoverChooser1=true;show('Choose');" onMouseOut="clicked=false;mouseoverChooser1=false;maybeHide('Choose');"[/b]>
  <tr>
    <td><div align="center"></div></td>
  </tr>
</table>
&nbsp;
<table id="w3" width="80" height="120" border="0" cellpadding="0" cellspacing="0" bgcolor="FFFFFF" [b]onMouseOver="mouseoverChooser1=true;show('Choose');" onMouseOut="clicked=false;mouseoverChooser1=false;maybeHide('Choose');"[/b] style="border: 1px solid black;">
  <tr>
    <td><div align="center"></div></td>
  </tr>
</table>


<div id="Choose" style="position:[b]absolute[/b]; width:200px; height:39px; z-index:0; visibility: hidden;" [b]onMouseOver="mouseoverChooser2=true;" onMouseOut="mouseoverChooser2=false;maybeHide('Choose')" onclick="clicked=true;mouseoverChooser2=false;hide('Choose');"[/b]> 
  <table width="300" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid black;">
    <tr bgcolor="#FFFFFF"> 
      <td id="w0" width="25px"> <div align="center"><a href="#" onClick=[b]"window.location='[URL unfurl="true"]http://www.google.com';"[/URL][/b]>[b]<!-- for example-->[/b]0</a></div></td>
      <td id="w1" width="25px"> <div align="center">1</div></td>
      <td id="w1" width="25px"> <div align="center">2</div></td>
      <td id="w3" width="25px"> <div align="center">3</div></td>
      <td id="w4" width="25px"> <div align="center">4</div></td>
      <td id="w5" width="25px"> <div align="center">5</div></td>
      <td id="w6" width="25px"> <div align="center">6</div></td>
      <td id="w7" width="25px"> <div align="center">7</div></td>
      <td id="w8" width="25px"> <div align="center">8</div></td>
      <td id="w9" width="25px"> <div align="center">9</div></td>
      <td id="w10" width="25px"><div align="center">10</div></td>
      <td id="w11" width="25px"><div align="center">11</div></td>
    </tr>
    <tr bgcolor="#000000"> 
      <td id="b0" width="25px"> <div align="center"><font color="#FFFFFF">0</font></div></td>
      <td id="b1" width="25px"> <div align="center"><font color="#FFFFFF">1</font></div></td>
      <td id="b2" width="25px"> <div align="center"><font color="#FFFFFF">2</font></div></td>
      <td id="b3" width="25px"> <div align="center"><font color="#FFFFFF">3</font></div></td>
      <td id="b4" width="25px"> <div align="center"><font color="#FFFFFF">4</font></div></td>
      <td id="b5" width="25px"> <div align="center"><font color="#FFFFFF">5</font></div></td>
      <td id="b6" width="25px"> <div align="center"><font color="#FFFFFF">6</font></div></td>
      <td id="b7" width="25px"> <div align="center"><font color="#FFFFFF">7</font></div></td>
      <td id="b8" width="25px"> <div align="center"><font color="#FFFFFF">8</font></div></td>
      <td id="b9" width="25px"> <div align="center"><font color="#FFFFFF">9</font></div></td>
      <td id="b10" width="25px"> <div align="center"><font color="#FFFFFF">10</font></div></td>
      <td id="b11" width="25px"> <div align="center"><font color="#FFFFFF">11</font></div></td>
    </tr>
  </table>
</body>
</html>

Let me know if that makes/doesn't make sense. It got a little complicated, but it seems to work.

--Dave

Quasibobo · Sep 18, 2004

Well thanks,

Allthough it became somewhat more complicated it does the trick.

tnx a lot

Don't eat yellow snow!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Fixing a layer after dynamic showing it

Quasibobo

Programmer

LFI

Programmer

Quasibobo

Programmer

Similar threads

Part and Inventory Search

Sponsor