Results 1 to 6 of 6

Thread: Link Floatie script

  1. #1
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Link Floatie script

    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?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    Code:
    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)
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Bonta-kun1981 (12-29-2011)

  4. #3
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for Help!

    I had a second question?

    Two Link Floatie on one site!?

    index.php in head
    Code:
    <!-- 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
    Code:
    <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
    Code:
    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
    Code:
    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
    Last edited by Bonta-kun1981; 12-29-2011 at 03:59 PM.

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #5
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •