PDA

View Full Version : Rich HTML Balloon Tooltip



selfish
12-31-2007, 08:14 AM
Rich HTML Balloon Tooltip
http://www.dynamicdrive.com/dynamicindex5/balloontooltip.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 (http://galacticflashgames.com/test.html) - 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, (http://galacticflashgames.com/realallbeta.html) 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.

jscheuer1
01-01-2008, 06:47 PM
You have an onload conflict. Remove this from the end of balloontip.js:


window.onload=initalizetooltip

Add to your body onload:


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

selfish
01-02-2008, 03:16 AM
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 :)

codeexploiter
01-02-2008, 03:22 AM
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..

jscheuer1
01-02-2008, 05:36 AM
Yes, er well, I screwed up. There was no conflict, I missed:


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:


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.

jscheuer1
01-02-2008, 05:58 AM
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):


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

codeexploiter
01-02-2008, 05:59 AM
Check the following lines in balloontip.js


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.

jscheuer1
01-02-2008, 06:13 AM
Check the following lines in balloontip.js


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.

selfish
01-02-2008, 11:47 AM
my god. i cannot believe it works. you guys are THE BEST.

THE BEST.