Dynamic Drive DHTML scripts- Floating Top Bar script

New Revised CSS Library Forums Web Tools

Floating Top Bar script

Author: Dynamic Drive

Note: Updated Oct 3rd 05' for option to float from bottom of window

Description: This script displays a floating bar that sits at the top of the window, gliding gently back into view when the page is scrolled. Regular HTML content can be shown inside of it. And to make the bar less intrusive, once it is closed (by clicking on the "x"), the bar can be set to dismiss for the entire duration of the browser session, by using cookies. Reloading the page won't bring it back. Sites like About.com use something similar to display important tidbits of information.

Demo:

Directions:

Step 1: Add the following code into the <HEAD> section of your page:

Select All
<style type="text/css"> #topbar{ position:absolute; border: 1px solid black; padding: 2px; background-color: lightyellow; width: 620px; visibility: hidden; z-index: 100; } </style> <script type="text/javascript"> /*********************************************** * Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com) * Sliding routine by Roy Whittle (http://www.javascript-fx.com/) * This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script>

Step 2: Insert the below HTML code in the BODY section of your page, outside any container tags (ie: a DIV or TABLE):

Step 3: Finally, this script uses an image to close the bar:

(right click, and select "Save As").