New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF2+ IE7+

Expandable Sticky Bar

Author: Dynamic Drive

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!


Directions: Developer's View

Step 1: Insert the following code in the HEAD section of your page

Select All

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">
<a href="#togglebar"><img src="open.gif" data-closeimage="close.gif" data-openimage="open.gif" style="border-width:0; float:right;" /></a>
Some sticky content
</div>

 

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 "mouseover" causes it to be expanded and contracted when the mouse rolls over and out of it. A value of "manual" on the other hand means the sticky bar will remain contracted unless

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({
 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:'somepath/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)
})

 

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.