Link Floatie script Question

[ddadmin]

Are you saying you don't want the floatie to be positioned absolutely and to the lower right edge of the window at all, but inside table cells? Again, you need to be more specific- inside table cells absolutely positioned, or relatively?

There are a few other tooltip related scripts that may better fit what you're looking for out of the box:

http://www.dynamicdrive.com/dynamici...tmltooltip.htm
http://www.dynamicdrive.com/dynamici...mltooltip2.htm
http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

[Vol666]

Well i set the position - right...so the floaties are shows inside the table.
the problem with absolutely position is that - i use
<td height="612" style="width: 800px;">
<div style="overflow:auto; width:810px; height: 610px;">
and inside of this are the tables where i use id="dhtmlfloatie". if i set the position: absolute i'm getting down/left-right scroll so i set it position: right and the floattext shows inside the table. its looks beautiful in this way...

so my problem is only this:

i have two tables but the floaties texts are shows only in the first table... i want the information about first table to be show in the firts table and the information about second table to be show in the second table!

i just need somehow <div id="dhtmlfloatie" ></div> to be for floattext[0] - table 1

and <div id="dhtmlfloatie2" ></div> for floatext[1] - table 2


or something like that!

if you still dont understand me i'll show you the whole html!

[ddadmin]

Well, the basic way to show more than 1 floatie is simple enough. Try out the below modified script:

<style type="text/css">

#dhtmlfloatie, #dhtmlfloatie2{
position: absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Link Floatie 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 floattext=new Array()
floattext[0]='- <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br><div align="right"><a href="javascript:hidefloatie(\'dhtmlfloatie2\')">Hide Box</a></div>'
floattext[1]='Some other floatie text'

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

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

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thediv, thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById(thediv)
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
//if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
//floatobj.style.top=dsocy+5+"px"
//else
//floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

function hidefloatie(thediv){
var floatobj=document.getElementById(thediv)
floatobj.style.display="none"
}

</script>

<body>

<table border="0" bordercolor="" width="100%" bgcolor="">
<tr>
<td>
<a href="#" onMouseover="showfloatie('dhtmlfloatie', 'Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more.', event)" onMouseout="hidefloatie('dhtmlfloatie')">Coding Forums</a>
</td>
<td>
<div id="dhtmlfloatie" ></div>
</td>
</tr>
<tr>
<td>
<a href="#" onMouseover="showfloatie('dhtmlfloatie2', floattext[0], event, '#D9FFD9', 250, 100)">JavaScript Kit</a>
</td>
<td>
<div id="dhtmlfloatie2" ></div>
</td>
</tr>
</table>

The specifics comes down to how you wish the floaties to be positioned on the page...

[Vol666]

brilliant!

thank you
Alex

[msgrafx]

To change horizontal position of floatie, change value of winWidth in definition for
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px".
To keep position fluid, divide by a number, e.g.,
floatobj.style.left=dsocx+(winWidth/3)-floatWidth-5+"px"

Similarly, vertical positioning can be accomplished by changing variable winHeight

If you change vertical position, be aware that if floatie appears at cursor position, it will result in appear/disappear loop of floatie, until cursor is moved or screen is scrolled.