Top Text Bar for Your Pages

People 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>

 

by Michel Komarov, © Copyright 2008. iCoder.com

 

Share in social bookmarking:These icons link to social bookmarking sites where readers can share and discover new web pages.  digg del.icio.us BlinkList Reddit NewsVine YahooMyWeb co.mments

Related Articles:

3 Responses to “Top Text Bar for Your Pages”

  1. Ted Says:

    Thanks, Michel,

    You’ve done such good work for us. I’m really pleased to receive your email updates.

    Best wishes,

    Ted

  2. tracyselena Says:

    awsome tool!! thank you so much…i’ve used it to replace some other popup scripts i had been using.

  3. Interesting Twist On Popup Windows (Big Selling Website Design) Says:

    […] Michel’s Komarov’s Interesting Twist On Popup Windows […]

Got a question?   Leave a Reply

You must be logged in to post a comment.