Jump to content

Firefox Blinks My Layer !!

iPixel

By iPixel
in Javascript Help

 Share

Recommended Posts

iPixel Advanced Member

iPixel

Posted
Posted

Long story short ! This works fine in IE6 but blinks / flickers in Firefox 2.0+

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#xLayer
{
z-index: 2;
position:absolute; 
visibility: hidden; 
padding: 5px;
}
#xLayer2
{
z-index: 2;
position:absolute; 
visibility: hidden; 
padding: 5px;
}
</style>
<script language="javascript">
<!--
var cX = 0; var cY = 0;
//var all = document.all ¦¦ document.getElementsByTagName('*');
//var ie4=document.all;
//var ns6=document.getElementById&&!document.all;

function UpdateCursorPositionDocAll(e)
{
cX = event.clientX; cY = event.clientY;
}

function UpdateCursorPosition(e)
{
cX = e.pageX; cY = e.pageY;
}

function AssignPosition(d) 
{
// This checks once more which layer is being used and positions it accordingly.
Page = document.body.clientWidth;
if (Page - cX > 300)
{
	xLayer.style.left = (cX-25) + "px";
	xLayer.style.top = (cY-5) + "px";
}
else
{
	xLayer2.style.left = (cX-225) + "px";
	xLayer2.style.top = (cY-3) + "px";
}
}

// document.getElementById&&!document.all
if(document.all)
{ 
document.onmousemove = UpdateCursorPositionDocAll; 
}
else
{ 
document.onmousemove = UpdateCursorPosition; 
}

function showLayer(ALayerName)
{
if (ALayerName != "")
{
  //(document.layers) ? eval("document." + ALayerName + ".visibility = 'show'") : eval("document.all['" + ALayerName + "'].style.visibility = 'visible'");
  document.getElementById(ALayerName).style.visibility="visible";
  AssignPosition('ALayerName');
}
}

function hideLayer(ALayerName)
{
if (ALayerName != "")
{
   //(document.layers) ? eval("document." + ALayerName + ".visibility = 'hide'") : eval("document.all['" + ALayerName + "'].style.visibility = 'hidden'");
   document.getElementById(ALayerName).style.visibility="hidden";
}
}

function showSelector(selectorName)
{
if (selectorName == "layer")
{
Page = document.body.clientWidth;
// here we check which layer should be used. This is done becuase of the tooltip bubble, the pointer has to be on the correct side.
if (Page - cX > 300)
{
    showLayer('xLayer');
}
else
{
showLayer('xLayer2');
}
   
}
if (selectorName == "hide")
{
   hideLayer('xLayer');
   hideLayer('xLayer2');
}
}
</script>
</head>
<body id="body">


blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla
blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <a href="#" onMouseOver="showSelector('layer')" onMouseOut="showSelector('hide')">BTU</a> blah blah blah
blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla
blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla !<BR>
<div id="xLayer">
<table border="0" cellpadding="0" cellspacing="0" width="250">
  <tr>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="234" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r1_c1" src="images/asd_r1_c1.gif" width="250" height="26" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="26" border="0"></td>
  </tr>
  <tr>
   <td><img name="TechDefBlip_r2_c1" src="images/Tech Def Blip_r2_c1.gif" width="8" height="100%" border="0"></td>
   <td background="images/Tech Def Blip_r2_c2.gif" height="100%">
   <p style="font-size: 13px;">1 - In North America, the term "BTU" is used to describe the heat value (energy content) of fuels, 
and also to describe the power of heating and cooling systems, such as furnaces, stoves, 
barbecue grills, and air conditioners. When used as a unit of power, BTU per hour (BTU/h) 
is understood, though this is often confusingly abbreviated to just "BTU". In the UK and 
other parts of the world it is written BTU.</p>
   </td>
   <td><img name="TechDefBlip_r2_c3" src="images/Tech Def Blip_r2_c3.gif" width="8" height="100%" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="90" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r3_c1" src="images/Tech Def Blip_r3_c1.gif" width="250" height="15" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="15" border="0"></td>
  </tr>
</table>
</div>
<div id="xLayer2">
<table border="0" cellpadding="0" cellspacing="0" width="250">
  <tr>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="234" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r1_c1" src="images/Tech Def Blip_r1_c1.gif" width="250" height="26" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="26" border="0"></td>
  </tr>
  <tr>
   <td><img name="TechDefBlip_r2_c1" src="images/Tech Def Blip_r2_c1.gif" width="8" height="100%" border="0"></td>
   <td background="images/Tech Def Blip_r2_c2.gif" height="100%">
   <p style="font-size: 13px;">2 - In North America, the term "BTU" is used to describe the heat value (energy content) of fuels, 
and also to describe the power of heating and cooling systems, such as furnaces, stoves, 
barbecue grills, and air conditioners. When used as a unit of power, BTU per hour (BTU/h) 
is understood, though this is often confusingly abbreviated to just "BTU". In the UK and 
other parts of the world it is written BTU.</p>
   </td>
   <td><img name="TechDefBlip_r2_c3" src="images/Tech Def Blip_r2_c3.gif" width="8" height="100%" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="90" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r3_c1" src="images/Tech Def Blip_r3_c1.gif" width="250" height="15" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="15" border="0"></td>
  </tr>
</table>
</div>
</body>
</html>

 

Thanks for the help in advance.

~iPixel

Link to comment
Share on other sites
Goose Member

Goose

Posted
Posted

Not a bug in firefox, a bug in the code. Basically what you are doing is displaying your popup under the mouse which is causing the onmouseout even to fire. You need to have your popup appear outside of the mouse. Try this code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#xLayer
{
z-index: 2;
position:absolute; 
visibility: hidden; 
padding: 5px;
}
#xLayer2
{
z-index: 2;
position:absolute; 
visibility: hidden; 
padding: 5px;
}
</style>
<script language="javascript">
<!--
var cX = 0; var cY = 0;
//var all = document.all ¦¦ document.getElementsByTagName('*');
//var ie4=document.all;
//var ns6=document.getElementById&&!document.all;

function UpdateCursorPositionDocAll(e)
{
cX = event.clientX; cY = event.clientY;
}

function UpdateCursorPosition(e)
{
cX = e.pageX; cY = e.pageY;
}

function AssignPosition(d) 
{
// This checks once more which layer is being used and positions it accordingly.
Page = document.body.clientWidth;
if (Page - cX > 300)
{
	xLayer.style.left = (cX-25) + "px";
	xLayer.style.top = (cY+5) + "px";
}
else
{
	xLayer2.style.left = (cX-225) + "px";
	xLayer2.style.top = (cY-3) + "px";
}
}

// document.getElementById&&!document.all
if(document.all)
{ 
document.onmousemove = UpdateCursorPositionDocAll; 
}
else
{ 
document.onmousemove = UpdateCursorPosition; 
}

function showLayer(ALayerName)
{
if (ALayerName != "")
{
  //(document.layers) ? eval("document." + ALayerName + ".visibility = 'show'") : eval("document.all['" + ALayerName + "'].style.visibility = 'visible'");
  document.getElementById(ALayerName).style.visibility="visible";
  AssignPosition('ALayerName');
}
}

function hideLayer(ALayerName)
{
if (ALayerName != "")
{
   //(document.layers) ? eval("document." + ALayerName + ".visibility = 'hide'") : eval("document.all['" + ALayerName + "'].style.visibility = 'hidden'");
   document.getElementById(ALayerName).style.visibility="hidden";
}
}

function showSelector(selectorName)
{
if (selectorName == "layer")
{
Page = document.body.clientWidth;
// here we check which layer should be used. This is done becuase of the tooltip bubble, the pointer has to be on the correct side.
if (Page - cX > 300)
{
    showLayer('xLayer');
}
else
{
showLayer('xLayer2');
}
   
}
if (selectorName == "hide")
{
   hideLayer('xLayer');
   hideLayer('xLayer2');
}
}
</script>
</head>
<body id="body">


blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla
blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <a href="#" onMouseOver="showSelector('layer')" onMouseOut="showSelector('hide')">BTU</a> blah blah blah
blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla
blah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah blablah blah bla !<BR>
<div id="xLayer">
<table border="0" cellpadding="0" cellspacing="0" width="250">
  <tr>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="234" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r1_c1" src="images/asd_r1_c1.gif" width="250" height="26" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="26" border="0"></td>
  </tr>
  <tr>
   <td><img name="TechDefBlip_r2_c1" src="images/Tech Def Blip_r2_c1.gif" width="8" height="100%" border="0"></td>
   <td background="images/Tech Def Blip_r2_c2.gif" height="100%">
   <p style="font-size: 13px;">1 - In North America, the term "BTU" is used to describe the heat value (energy content) of fuels, 
and also to describe the power of heating and cooling systems, such as furnaces, stoves, 
barbecue grills, and air conditioners. When used as a unit of power, BTU per hour (BTU/h) 
is understood, though this is often confusingly abbreviated to just "BTU". In the UK and 
other parts of the world it is written BTU.</p>
   </td>
   <td><img name="TechDefBlip_r2_c3" src="images/Tech Def Blip_r2_c3.gif" width="8" height="100%" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="90" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r3_c1" src="images/Tech Def Blip_r3_c1.gif" width="250" height="15" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="15" border="0"></td>
  </tr>
</table>
</div>
<div id="xLayer2">
<table border="0" cellpadding="0" cellspacing="0" width="250">
  <tr>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="234" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r1_c1" src="images/Tech Def Blip_r1_c1.gif" width="250" height="26" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="26" border="0"></td>
  </tr>
  <tr>
   <td><img name="TechDefBlip_r2_c1" src="images/Tech Def Blip_r2_c1.gif" width="8" height="100%" border="0"></td>
   <td background="images/Tech Def Blip_r2_c2.gif" height="100%">
   <p style="font-size: 13px;">2 - In North America, the term "BTU" is used to describe the heat value (energy content) of fuels, 
and also to describe the power of heating and cooling systems, such as furnaces, stoves, 
barbecue grills, and air conditioners. When used as a unit of power, BTU per hour (BTU/h) 
is understood, though this is often confusingly abbreviated to just "BTU". In the UK and 
other parts of the world it is written BTU.</p>
   </td>
   <td><img name="TechDefBlip_r2_c3" src="images/Tech Def Blip_r2_c3.gif" width="8" height="100%" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="90" border="0"></td>
  </tr>
  <tr>
   <td colspan="3"><img name="TechDefBlip_r3_c1" src="images/Tech Def Blip_r3_c1.gif" width="250" height="15" border="0"></td>
   <td><img src="images/spacer.gif" width="1" height="15" border="0"></td>
  </tr>
</table>
</div>
</body>
</html>

 

I edited line 45 from xLayer.style.top = (cY-5) + "px"; to xLayer.style.top = (cY+5) + "px";.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.