Nothadoth Posted January 2, 2013 Share Posted January 2, 2013 Hey guys, im not very good with javascript so I used a script from DynamicDrive.com to give me a tooltip on mouse over for a div. It works fine, except for if I want to use a php variable as the tooltip text. Why? Here is the javascript code:var offsetfromcursorX=22 //Customize x offset of tooltip var offsetfromcursorY=20 //Customize y offset of tooltip var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1). document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV document.write('<img id="dhtmlpointer" src="images/tooltiparrow.gif">') //write out pointer image var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thewidth, thecolor){ 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; //Find out how close the mouse is to the corner of the window 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 the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth){ //move the horizontal position of the menu to the left by it's width tipobj.style.left=curX-tipobj.offsetWidth+"px" nondefaultpos=true } else if (curX<leftedge) tipobj.style.left="5px" else{ //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px" pointerobj.style.left=curX+offsetfromcursorX+"px" } //same concept with the vertical position if (bottomedge<tipobj.offsetHeight){ tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px" nondefaultpos=true } else{ tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px" pointerobj.style.top=curY+offsetfromcursorY+"px" } tipobj.style.visibility="visible" if (!nondefaultpos) pointerobj.style.visibility="visible" else pointerobj.style.visibility="hidden" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" pointerobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip Here is the code on my php pageecho "<div onmouseover=\"ddrivetip('Test Description', 300)\" onmouseout=\"hideddrivetip()\"><img src=\"$thumbnail\" alt=\"$pd_name\"></div> ";If I swap "Test Description" with $pd_name or anything else the tooltip does not show up at all. Why not? PS. Sorry about the post! I cannot seam to start a new line on this text editor????? The enter key does nothing. Problem with ie10?? Quote Link to comment https://forums.phpfreaks.com/topic/272608-passing-php-variable-to-javascript-function/ Share on other sites More sharing options...
gristoi Posted January 2, 2013 Share Posted January 2, 2013 why not try using jquery to do what you need, i use a very good plugin called tipsy: http://onehackoranother.com/projects/jquery/tipsy/ does exactly what you need it to do Quote Link to comment https://forums.phpfreaks.com/topic/272608-passing-php-variable-to-javascript-function/#findComment-1402728 Share on other sites More sharing options...
Nothadoth Posted January 2, 2013 Author Share Posted January 2, 2013 Thanks very much i'll take a look at that. Also, I found that my problem was that the variable I was trying to use contained a speech mark, so I fixed it by using str_replace. Anyway, the jquery looks much tidier thanks. Quote Link to comment https://forums.phpfreaks.com/topic/272608-passing-php-variable-to-javascript-function/#findComment-1402733 Share on other sites More sharing options...
P5system Posted February 6, 2013 Share Posted February 6, 2013 Pass php variable in qoutes '<?php echo $var?>' Quote Link to comment https://forums.phpfreaks.com/topic/272608-passing-php-variable-to-javascript-function/#findComment-1410387 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.