tooltip alignment help  | Needs Regular Fix | | Join Date: Nov 2006 Location: Earth Obviously :P
Posts: 344
| |
hi there i have tried to make my own AJAX tooltip it works all right and every things fine and the tooltip display right under the element i want to display untill unless i switch my resolution, it shifts from it correct position i am setting its
x and y position i havent done it before , always used the prototypes for such things ,here is my code snippet -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
-
<title><?=SITE_TITLE;?></title>
-
<style type="text/css">
-
.popup {
-
position:absolute;
-
visibility:hidden;
-
}
-
</style>
-
<script type="text/javascript">
-
function putIF(hldr,x,y,w,h,url){// description of the arguments below
-
if(prevTip!=url){
-
holder=document.getElementById(hldr); //wrap around div
-
holder.innerHTML="";
-
holder.style.visibility='visible';
-
holder.style.display='block'; // the div gets styled
-
holder.style.position='absolute';
-
holder.style.left=x;
-
holder.style.top=y;
-
holder.style.width=w;
-
var page="tooltip_new.php?item_name="+url;
-
xmlTip=GetXmlHttpObject();
-
if(xmlTip==null){
-
msg_divs('error','400px','780px','400px','400px',"You Have to upgrade the browser");
-
return;
-
}else{
-
xmlTip.onreadystatechange=$_tip;
-
xmlTip.open("GET",page,true);
-
xmlTip.send(null);
-
}
-
}
-
prevTip=url;
-
}
-
function $_tip(){
-
if(xmlTip.readyState==4){
-
if(xmlTip.status==200){
-
document.getElementById("tip").innerHTML=xmlTip.responseText;;
-
}
-
}
-
}
-
function closeIF(obj){// the close is simple we just clear out the div
-
document.getElementById(obj).innerHTML='';
-
holder.style.visibility='hidden';
-
holder.style.display='none';
-
prevTip="";
-
}
-
</script>
-
</head>
-
<body>
-
<tr>
-
<td align="left" valign="top" width="727">
-
<div id="AddOn_div">
-
<table cellspacing="0" cellpadding="0" border="0" align="left" width="727">
-
<tr>
-
<td align="left" valign="top" width="9"></td>
-
<td align="left" valign="top" width="133">
-
<div id="ahsi_div" onmouseover="putIF('tip','210px','780px','400px','400px','AHSI');" onmouseout="closeIF('tip');">
-
<img id="ahsi" name="off" src="images/ahsi_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,12);" style="cursor:pointer;" />
-
</div>
-
</td>
-
<td align="left" valign="top" width="9"></td>
-
<td align="left" valign="top" width="133">
-
<div id="pu-nc_wrap_div" onmouseover="putIF('tip','350px','780px','400px','400px','PUNC');" onmouseout="closeIF('tip');"><img id="pu-nc_wrap" name="off" src="images/pu-nc_wrap_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,8);" style="cursor:pointer;" />
-
</div>
-
</td>
-
<td align="left" valign="top" width="9"></td>
-
<td align="left" valign="top" width="133">
-
<div id="omega_div" onmouseover="putIF('tip','495px','780px','400px','400px','OMEGA');" onmouseout="closeIF('tip');">
-
<img id="omega" name="off" src="images/omega_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,15);" style="cursor:pointer;" />
-
</div>
-
</td>
-
<td align="left" valign="top" width="9"></td>
-
<td align="left" valign="top" width="133">
-
<div id="cr_39_div" onmouseover="putIF('tip','635px','780px','400px','400px','CR-39');" onmouseout="closeIF('tip');">
-
<img id="cr_39" name="off" src="images/cr_39_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,14);" style="cursor:pointer;" />
-
</div>
-
</td>
-
<td align="left" valign="top" width="9"></td>
-
<td align="left" valign="top" width="133">
-
<div id="quadcore_div" onmouseover="putIF('tip','635px','780px','400px','400px','CR-39');" onmouseout="closeIF('tip');">
-
<img id="quadcore" name="off" src="images/quadcore_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,17);" style="cursor:pointer;" />
-
</div>
-
</td>
-
<td align="left" valign="top" width="11">
-
<img src="images/submitdesign_27.gif" width="11" height="60" border="0" alt="" />
-
</td>
-
</tr>
-
</table>
-
</div>
-
</td>
-
</tr>
-
<div id="tip" class="popup" style="width:324px;"></div>
-
</body>
-
file_name=tooltip_new.php(the file from where the toltip text is responsed) -
<?
-
include("includes/config.php");
-
$item=$_GET["item_name"];
-
$sql_tip="SELECT
-
item_text,item_name,item_heading
-
FROM
-
myrage_tooltip
-
WHERE(myrage_tooltip.item_name ='$item')";
-
$res_tip=mysql_query($sql_tip)or die(mysql_error()."<br />".$sql_tip);
-
if(mysql_num_rows($res_tip)){
-
$f=mysql_fetch_array($res_tip);
-
}
-
?>
-
<link rel="stylesheet" type="text/css" href="includes/styles.css"/>
-
<table cellspacing="0" cellpadding="0" border="0" align="center" width="324">
-
<tr><td align="center" valign="top"><img src="images/tooltip_anchor.gif" width="15" height="8" border="0" alt="" /></td></tr>
-
<tr><td align="center" valign="middle" style="background-image:url(images/tooltip_head.gif);" class="text_greyblack_12"><?=$f["item_heading"];?></td></tr>
-
<tr><td align="center" valign="bottom" style="background-color:#FFB100;"><img src="images/tooltip_border.gif" width="300" height="2" border="0" alt="" /></td></tr>
-
<tr>
-
<td align="center" valign="bottom" width="324">
-
<table cellpadding="0" cellpadding="0" align="center" width="324" border="0" style="background-color:#FFB100; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; text-align:center;">
-
<tr><td align="center" valign="middle"> </tr>
-
<tr><td align="center" valign="middle" width="300"><?=$f["item_text"];?></td></tr>
-
</table>
-
</td>
-
</tr>
-
<tr><td align="center" valign="middle"><img src="images/tooltip_bottom.gif" width="324" height="14" border="0" align="" /></td></tr>
-
</table>
-
Thanks for any help in advance
regards ,
Omer
|  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,510 network members.
|
