Expandable Sticky Bar
Description: This script uses CSS's "positon:fixed
"
property plus a splash of JavaScript to create a sticky footer or header bar
that expands when the mouse rolls over it. It's useful for showing supplemental
information of a site that should always be in within a mouse action away. The markup of the bar can either be
inline HTML defined within the page it's on, or entirely in a separate HTML file
and fetched via Ajax. The sticky bar can either be positioned at the bottom
of the window (as in the demo here), or top instead. Furthermore, the bar
can either be activated when the mouse rolls over it, or manually via a click on
a user defined button within the bar. Cool!
The bar will only be visible to browsers that support "position:fixed
",
namely, all modern browsers (FF, Safari, Opera etc) and in IE, IE7+ in standards
mode (with a valid
doctype).
Demo: Look below!
Step 1: Insert the following code in the HEAD section of your page
The above references the following files, which you should download (by default, to the same directory as your page itself):
Set up Information
Inside expstickybar.js, at the very end is the code to initialize one Sticky Bar instance on the page:
var mystickybar=new expstickybar({
id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'stickybarcontent.htm', //path to sticky bar content file
on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)
})
It calls the constructor function:
var mystickybar=new expstickybar({settings})
where "mystickybar
" should be an arbitrary but
unique variable to reference the current Sticky Bar instance. If you're
defining more than one Sticky Bar, this variable must be unique in each
case.
Markup for the sticky DIV
The "id" setting within function expstickybar()
you see above (ie: "stickybar") must be set
to the ID of your Sticky Bar DIV, which is defined either inline on the page or inside an
external htm file:
<div id="stickybar"
class="expstickybar">
<a href="#togglebar"><img src="open.gif" data-closeimage="close.gif" data-openimage="open.gif"
style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px"><b>Copyright (c) 2010 Dynamic
Drive</a></div>
More content here
</div>
By default this DIV is defined inside an external .htm file (stickybarcontent.htm). Within this DIV, you can include link(s) that when clicked on will toggle the state of the sticky bar, plus image(s) that change automatically based on the bar's state (such as an open gif to indicate the bar is currently closed, and hence can be opened, and visa versa). The syntax for these controls are:
-
<a href="#togglebar">link</a>
: Any link you add inside the sticky DIV with its href attribute set to "#togglebar
" will toggle the state of the sticky bar when clicked on (expand or contract it). -
<img src="open.gif" data-closeimage="close.gif" data-openimage="open.gif" />
: Images with the "data-closeimage
" and "data-openimage
" attributes present will automatically change to reflect the state of the sticky bar using the two images' paths defined inside these two attributes.
Toggling a sticky bar outside the sticky DIV
You can also add links outside the sticky bar DIV that when clicked on toggles the sticky bar. The two methods at your disposal are:
-
stickyinstance.toggle()
: Toggles a sticky bar, so if it's contracted it will be expanded, and visa versa. -
stickyinstance.showhide("show"|"hide")
: Expands or contracts a sticky bar. Enter a parameter value of either "show
" or "hide
".
Where stickystance
should be replaced with the
variable name used when you first invoked the new expstickybar()
function (ie: mystickybar). For example:
Defining the path to the external file that contains your sticky DIV markup
The path to the external file on your server containing the sticky DIV's markup is defined inside the initialization code at the end of expstickybar.js:
var mystickybar=new expstickybar({
id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'stickybarcontent.htm', //path to sticky bar content file
on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)
})
When you specify just the file name of this file (ie: "stickybarcontent.htm
"),
the script assumes this file is in the same directory as the script page
displaying the sticky bar. You can also add on additional paths to the filename,
or even use an absolute URL to this file as well, such as:
var mystickybar=new expstickybar({
id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'http://www.mysite.com/files/stickybarcontent.htm', //path to sticky bar content file
on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)
})
You cannot, however, specify an absolute URL that's outside your server's domain, such as "http://www.google.com/stickybarcontent.htm', as Ajax security dictates that the calling page and page to be fetched via Ajax must be from the same domain.
Finally, if the entire markup of your sticky DIV is simply
defined inline on the script page showing the sticky bar itself, just set the "externalcontent
"
setting to a blank string (""), and the script will know to look for the DIV on
the current page:
var mystickybar=new expstickybar({
id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'', //path to sticky bar content file
on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)
})
new expstickybar()
function reference
The following describes all the settings of the constructor
function expstickybar()
for your reference:
setting | Description |
id Required |
The ID of the DIV containing the markup of
this sticky bar. This DIV can either be defined inline on the page (with
the externalcontent setting set to ""), or inside a
separate HTML file (with the
externalcontent setting set to path_to_file ). For
example:<div id="stickybar"
class="expstickybar">
|
position defaults to "bottom" |
Sets the position of the sticky bar relative
the browser window. Either a value of either "bottom " for
the default bottom bar, or "top " for a top sticky bar
instead. |
revealtype defaults to "mouseover" |
Sets how the sticky bar is revealed. A value of " |
peekamount defaults to 30 (pixels) |
The number of pixels of the sticky bar that is revealed when it is contracted. |
externalcontent defaults to undefined |
Sets the path on your server relative to the current page where the file
containing the sticky bar markup is located. If the markup is defined
inline on the page, set this option to an empty string ("") instead. For
example: var mystickybar=new expstickybar({
|
speed defaults to 200 (milliseconds) |
Sets the speed -or duration- of the slide animation used to animate the sticky bar, in milliseconds. The default duration is 200 milliseconds. |