Forum Home Enhancements - Floating Top Bar script [register]

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.

Step 1: Add the following code into the Template: headinclude :

below
<!-- / CSS Stylesheet -->

PHP Code:

<if condition="$show['registerbutton']">
<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">
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>
</if> 


Step 2: Insert the following code in the Template: navbar :

below
<!-- / PAGENAV POPUP -->
</if>

PHP Code:

<if condition="$show['registerbutton']">
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="close.gif" border="0" /></a>
<a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a>
</div>
</if> 


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

Done!

Please make sure you click INSTALL if you like it.

[nonamer69]

thanks. do you have a screenshot or demo site where we can see it in action.

[yoyoyoyo]

here is a screenshot:

[Lizard King]

It is not a really good approach to add all these lines to headinclude template. You can easily create a js file and call it via headinclude template and use the css within additional css.

[yoyoyoyo]

After I install a modification I always go to view it in as many types of browsers as possible, to make sure that it is compliant with each of them. When I went to view my site in MSN Explorer I was shocked to see that the floating top bar is actually see-through:



I think that the CSS needs a bit of work in order to make it more cross-browser compliant/friendly.

[Shaheen]

Thanks Dude

[Sulaiti]

Originally Posted by Lizard King

It is not a really good approach to add all these lines to headinclude template. You can easily create a js file and call it via headinclude template and use the css within additional css.

I agree, soon I will upgrade it to be more elastic

[Chance4Today]

The X shows up for everyone but me LOL I just took it out got tired of seeing it float around but a good idea

[nectons]

why you posting even withoute testing ? :S ..

[ReQueM]

thanks
click install