Free floating top bar css / html script code

This is free template #32. It is free to use on your web page or blog. CLICK HERE

Floating Top Bar Script

There is a neat tool that you can see at the top of this page; a floating bar that sits at the top of the window, gliding gently back into view when the page is scrolled. Regular HTML content including hyperlinks can be shown inside of the content box. Box size and color can be modified to your liking. And to make the bar less intrusive, it can be closed by clicking on the "x". Reloading (refresh) will bring the box back. Credits go to DynamicDrive.com for cool javascripts.

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

<style type="text/css"> #topbar{ position:absolute; border: 1px solid black; padding: 2px; background-color: WhiteSmoke; width: 800px; 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 * Visit http://www.free-templates.org/ for free web page templates ***********************************************/ 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>

2: Add the following code into the <BODY> section outside any container tags (ie: a DIV or TABLE):

3:This script uses an "x" image to close the window. Right click on it and "save as". Upload it to your website in the root folder. Do not put it in an image folder.

Scripts Home Page | Main Home Page