Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Page keeps reloading because of tooltip.

    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:
    Code:
    document.write(table)
    Here's the javascript:
    Code:
    //////// 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:
    Code:
      <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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend to search for some good dhtml+tooltips
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •