jQuery Fixed Bar

Overview
Places a non-moving div bar on the top or bottom of the webpage.

Instructions

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- ===== Required files for jQuery Message Center ===== -->
<script src="jquery.fixedBar.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$().fixedBar({
position: 'bottom',
height: '25',
style: 'customBar'
});
});
</script>

<!-- ===== End of Required files ===== -->


<body>
<div id="fixedBar"></div>
</body>


Arguments
position: ['bottom', 'top'] (Optional) String
A string that positions the fixedBar to the Top or Bottom of webpage.

height: 25 (Optional) Integer
A integer representing the height in pixels

style: ['ui-widget-content', 'custom'] (Optional) String
A string representing a CSS class to customize fixedBar


Download
jquery jQuery Project Page


About these ads
Tagged ,

3 thoughts on “jQuery Fixed Bar

  1. Diego Arbelaez says:

    Pretty nice, unfortunately does not seem to work in IE7 (not tested in 6 or 8).
    Produces a JS error (undefined console). even with the console line code removed, it does not position div at the bottom of the page in IE7. looks very nice in Firefox 3 and Chrome.

    • tlezotte says:

      Thanks for the comment Diego. I wrote this plugin in a short time and only tested it in Firefox. Next release I’ll test all browsers.

      • Anton says:

        You can fix the issue in IE7 by adding
        $( “body” ).css( “margin”, “0 auto” );
        right above
        $(selector).addClass(defaults.style).css(cssObj);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: