Results 1 to 6 of 6

Thread: Problem with Cool DHTML tooltip and IE

  1. #1
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with Cool DHTML tooltip and IE

    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 :
    Code:
    <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 :
    Code:
    #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 :
    Code:
    <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

  2. #2
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 ?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...

Bookmarks

Posting Permissions

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