2009/05/12

Add floating bar on top

Floating bar-Maybe some blogger have heard about this but there was a little error when adding it to source in the previous version.Therefore, can not use it on blogger.

Today I decide to guide you how to make floating bar always on top at the screen even you scroll down.It's feature is you can put the "Subscribe" request or feedback, notice...It just like the floating bar at the bottom that I had published for a long time ago.If you would like to know how to make floating bar at the bottom you can view here.
This kind of floating bar is from dynamicdrive.com so thanks for share.To view demo you can click here


Ok let's do it.

Open your source code and add this code before the ]]></b:skin> tag:


#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;


<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
*Make it works on blogger by Zen :http://zenplate.blogspot.com
***********************************************/

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>


Ok Save all and create a HTML/Javascript and add this:

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif" align="right" border="0" />
<a href="http://www.site5.com/in.php?id=69188-42" onclick="closebar(); return true">Join Site5-The trusty and best affiliate to make money online with Zen now
</div>


Now you are successful added it to your blog , just save and join but there are some spots that you have to know:Look at the red code, the symbols "&&", that is the reason to make it error on your blog if you add the whole code to your source.The green code is the place you have to option it by your own, you can put Feed,Twitter follow request....up to you.

I hope it will help you much,if you still have any problem please leave a comment below, I will help you soon.
Thanks my friends and don't forget to subscribe and follow me on Twitter to receive the cool daily tips.
Zen

Requirements:Jquery
Developer: Roy Whittle
Website :http://www.dynamicdrive.com/

7 comments:

Serdar Sabri said...

hi zen,
i need urgent help.
i created floating bar as html/javascript then i removed. now my site can not be opened, gives a message "operation aborted".
my site is: www.serdarsabri.com

Serdar Sabri said...

sorry, wrong alert. another bad old script.
serdarsabri

Kevin said...

Zen, this is a great feature ... I just love it.

Do you know how this can be made so the width of the information bar gets bigger and smaller as the size of the browser window gets bigger and smaller ?

Kevin said...

Zen ... there is a picture (close button) that you refer to in the code:
http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif

That picture cannot be found.

Kevin

Kevin said...

I'm not sure about Blogger.com, but for those wanting to use this on a regular html webpage there are a couple of adjustments...

Copy the code, starting with the line:
< style type="text/css" >

and ending with the line:
< /script >

into the < head > section of the webpage (this is the majority of the code)

Then, the remaining lines, starting with the line:
< div id="topbar" >

is copied into the < body > section of the webpage.

And also, remember if you want the close button on the Left side instead of the Right side, edit the 5th line up from the bottom, and change:
align="right"
- to -
align="left"


Kevin

vuluganck said...

@Kevin
Thanks for sharing experience!
The image is the close button icon, you can find it at any where.And perhaps I have put the whole code in 1 line, I am sorry about this.It is really hard for new blogger who wants to edit this.
I will change some instructions then within 24 hours.It will easily to understand

vuluganck said...

But you have a mistake here Kevin, the starting code
< style type="text/css" >

ending with the code:
</style>

This is the regular starting and ending code:

< style type="text/css" >
...
</style>


<script type="text/javascript">
...
</script>

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.