Link Floatie script Question

What parameters set where the floatie box will appear on the screen?
Instead of bottom right, I want it to be bottom centered.

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

Hmmm this would be a customization issue. Unfortunately centering the floatie is currently not a built in feature of this script.

Re: Flotie Script
url: http://www.dynamicdrive.com/dynamici...nkfloaties.htm

As you mentioned the floatie script cannot be centered, however is there a possibility that the div can be positioned somehow to a certain spot on the screen? If not, do you know of any scripts on the site that may be able to do so?

Please let me know.

Well, the code:

Code:

---

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"

---

within the script is what controls its position, which is currently set to be the lower right of the screen. You can modify these lines. For example, the below would positon the Sticky to the upper right corner of the page instead, or 10 px from the top of the page:

Code:

---

floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+10+"px"
else
floatobj.style.top=dsocy+10+"px" //5 pixels from top of page

---

I have a similar question about manipulating the parameters in the Link Floaties Script, http://www.dynamicdrive.com/dynamici...nkfloaties.htm.

How does one modify the text in the argument of the function "showfloatie()"?
Specificallly, I want to change the font and size of the text that appears in the "floatie box". I see there are a lot of parameters to change characteristics of the floatie itself, but not the text within it.

Please educate a newbie. :o

The easiest way to change the format of the text shown inside the floatie box is to do so via the CSS of the script:

Code:

---

#dhtmlfloatie{
position: absolute;
left: 0;
font: normal 12px Arial;
"
"

---

Note the line in red...

one more question!

how can i use dhtmlfloatie with two different possitions?

i mean two links and two different possitions of showfloaties!

thanks!

should i post new topic for my question?

Quote:

---

Originally Posted by Vol666

one more question!

how can i use dhtmlfloatie with two different possitions?

thanks!

---

It's certainly possible, but it really depends on the specifics of what you're trying to do, mainly, what two positions you wish the script to support.

thanks for your attention!

So i have two tables !

floattext[0]= is for the first table
floattext[1]= is for the second table

i insert <div id="dhtmlfloatie" ></div> in the two tables and i want it when i click
floattext[0] to open floatie in the first table!
Then when i click on
floattext[1] to open the floatie in the second table...

and in the line of this to be possible for 3rd floatieis....4,5 ;] but i need only for two now!

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

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! ;)

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

Code:

---

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

brilliant!

thank you
Alex

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.