PDA

View Full Version : Link Floatie script Question



jiggygeel
01-10-2005, 11:23 PM
What parameters set where the floatie box will appear on the screen?
Instead of bottom right, I want it to be bottom centered.

ddadmin
01-11-2005, 01:21 AM
.

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

nilios
02-15-2005, 06:01 AM
Re: Flotie Script
url: http://www.dynamicdrive.com/dynamicindex5/linkfloaties.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.

ddadmin
02-16-2005, 11:50 PM
Well, the 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:


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

tekbro
06-12-2006, 05:37 PM
I have a similar question about manipulating the parameters in the Link Floaties Script (http://www.dynamicdrive.com/dynamicindex5/linkfloaties.htm), http://www.dynamicdrive.com/dynamicindex5/linkfloaties.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

ddadmin
06-13-2006, 06:43 AM
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:


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

Note the line in red...

Vol666
11-23-2007, 04:16 PM
one more question!

how can i use dhtmlfloatie with two different possitions?

i mean two links and two different possitions of showfloaties!

thanks!

Vol666
11-24-2007, 02:27 PM
should i post new topic for my question?

ddadmin
11-25-2007, 06:22 AM
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.

Vol666
11-25-2007, 02:12 PM
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!

ddadmin
11-26-2007, 04:23 AM
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/dynamicindex5/dhtmltooltip.htm
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm
http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

Vol666
11-26-2007, 01:52 PM
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
11-26-2007, 10:37 PM
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
11-26-2007, 11:40 PM
brilliant!

thank you
Alex

msgrafx
08-17-2008, 03:59 AM
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.