PDA

View Full Version : Link Floatie script



Bonta-kun1981
12-29-2011, 03:12 AM
1) Script Title: Link Floatie script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkfloaties.htm

3) Describe problem:

My question is how do I get it from the right corner on the left corner?

vwphillips
12-29-2011, 10:14 AM
function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
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=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)
}

Bonta-kun1981
12-29-2011, 04:19 PM
Thanks for Help! :)

I had a second question?

Two Link Floatie on one site!?

index.php in head
<!-- Teamspeak -->
<script type="text/javascript" src="js/teamspeak.js">
/***********************************************
* 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
***********************************************/</script>
<link rel="stylesheet" href="css/teamspeak.css" type="text/css" media="screen" />
<!-- end Teamspeak -->
<!-- Mumble -->
<script type="text/javascript" src="js/mumble.js">
/***********************************************
* 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
***********************************************/</script>
<link rel="stylesheet" href="css/mumble.css" type="text/css" media="screen" />
<!-- end Mumble -->

index.php in body
<div id="teamspeak"></div><a href="#" onMouseover="showfloatie(floattext[0], event, '#CCCCCC', 300)"><img src="../viewer/tsvi.png" /></a><br />
<div id="mumble"></div><a href="#" onMouseover="showfloatie(floattext[0], event, '#CCCCCC', 300)"><img src="../viewer/muvi.png" /></a><br />

teamspeak.js
function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("teamspeak")
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=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(){
var floatobj=document.getElementById("teamspeak")
floatobj.style.display="none"
}

mumble.js
function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("mumble")
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(){
var floatobj=document.getElementById("mumble")
floatobj.style.display="none"
}

Please help me again.
My test site (http://bontakun-testpage.afbe-clan.at/)

vwphillips
12-30-2011, 09:54 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

#dhtmlfloatie {
position: absolute;
left: 0;
left: -900px;
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=[
'- <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()">Hide Box</a></div>',
'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 fadeincrement=2; //speed of fade (1 to 100). slow to fast.

var baseopacity=0;

function showfloatie(thetext,pos, optbgColor, optWidth, optHeight){
var obj=document.getElementById("dhtmlfloatie");
obj.style.display="block";
obj.style.backgroundColor=typeof(optbgColor)=='string'? optbgColor : floatiebgcolor;
obj.style.width=typeof(optWidth)=='number'? optWidth+"px" : floatiewidth
obj.style.height=typeof(optHeight)=='number'? optHeight+"px" : floatieheight!=""? floatieheight : "";
obj.innerHTML=thetext;
var whs=wwhs(),w=obj.offsetWidth,h=obj.offsetHeight,lft=pos.indexOf('l')>-1?whs[2]+5:whs[2]+whs[0]-w-5,top=pos.indexOf('b')==-1?whs[3]+5:whs[3]+whs[1]-h-5;
obj.style.left=lft+"px";
obj.style.top=top+"px";
clearInterval(showfloatie.to);
gradualfade(obj,0);
}

function hidefloatie(){
document.getElementById("dhtmlfloatie").style.display="none";
}

function gradualfade(obj,opc){
if (opc<100+fadeincrement){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
opc+=fadeincrement;
showfloatie.to=setTimeout(function(){ gradualfade(obj,opc); },20);
}
}

function wwhs(){
if (window.innerHeight){
return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
}
else if (document.documentElement.clientHeight){
return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

</script>
</head>

<body>
<div id="dhtmlfloatie" ></div>

<a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more','rightbottom')" onMouseout="hidefloatie()">rightbottom</a> | <a href="#" onMouseover="showfloatie(floattext[0],'leftbottom', '#D9FFD9', 250, 100)">leftbottom</a>
<a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more','righttop')" onMouseout="hidefloatie()">righttop</a> | <a href="#" onMouseover="showfloatie(floattext[0],'lefttop', '#D9FFD9', 250, 100)">lefttop</a>
</body>

</html>

Bonta-kun1981
12-30-2011, 12:03 PM
Sorry, please can you give me a example with -> rightbottom (Free JavaScripts and JavaScript Tutorials)
and leftbottom (DHTML/ CSS Tutorials and JavaScript Reference), because I have two windows on one page with nothing in them or the same.

vwphillips
12-30-2011, 02:27 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.dhtmlfloatie {
position: absolute;
left: 0;
left: -900px;
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=[
'- <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(\'lb\')">Hide Box</a></div>',
'- <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(\'lt\')">Hide Box</a></div>',
'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 fadeincrement=2; //speed of fade (1 to 100). slow to fast.

var baseopacity=0;

function showfloatie(ip,thetext,pos,closeall, optbgColor, optWidth, optHeight){
if (!showfloatie.ary){
showfloatie.ary=[];
}
if (!ip.pop){
ip.pop=document.createElement('DIV');
ip.pop.className="dhtmlfloatie";
document.body.appendChild(ip.pop);
showfloatie.ary.push(ip.pop);
}
if (closeall){
hideall();
}
var obj=ip.pop;
obj.style.display="block";
obj.style.backgroundColor=typeof(optbgColor)=='string'? optbgColor : floatiebgcolor;
obj.style.width=typeof(optWidth)=='number'? optWidth+"px" : floatiewidth
obj.style.height=typeof(optHeight)=='number'? optHeight+"px" : floatieheight!=""? floatieheight : "";
obj.innerHTML=thetext;
var whs=wwhs(),w=obj.offsetWidth,h=obj.offsetHeight,lft=pos.indexOf('l')>-1?whs[2]+5:whs[2]+whs[0]-w-5,top=pos.indexOf('b')==-1?whs[3]+5:whs[3]+whs[1]-h-5;
obj.style.left=lft+"px";
obj.style.top=top+"px";
showfloatie.lst=obj;
gradualfade(obj,0);
return false;
}

function hideall(){
var ary=showfloatie.ary,z0=0;
if (ary){
for (;z0<ary.length;z0++){
ary[z0].style.display="none";
}
}
return false;
}

function hidefloatie(ip){
ip=typeof(ip)=='object'?ip:document.getElementById(ip);
if (ip&&ip.pop){
ip.pop.style.display="none";
}
return false;
}

function gradualfade(obj,opc){
if (opc<100+fadeincrement){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
opc+=fadeincrement;
setTimeout(function(){ gradualfade(obj,opc); },20);
}
}

function wwhs(){
if (window.innerHeight){
return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
}
else if (document.documentElement.clientHeight){
return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

</script>
</head>

<body>

<a href="#" onMouseover="showfloatie(this,'Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more','rightbottom',false)" onMouseout="hidefloatie(this)">rightbottom</a> | <a id="lb" href="#" onMouseover="showfloatie(this,floattext[0],'leftbottom',false, '#D9FFD9', 250, 100)">leftbottom</a>
<a href="#" onMouseover="showfloatie(this,'Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more','righttop',false)" onMouseout="hidefloatie(this)">righttop</a> | <a id="lt" href="#" onMouseover="showfloatie(this,floattext[1],'lefttop',false, '#D9FFD9', 250, 100)">lefttop</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#" onmouseup="return hideall();">Hide All</a>


</body>

</html>