Link Floatie script

[Bonta-kun1981]

1) Script Title: Link Floatie script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nkfloaties.htm

3) Describe problem:

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

[vwphillips]

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]

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

[vwphillips]

<!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]

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]

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