PDA

View Full Version : Problem with Cool DHTML tooltip and IE



manols
01-12-2006, 11:23 PM
Hello,

For my first post in this forum, I wanted to thank you for this very useful and greatly done website...

I put the script Cool DHTML tooltip on my website. When i first tried it, it works perfectly fine with IE but there was some kind of bug with Firefox...
I tried then to look for solution and now I found out to make it work with firefox (i actually don't know how...) but it's not worknig anymore with IE... arghh

so i let you my code which works fine with Firefox and the website page which bugs : http://smartphone-fr.com/content/section/4/41/

In my body part :

<div id="dhtmltooltip"> </div>
<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
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") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
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 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 rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-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=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
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+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>

In my css stylesheet :

#dhtmltooltip{
position: absolute;
width: 70px;
border: 1px solid black;
padding: 2px;
background-color: F3890C;
visibility: hidden;
z-index: 100;
font-family: "Trebuchet MS", Arial, Verdana;
font-weight:bold;
color:#FFFFFF;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

And an exemple of one of my link :

<a href="../content/view/19/46/" onmouseout="hideddrivetip()" onmouseover="ddrivetip('<center>E-Ten M500</center>;','#F3890C', 100)"><img width="118" height="140" border="0" src="http://smartphone-fr.com/images/stories/smartphones/eten/etenm500thumb.png" alt="" /></a>


Any suggestions ?

Thanks

manols
01-13-2006, 01:55 AM
By reading some posts from this forum with similar problems, I found that they may be some interferences sometimes when you have two script on the same page...

If that can help, I'm using as well the Tab Content Script (yahoo like) on the website and the script is on my <head> part...

Could that be the reason of the problem ?

jscheuer1
01-13-2006, 09:35 AM
Well, for one thing, you have the tool tip script on the page twice. This confuses IE and, in tests here FF as well. NS8 didn't seem to mind though but, both it and IE noted that:

Error: tabobj has no properties
Source File: http://smartphone-fr.com/content/section/4/41/
Line: 74

That's for the tab script and it means that (in lines 73 & 74):


var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")

There is no element with the id 'tablist' on the page.

Take one of the tool tip scripts off the page and go back to the tab content script demo and find out where the element with the id 'tablist' belongs and then, get back to us. Or start over. It would be easier to help at the stage where you had (hopefully) done everything as described in the demos and it was working in IE but not FF. FF is easier to diagnose.

One other thing, the onload events of these scripts are written in such a way that they play nice with each other, so that isn't the problem.

manols
01-13-2006, 08:52 PM
Hello,

Tkanks for your answer.

I did as you suggest and it now, to me, works fine. I didn't think I could have that script repeated two times on the same page, it's because I'm using Joomla and I'm not so used...

I had to do a new page : http://smartphone-fr.com/content/view/21/52/

Can you just tell me if it is works fine now on your side, I'd really appreciate it...

And I got a last question : does this script work as well with safari for the mac users ?


Thanks very much

manols

jscheuer1
01-14-2006, 08:31 AM
Well, it is working now in IE, FF and NS8. There is still that pesky error:

Error: tabobj has no properties
Source File: http://smartphone-fr.com/content/view/21/52/
Line: 76

I looked at the Tab Content script on your page and couldn't tell what it was or was supposed to be doing. I did a local demo and simply removed the Tab Content script, that made the error go away and didn't seem to change the behavior of the page.

manols
01-14-2006, 03:19 PM
Oh yes i see but on my version of IE, there is no popup opening...

do you have a popup with the script error when you surf on my website ?

because if not i can just ignore that problem then...