T
his script displays a floating bar that sits at the top of the window, (See Top Of Page) 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 ( 
), 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.
* The larger the image, the wider the top bar will be in order to accommodate the image inside the prescribed area.
W e have tested the code in IE6.0, Firefox1.0.6, Opera8.02, Netscape7.02 and Netscape8.0.3.3. This script worked in all platforms tested with the exception of Opera8.02 where the effect will not be visible. There will be an empty space where the effect would be seen at the top of the page. It degrades well and you will not get any error messages.
D
epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. There is a third part which is a download of an image ( ) that needs to be uploaded into the same directory* as this effect. This little button is used to close the effect. You can get this button on the site you also get the code.
* If you are going to upload the close.gif image into a different directory than where this effect will be, then you need to reconfigure the below part of the code to reflect where this image needs to be called from. For example, if you upload this close.gif image into a directory called "images", then the below code would have to reflect this change. This by the way is the entire <BODY> section of code where you also add your material you want to be viewed from this effect. You can paste this part anywhere within the <BODY> section of your document. We suggest that you paste it at the very bottom of the page, just above the closing </BODY> tag. This way it is completely out of the way of the rest of the material on your page.
Default
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="close.gif" border="0" /></a>
Place your content here
</div>
Reconfigured
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="images/close.gif" border="0" /></a>
Place your content here
</div>
Note of Importance ~ in reference to adding links and/or image links into this effect. We suggest the links have the attribute of target=_blank" attached to the link(s). This tells the link to open in a new browser window as opposed to opening in the same window and having your visitor leave your page. Grab the below link and you will see howto. (It will open in a "New Browser Window").
[ Howto ]
T he last part we will cover is the <HEAD> section of the code. The reconfiguration part of this is basically for colors, size and position of the effect.
|
Colors and Size (Width) <style type="text/css"> |
Colors and Size (Width) <style type="text/css"> |
* In reference to the width: 70%; in our reconfigurations, we changed this to a percentage and removed the px (70%) as opposed to the default of px (pixels). Reason being is quite simple. Pixels are a constant size no matter what the dimensions of the viewing area (monitor size). By changing to a percentage (%), we aleviate the different screen sizes by making it a percentage of the monitor viewing the effect.
T he last part of these reconfigurations are for the persistance of reopening the effect and for absolute positions of the effect itself.
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser sessionT he above section of code is very basic and self-explanitory. Either set it to 0 or 1 depending on your preference. Go ahead and close the "Floating Bar" and [ Reload ] the page. We have it set for 0 so when the page reloads, it will appear again.
T he last section is for absolute position of the bar itself.
var startX = 30 //set x offset of bar in pixelsvar startY = 3 //set y offset of bar in pixels
var startX = 30 defines in pixels how far from the left the effect will be located
var startY = 3 defines in pixels how far from the top of the page the effect will be located
P lay around with the above numbers until it fits your site the way you want.
W
e have ours reconfigured for:
var startX = 5 //set x offset of bar in pixels
var startY = 3 //set y offset of bar in pixels
T his means it is positioned 5 pixels from the left side of the page and 3 pixels from the top of the page.
I
f you would like to add this effect into your pages, either grab the below link or the link we setforth within the effect itself and you are there. If you have any problems with this, feel free to contact us.
[
Get Code Here ]
[ Rate This Page ]
and Links [