Top Text Bar for Your Pages
July 12th, 2008People are using so many toolbars with their browsers… They read accustomed notifications showed by the toolbars. So more and more marketers begin using their ads look similar to the top bar notifications.
If you’d like to try this kind of text bar ( popup / “fly-in” ) with your ad / offer, this script will help you.
Step 1)
Download this
top-bar.js script and upload it to your site beside your pages.
Step 2)
Insert this code below into your page between the <head> and </head> tags:
<script type="text/javascript" src="top-bar.js"></script>
<script type="text/javascript">
winOnLoad(topBar_Show);
</script>Step 3)
Create your text ad covered in a <div> tag with id="topBar_Content" attribute. Place this DIV inside the ≶body> and </body> tags. Make sure your ad is not too long to be warped in two oe more lines:
<div id="topBar_Content">
<!-- Place your Text Ad here -->
See over for
<a href="http://myDomain.com" target="_blank">
limited special discount offer</a> for a new product!
</div>
That’s all. You’ll get a top text bar like this:
Your page with the complete code would look like below.
<html>
<HEAD>
. . .
<script type="text/javascript" src="top-bar.js"></script>
<script type="text/javascript">
winOnLoad(topBar_Show);
</script>
. . .
</HEAD>
<BODY>
<div id="topBar_Content">
<!-- Place your Text Ad here -->
See over for
<a href="http://myDomain.com" target="_blank">
limited special discount offer</a> for a new product!
</div>
. . .
</BODY>
</html>The Top-Bar as a One Time Offer
The pure Top-Bar script displays your text bar every time your page is loaded. You can use the Simple OTO script to show the text bar only one time per visitor.
The integrated solution are shown below:
<html>
<HEAD>
. . .
<script type="text/javascript">
<!--// Simple OTO script
function oto(otoName) {
var cookie = "oto"+escape(otoName)+"=";
if (0 > document.cookie.indexOf(cookie)) {
var d = new Date();
d.setMonth(d.getMonth() + 120);
document.cookie = cookie+"1; expires="
+d.toGMTString()+"; path=/;";
return true;
} else return false;
}
//-->
</script>
<script type="text/javascript" src="top-bar.js"></script>
<script type="text/javascript">
if ( oto("MyOTO") ) winOnLoad(topBar_Show);
</script>
. . .
</HEAD>
<BODY>
<div id="topBar_Content">
<!-- Place your Text Ad here -->
See over for
<a href="http://myDomain.com" target="_blank">
limited special discount offer</a> for a new product!
</div>
. . .
</BODY>
</html>How it works
This script covers your ad inside <div id="topBar_Content"> with additional DIV tags and add a block with the close link:
<div id="topBar_MainCover">
<div class="topBar_Cover" id="topBar_CoverIE">
<div id="topBar_Content">
<!-- Place your Text Ad here -->
See over for
<a href="http://myDomain.com" target="_blank">
limited special discount offer</a> for a new product!
</div>
<div id="topBar_CloseTab">
<a href="javascript://"
onclick="topBar_Show('none');return false;">close</a>
</div>
</div>
</div>
It also inserts CSS stylesheets to layout the Top-Bar:
<style type="text/css">
.topBar_Cover {
position:absolute; top:0px; left:0px;
width:100%; font: normal 13px sans-serif;
}
div > div.topBar_Cover { position:fixed; }
#topBar_Content {
position:absolute; top:0;left:0; z-index:9;
width:100%; padding:1px 2em 1px 2em;
border-bottom: 1px solid silver;
line-height:22px; background:lightyellow;
}
#topBar_CloseTab {
position:absolute; top:0;right:0; z-index:10;
padding:1px 1em 1px 2em;
border-bottom: 1px solid silver;
line-height:22px;
}
</style>
<!--[if gte IE 5.5]><![if lt IE 8]>
<style type="text/css">
div#topBar_CoverIE {
width:expression(( (topBar_w =
(document.documentElement.clientWidth?
document.documentElement.clientWidth:
document.body.clientWidth)
)<200?200:topBar_w)+'px');
position:absolute;
top:expression((topBar_t =
document.documentElement.scrollTop?
document.documentElement.scrollTop:
document.body.scrollTop)+'px');
left:expression((topBar_l =
document.documentElement.scrollLeft?
document.documentElement.scrollLeft:
document.body.scrollLeft)+'px');
}
</style><![endif]><![endif]-->
Finally it creates javascript functions to manipulate by the bar appearance:
<script type="text/javascript">
function topBar_Show(display) {
var cover = document.getElementById("topBar_MainCover");
if (cover)
cover.style.display = ("none"==display?
"none": "block");
else setTimeout(
"topBar_Show("+('none'==display? "'none'": "'block'")+")"
, 100);
}
function winOnLoad(fn) {
if (window.attachEvent)
window.attachEvent("onload", fn);
else
if (window.addEventListener)
window.addEventListener("load", fn, false);
}
</script>
Related Articles:
