Results 1 to 9 of 9

Thread: Rich HTML Balloon Tooltip

  1. #1
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Rich HTML Balloon Tooltip

    Rich HTML Balloon Tooltip
    http://www.dynamicdrive.com/dynamici...oontooltip.htm

    Hi. I'm trying to implement this script on my website, and had it working in a seperate page, without any kind of extra layout (you can see parts of it here - it's not pretty cause some css is missing, but you get the idea - AND the script itself is functioning as expected).

    Now, though, when I put it into the full layout, here, it hides the divs just fine (cause that's just the plain css working as is), but simply won't display them when needed. I've had a look into the js to try and work out how positioning is determined, but simply have no idea what I'm doing. Can anyone help explain how to change where it shows up?

    Thanks in advance,
    selfish.


    oh and did anyone notice you can't post new threads from safari? heh.
    Last edited by selfish; 12-31-2007 at 08:15 AM. Reason: formatting

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

    You have an onload conflict. Remove this from the end of balloontip.js:

    Code:
    window.onload=initalizetooltip
    Add to your body onload:

    Code:
    <body bgcolor="#000000" onload="initalizetooltip();MM_preloadImages('images/allgames%20fw_r2_c1_f2.gif','images/allgames%20fw_r2_c3_f2.gif');">
    But there could also be other problems.
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    wow, thanks for helping out! i made those changes, but still can't make it work. i want to make a tooltip of some kind work - is continuing to try and make this one happen going to be more effort than it's worth?

    should i attempt some different kind of tooltip, or do you have some idea of where i should be looking for conflicts?

    thanks

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    It seems that the left and top value calculated by the tooltip script is having some problem. The tooltip is visible in your case but its left and top values are not correct..

  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

    Yes, er well, I screwed up. There was no conflict, I missed:

    Code:
    if (window.addEventListener)
    window.addEventListener("load", initalizetooltip, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initalizetooltip)
    else if (document.getElementById)
    Which, if you had left it alone, would have been:

    Code:
    if (window.addEventListener)
    window.addEventListener("load", initalizetooltip, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initalizetooltip)
    else if (document.getElementById)
    window.onload=initalizetooltip
    To make a long story short, all modern browsers will load that with no conflict. My mistake. codeexploiter is probably right, it looks like some problem with positioning, either css, and/or the placement of the script markup on the page.
    - John
    ________________________

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

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

    OK, so put balloontip.js back the way that it was, and get rid of the change to the body onload, basically put everything back the way that it was before I told you to change it. Next, due to the styling of your page, the class="balloonstyle" divisions all need to go at the very end, or the very beginning of the body section (here shown at the very end):

    Code:
     . . . ition=21; 
    var sc_security="1a1f1b24"; 
    </script>
    
    <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c22.statcounter.com/3295709/0/1a1f1b24/0/" alt="website metrics" /></a></div></noscript>
    <!-- End of StatCounter Code -->
    <div id="boomshine" class="balloonstyle">
    Relaxing and fun, easy to play.<br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" id="rating" align="middle">
                      <param name="allowScriptAccess" value="sameDomain" />
                      <!-- here's the bit --> 
                      <param name="movie" value="games/rating_id_readonly.swf?id=boomshine" />
                      <param name="quality" value="high" />
                      <param name="bgcolor" value="#000000" />
                      <!-- here's the other bit -->
                      <embed src="games/rating_id_readonly.swf?id=boomshine" quality="high" bgcolor="#000000" width="90" height="20" name="rating" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
                      </embed>
                      </embed>
                </object></div>
    <div id="ufomania" class="balloonstyle">It's mania, UFO style!<br />
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" id="rating" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    
    <!-- here's the bit -->
    <param name="movie" value="games/rating_id_readonly.swf?id=ufomania" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    
    <!-- here's the other bit -->
    <embed src="games/rating_id_readonly.swf?id=ufomania" quality="high" bgcolor="#000000" width="90" height="20" name="rating" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object></div>
    <div id="5differences" class="balloonstyle">It's spot the difference...with a difference!<br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" id="rating" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    
    <!-- here's the bit -->
    <param name="movie" value="games/rating_id_readonly.swf?id=5differences" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    
    <!-- here's the other bit -->
    <embed src="games/rating_id_readonly.swf?id=5differences" quality="high" bgcolor="#000000" width="90" height="20" name="rating" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object></div>
    <div id="connalandcam" class="balloonstyle">Beware the time wizard Glek!<br />
                    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" align="middle">
                      <param name="allowScriptAccess" value="sameDomain" />
                      <!-- here's the bit -->
                      <param name="movie" value="games/rating_id_readonly.swf?id=connalandcam" />
                      <param name="quality" value="high" />
                      <param name="bgcolor" value="#000000" />
                      <!-- here's the other bit -->
                      <embed src="games/rating_id_readonly.swf?id=connalandcam" quality="high" bgcolor="#000000" width="90" height="20" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
                </object></div>
    </body>
    </html>
    Once I did that, it worked here in a local demo.
    - John
    ________________________

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

  7. #7
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Check the following lines in balloontip.js
    Code:
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    Try to identify the value the script is setting as the left and top value and adjust it (if necessary) for your requirement.

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

    Quote Originally Posted by codeexploiter View Post
    Check the following lines in balloontip.js
    Code:
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    Try to identify the value the script is setting as the left and top value and adjust it (if necessary) for your requirement.
    No need, see my previous post, fully tested and works.
    - John
    ________________________

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

  9. #9
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    my god. i cannot believe it works. you guys are THE BEST.

    THE BEST.

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
  •