...

View Full Version : Page keeps reloading because of tooltip.



larsm
06-01-2009, 11:13 AM
Hi,

I made a form with a tooltip function when you hover over an input field.
But when I load the page, after about 500ms, the page turns white and the ""Loading..."-message from the browser stays forever.
I found out that this is because of the tooltip function, especially the code:

document.write(table)

Here's the javascript:

//////// Tooltip code
///////////////////////
var offsetfromcursorX=12
var offsetfromcursorY=10
var offsetdivfrompointerX=10
var offsetdivfrompointerY=14
var table = '<div id="tooltip" style="display:none; position:absolute;z-index: 100;opacity: .9;filter: alpha(opacity=90);">';
table += '<table border="0" cellpadding="0" cellspacing="0">';
table += ' <tr><td width="1" height="8" background="/images/tooltip_top.gif"></td>';
table += ' <td align="left" background="/images/tooltip_top.gif"><img src="/images/tooltip_arrow.gif" width="20" height="8" /></td>';
table += ' <td width="1" background="/images/tooltip_top.gif"></td>';
table += ' </tr><tr>';
table += ' <td bgcolor="#b1bfcc"></td>';
table += ' <td bgcolor="#edf4fa"><div style="padding:10px; font-family:\'Trebuchet MS\'; font-size:12px; color:black" id="tooltipinner"></div></td>';
table += ' <td bgcolor="#b1bfcc"></td>';
table += ' </tr><tr>';
table += ' <td height="1" bgcolor="#b1bfcc"></td>';
table += ' <td bgcolor="#b1bfcc"></td>';
table += ' <td bgcolor="#b1bfcc"></td>';
table += ' </tr>';
table += '</table>';
table += '</div>';
document.write(table)
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj = document.all? document.all["tooltipinner"] : document.getElementById? $jt("tooltipinner") : ""
var pointerobj = document.all? document.all["tooltip"] : document.getElementById? $jt("tooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if(thetext != ""){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px";
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor;
tipobj.innerHTML=thetext;
enabletip=true;
return false;
}
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
if (rightedge<tipobj.offsetWidth){
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
tipobj.style.left=(curX+offsetfromcursorX-offsetdivfrompointerX-25)+"px" //position the horizontal position of the menu where the mouse is positioned
pointerobj.style.left=(curX+offsetfromcursorX-25)+"px"
}
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=(curY-tipobj.offsetHeight-offsetfromcursorY+15)+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
//tipobj.style.visibility="visible"
tipobj.style.display = "block"
pointerobj.style.display = "block"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
//tipobj.style.visibility="hidden"
tipobj.style.display = "none"
pointerobj.style.display = "none"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip

And here's the input field:

<td width="150" class="left" >
<label >Voorletters <span class="required">*</span></label>
</td>
<td class="right" >
<input type="text" size="30" name="q0_Voorletters" class="text" value="" id="q0" onmouseover="ddrivetip('Vul geen punten in, alleen letters.', 200)" onmouseout="hideddrivetip()" onblur="validate(this,'RequiredAlphabetic')" maxlength="7" maxsize="7" />
</td>
</tr>

I hope someone can help me.

Best regards,
larsm

abduraooft
06-02-2009, 08:23 AM
I'd recommend to search for some good dhtml+tooltips (http://www.google.com/search?q=dhtml+tooltip)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum