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!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can´t position text box on firefox

Status
Not open for further replies.
mpartarrieu

mpartarrieu

Programmer
Nov 21, 2006
34
ES
The following piece of code works as follows:

When you mouseover an image, function show() is called and a hidden div that contains certain text is shown. Function show() calls two secondary functions: getPosTop() and getPosLeft(), each of which tells where the image is placed on the page, so that the hidden div is placed exactly on the right of the image your mouseover.

This is the code:

Code: 
<!-- Desarrollado por Michel Partarrieu - mpartarrieu@gmail.com -->

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="es">
<head>

<title>BPO Asia</title>

<link rel="stylesheet" href="styles.css" type="text/css">

<script type="text/javascript" src="functions.js" language="javascript1.2"></script>

<style type="text/css">
.sub_box {
	position: absolute;
	background-color: #FFFFFF;
	border: 1px solid #4F4F4F;
	padding: 5px;
	font-size: 12px;
	line-height: 15px;
	font-family: "MS Sans Serif",Tahoma,Verdana,Helvetica,Arial,sans-serif;
	font-weight: bold;
}
</style>

<script>
<!--

var cm=null;
document.onclick = new Function("show(null)");

function getPosLeft(obj) {
  var curleft = 0;
  if(obj.offsetParent)
  while(1) {
    curleft += obj.offsetLeft;
    if(!obj.offsetParent)
    break;
    obj = obj.offsetParent;
    }
  else if(obj.x)
  curleft += obj.x;
  return curleft;
}

function getPosTop(obj) {
  var curtop = 0;
  if(obj.offsetParent)
  while(1) {
    curtop += obj.offsetTop;
    if(!obj.offsetParent)
    break;
    obj = obj.offsetParent;
    }
  else if(obj.y)
  curtop += obj.y;
  return curtop;
}

function show(el,m) {
  var m = document.getElementById(m);
  if (m) {
    m.style.display='';
    m.style.pixelLeft = getPosLeft(el) + 170;
    m.style.pixelTop = getPosTop(el);
    }
  if ((m!=cm) && (cm))
    cm.style.display='none';
    cm=m;
}

function keep(el,m) {
  var m = document.getElementById(m);
  if (m) {
    m.style.display='';
    m.style.pixelLeft = getPosLeft(el);
    m.style.pixelTop = getPosTop(el);
    }
  if ((m!=cm) && (cm)) cm.style.display='none';
  cm=m;
}

// -->
</script>


</head>

<body>

<table width="170" border="0" cellspacing="0" cellpadding="0">
 <tr><td><img src="icn/es_menu_2.gif" width="170" height="42" alt="" title="" border="0" onmouseover="show(this,'ds2'); return true;" onmouseout="show(null); return true;" /></td></tr>
 <tr><td><img src="icn/es_menu_3.gif" width="170" height="42" alt="" title="" border="0" onmouseover="show(this,'ds3'); return true;" onmouseout="show(null); return true;" /></td></tr>
 <tr><td><img src="icn/es_menu_4.gif" width="170" height="42" alt="" title="" border="0" onmouseover="show(this,'ds4'); return true;" onmouseout="show(null); return true;" /></td></tr>
</table>


<div id="ds2" class="sub_box" style="z-index:101; display: none; width: 120;" onmouseover="keep(this,'ds2');" onmouseout="show(null)">
Content of box when mouse is over img 1<br />
Content of box when mouse is over img 1<br />
Content of box when mouse is over img 1
</div>


<div id="ds3" class="sub_box" style="z-index:102; display: none; width: 154;" onmouseover="keep(this,'ds3');" onmouseout="show(null)">
Content of box when mouse is over img 2<br />
Content of box when mouse is over img 2<br />
Content of box when mouse is over img 2
</div>


<div id="ds4" class="sub_box" style="z-index:103; display: none; width: 204;" onmouseover="keep(this,'ds4');" onmouseout="show(null)">
Content of box when mouse is over img 3<br />
Content of box when mouse is over img 3<br />
Content of box when mouse is over img 3
</div>

</body>
</html>

The code is working perfect on IE, but not on Firefox. More precisely, the secondary functions are not working, so that on Firefox the hidden div is placed under de images instead of on the right of each one of them.

Any ideas?? Thanks in advance.
 
Sort by date Sort by votes
pixelLeft and pixelTop are not standard styles, you need to use left and top. Additionally, you need to specify the units of measure for firefox to understand. Are you setting the left value to 20 pixels? 20 ems? 20%? Firefox (correctly) requires you to specify. Make the changes to the following functions:
Code: 
function show(el,m) {
  var m = document.getElementById(m);
  if (m) {
    m.style.display='';
[gray][i]//make sure to put parentheses around the addition of 170 so that it doesn't do string concatenation instead[/i][/gray]
    m.style.[!]left[/!] = (getPosLeft(el) + 170) + [!]"px"[/!];
    m.style.[!]top[/!] = getPosTop(el) + [!]"px"[/!];
    }
  if ((m!=cm) && (cm))
    cm.style.display='none';
    cm=m;
}

function keep(el,m) {
  var m = document.getElementById(m);
  if (m) {
    m.style.display='';
    m.style.[!]left[/!] = getPosLeft(el) [!]+ "px"[/!];
    m.style.[!]top[/!] = getPosTop(el) [!]+ "px"[/!];
    }
  if ((m!=cm) && (cm)) cm.style.display='none';
  cm=m;
}

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Thanks. That solve the problem and now my code is working perfect. You rock, kaht!!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
762
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
594
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
621
JScannell
JScannell
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
174
Samthyr
Samthyr
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
167
chikwendu
chikwendu

Part and Inventory Search

Sponsor

Back
Top