By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,869 Members | 1,742 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,869 IT Pros & Developers. It's quick & easy.

tooltip alignment help

omerbutt
100+
P: 638
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
Expand|Select|Wrap|Line Numbers
  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5.         <title><?=SITE_TITLE;?></title>
  6. <style type="text/css">
  7. .popup {
  8.     position:absolute;
  9.     visibility:hidden;
  10. }
  11. </style>
  12. <script type="text/javascript">
  13. function putIF(hldr,x,y,w,h,url){// description of the arguments below
  14.         if(prevTip!=url){
  15.            holder=document.getElementById(hldr); //wrap around div
  16.            holder.innerHTML="";
  17.            holder.style.visibility='visible';
  18.            holder.style.display='block';  // the div gets styled
  19.            holder.style.position='absolute';
  20.            holder.style.left=x;
  21.            holder.style.top=y;
  22.            holder.style.width=w;
  23.            var page="tooltip_new.php?item_name="+url;
  24.            xmlTip=GetXmlHttpObject();
  25.            if(xmlTip==null){
  26.                 msg_divs('error','400px','780px','400px','400px',"You Have to upgrade the browser");
  27.                return;
  28.            }else{
  29.                 xmlTip.onreadystatechange=$_tip;
  30.                 xmlTip.open("GET",page,true);
  31.                 xmlTip.send(null);
  32.            }
  33.        }
  34.        prevTip=url;
  35.     }
  36.     function $_tip(){
  37.         if(xmlTip.readyState==4){
  38.             if(xmlTip.status==200){
  39.         document.getElementById("tip").innerHTML=xmlTip.responseText;;
  40.             }
  41.         }
  42.     }
  43.     function closeIF(obj){// the close is simple we just clear out the div
  44.         document.getElementById(obj).innerHTML='';
  45.         holder.style.visibility='hidden';
  46.         holder.style.display='none';
  47.         prevTip="";
  48.        }
  49. </script>
  50. </head>
  51. <body>
  52. <tr>
  53.      <td align="left" valign="top" width="727">
  54.       <div id="AddOn_div">
  55.          <table cellspacing="0" cellpadding="0" border="0" align="left" width="727">
  56.                 <tr>
  57.                   <td align="left" valign="top" width="9"></td>
  58.                   <td align="left" valign="top" width="133">
  59.                       <div  id="ahsi_div" onmouseover="putIF('tip','210px','780px','400px','400px','AHSI');" onmouseout="closeIF('tip');">
  60. <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;" />
  61.                      </div>
  62.                 </td>
  63.                  <td align="left" valign="top" width="9"></td>
  64.                  <td align="left" valign="top" width="133">
  65.                     <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;" />
  66.                    </div>
  67.                </td>
  68.                <td align="left" valign="top" width="9"></td>
  69.                <td align="left" valign="top" width="133">
  70.                    <div id="omega_div" onmouseover="putIF('tip','495px','780px','400px','400px','OMEGA');" onmouseout="closeIF('tip');">
  71. <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;" />
  72.                   </div>
  73.             </td>
  74.             <td align="left" valign="top" width="9"></td>
  75.             <td align="left" valign="top" width="133">
  76.                <div id="cr_39_div" onmouseover="putIF('tip','635px','780px','400px','400px','CR-39');" onmouseout="closeIF('tip');">
  77. <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;" />
  78.               </div>
  79.            </td>
  80.            <td align="left" valign="top" width="9"></td>
  81.            <td align="left" valign="top" width="133">
  82.                <div id="quadcore_div" onmouseover="putIF('tip','635px','780px','400px','400px','CR-39');" onmouseout="closeIF('tip');">
  83. <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;" />
  84.               </div>
  85.           </td>
  86.           <td align="left" valign="top" width="11">
  87.              <img src="images/submitdesign_27.gif" width="11" height="60" border="0" alt="" />
  88.          </td>
  89. </tr>
  90. </table>
  91. </div>
  92. </td>
  93. </tr>
  94. <div id="tip" class="popup" style="width:324px;"></div>
  95. </body>
  96.  

file_name=tooltip_new.php(the file from where the toltip text is responsed)

Expand|Select|Wrap|Line Numbers
  1. <?
  2.     include("includes/config.php");
  3.     $item=$_GET["item_name"];
  4.     $sql_tip="SELECT
  5.                     item_text,item_name,item_heading
  6.                 FROM
  7.                     myrage_tooltip
  8.                 WHERE(myrage_tooltip.item_name ='$item')";
  9.     $res_tip=mysql_query($sql_tip)or die(mysql_error()."<br />".$sql_tip);
  10.     if(mysql_num_rows($res_tip)){
  11.         $f=mysql_fetch_array($res_tip);
  12.     }
  13. ?>
  14. <link rel="stylesheet" type="text/css" href="includes/styles.css"/>
  15. <table cellspacing="0" cellpadding="0" border="0" align="center" width="324">
  16.     <tr><td align="center" valign="top"><img src="images/tooltip_anchor.gif" width="15" height="8" border="0" alt="" /></td></tr>
  17.     <tr><td align="center" valign="middle" style="background-image:url(images/tooltip_head.gif);" class="text_greyblack_12"><?=$f["item_heading"];?></td></tr>
  18.     <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>
  19.     <tr>
  20.         <td align="center" valign="bottom" width="324">
  21.             <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;">
  22.                 <tr><td align="center" valign="middle">&nbsp;</tr>
  23.                 <tr><td align="center" valign="middle" width="300"><?=$f["item_text"];?></td></tr>
  24.             </table>
  25.         </td>
  26.     </tr>
  27.     <tr><td align="center" valign="middle"><img src="images/tooltip_bottom.gif" width="324" height="14" border="0" align="" /></td></tr>
  28. </table>
  29.  
Thanks for any help in advance
regards ,
Omer
Jul 28 '08 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.