Floating Text - Javascript - Web Dev. - Neils Resource Web

Home	Back	Travel Web		Resource Web		Miscellaneous
Summary	General	Photo	Technical	Web Dev	Workshop

Contract Menu | Expand Menu

Summary of Content

This Script opens a popup box (set here to show at the lower right of the page), which contains more links, but could contain just text. It also features an optional Hide box option which keeps the box open until clicked. To see the example click on the More option from the Menu above. The actual example is slightly more complex than the script below as I have added titles and centred the text etc...

1. Insert the following code into the <head> section of your page

<style type="text/css">

#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
color:navy;
font-family: Verdana, Helvetica, sans-serif;
font-size:11pt;
border: 2px solid navy;
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()">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(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=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("dhtmlfloatie")
floatobj.style.display="none"
}

</script>

2. Insert the below code into the <body> section of your page

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

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

As shown in the sample code of Step 2, to add a floatie to a link, just add the following inside the link's tag:

onMouseover="showfloatie('link text here', event)" onMouseout="hidefloatie()"

However, showfloatie() in fact supports 3 additional parameters to allow you to modify the background color and dimensions of that particular floatie instance. Below describes showfloatie() in its entirety:

showfloatie() function

showfloatie('link_text', event, 'optional_bgcolor', optional_width, optional_height)

As mentioned, the last 3 parameters are all optional. Here are a few sample callings:

1) showfloatie('<p>Some text</p>', event, 'lightblue')

2) showfloatie(floattext[0], event, '', 300, 200)

3) showfloatie('<b>I\'m the king of the world!</b>', event)

The 2nd example shows how you can pass in a variable containing the desired text as the 1st parameter instead of the actual text. Do this if your text content is long, as using a variable is more reliable as far as avoiding syntax errors. The 3rd example shows that if your text contains apostrophes, you'll need to backslash them (ie: I\'m).

Creating a floatie that doesn't disappear onMouseover

You can create a floatie that isn't automatically dismissed onMouseout, so to create a "information box" so to speak. Simply remove the onMouseover portion of the code. For your floatie text, you'll want to add a "Close box" link:

<a href="javascript:hidefloatie()">Hide Box</a>

This is illustrated in the code of Step 1.

Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)

Double mouse click anywhere on the page to take you back to the top (except when over the links)

Last Update: 17/01/2008 - Javascript - Floating Popup on MouseOver - Neils Resource Web