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
file_name=toolt ip_new.php(the file from where the toltip text is responsed)
Thanks for any help in advance
regards ,
Omer
x and y position i havent done it before , always used the prototypes for such things ,here is my code snippet
Code:
<!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=toolt ip_new.php(the file from where the toltip text is responsed)
Code:
<?
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>
regards ,
Omer