What is jixedbar?

jixedbar is a jQuery plugin that lets you fix a horizontal bar at the bottom of your website or web application. This project was inspired by Facebook's fixed application/menu bar. This plugin is written and maintained by Ryan Yonzon.

How do I get it to work on my website or web app?

1. Get the latest copy of jixedbar, you can get it in two(2) ways:
   1. Project's download page (the easy way).
   2. or checkout the source code at Google Subversion (SVN) repository:

         svn checkout http://jixedbar.googlecode.com/svn/trunk/ jixedbar
      

2. Extract or copy the source on your web root then include this simple codes inside your HTML Head:

   <link type="text/css" href="/path/to/themes/default/jx.stylesheet.css" rel="stylesheet"/>
   <script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="/path/to/src/jquery.jixedbar.min.js"></script>
   <script type="text/javascript">
       $(document).ready(function() {
   		$("#sample-bar").jixedbar();
       });
   </script>
   

   Notes:

   • This package includes jQuery 1.4.2. Check for the latest version and if needed replace with the latest version/release.
   • Replace with the appropriate path. (scripts, themes, etc)

   Sample bar/menu items

   <div id="sample-bar">
   
      <ul>
         <li title="Home"><a href="http://your.domain.tld/"><img src="img/home.png" alt="" /></a></li>
      </ul>
   
      <span class="jx-separator-left"></span>
      
      <ul>        
         <li title="Around The Web"><a href="#"><img src="img/web.png" alt="Get Social" /></a>
            <ul>
               <li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
               <li><a href="http://twitter.com/account-name"><img src="img/twitter.png" title="Twitter" />Twitter</a></li>
               <li><a href="http://www.flickr.com/photos/account-name/"><img src="img/flickr.png" title="Flickr" />Flickr</a></li>
            </ul>
         </li>
      </ul>
      
      <span class="jx-separator-left"></span>
      
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      
      <ul class="jx-bar-button-right">
         <li title="Feeds"><a href="#"><img src="img/feed.png" alt="" /></a>
            <ul>
               <li><a href="http://your.domain.tld/feed/"><img src="img/feed.png" title="Content Feeds" />Content Feed</a></li>
               <li><a href="http://your.domain.tld/comments/"><img src="img/comment.png" title="Comment Feeds" />Comment Feed</a></li>
            </ul>
         </li>
      </ul>
      
      <span class="jx-separator-right"></span>
      
   </div>
   

What else should I know?

You can pass parameters on jixedbar to change how it look and/or behaves.

Option	Type	Description	Default
showOnTop	Boolean	Position the bar on top, instead of the default bottom.	false
transparent	Boolean	Make the bar transparent.	false
opacity	Float	Set bar's opacity level. (0.0 ~ 1.0)	0.9
slideSpeed	String or Integer	Set bar's hide/show slide effect speed. (fast ~ slow or 200 ~ 600)	fast
roundedCorners	Boolean	Enable or disable bar's rounded corner property.	true
roundedButtons	Boolean	Enable or disable button's rounded corner property.	true
menuFadeSpeed	String or Integer	Set menu fade effect speed. (fast ~ slow or 200 ~ 600)	250
tooltipFadeSpeed	String or Integer	Set tooltip fade effect speed. (fast ~ slow or 200 ~ 600)	slow
tooltipFadeOpacity	Float	Set tooltip fadeout opacity effect. (0.0 ~ 1.0)	0.8

Example:

$("#sample-bar").jixedbar({
    showOnTop: true,
    transparent: true,
    opacity: 0.5,
    slideSpeed: "slow",
    roundedCorners: false,
    roundedButtons: false,
    menuFadeSpeed: "slow",
    tooltipFadeSpeed: "fast",
    tooltipFadeOpacity: 0.5
});

Can I customize the way it'll look?

Yes! You can customize the bar's look/style by modifiying the bundled theme. Choose the theme that you want to modify (under "themes" directory) and edit the "jx.bar.css" stylesheet file. Also you can create your own by copying from one of the existing theme (for reference) and save it under "themes" directory with a different theme name.

CSS Class Reference:

Class	Description
jx-bar	Style for the main bar
jx-bar span	Separators. (width, background-color)
jx-separator-left	Separator's position. (float left)
jx-separator-right	Separator's position. (float right)
jx-bar-button li	Defines bar's button style.
jx-bar-button li:hover	Button hover effect.
jx-bar-button li a:*	Button's anchor text style.
jx-bar-button-tooltip	Button's tooltip style.
jx-bar div	Text container and arrow indicator style.
jx-bar iframe	iframe tag style.
jx-nav-menu	Drop up/down menu style.
jx-nav-menu a:hover	Menu item hover effect.
jx-nav-menu ul li a	Style for menu items.
jx-nav-menu-active	Style for active button. (button clicked state)
jx-arrow-up	Arrow indicator. (Up state)
jx-arrow-down	Arrow indicator. (Down state)
jx-tool-point-dir-down	Tooltip pointer direction state. (Down state)
jx-tool-point-dir-up	Tooltip pointer direction state. (Up state)
jx-hide	Hide container style.
jx-show	Show container style.

You can also change/replace the icons, if you wish to.

Will it work on different browsers?

Tested to work on Firefox, Chrome, Safari, Opera, IE8, IE7 and even on an old n' buggy IE6 browser.

How can I help or support this project?

Do you think this project is cool? If Yes, then please show your support by (any of the following):

• Adding a back-link to jixedbar's Google Code page.
• Got Facebook? Then visit jixedbar's Facebook page and simply click the "Like" button.
• Are you a fellow open source developer with an Ohloh account? You can rate this project on jixedbar's Ohloh page or give the author a "Kudo".

Credits

• Kudos to John Resig and the people behind the jQuery project.
• Yusuke Kamiyamane for the beautiful Fugue icons.
• This site is powered by Orinoco Framework.

Around the web

Find jixedbar around the web:

• @ Google Code
• Follow this project on Twitter
• Visit jixedbar's Facebook page
• Oh no! Ohloh

Live showcase:

• Svet Plus
• Robert Sperry - Artist Research Project

*** Are you using jixedbar on your website or app? Then we'd like to hear from you. Please email your site/app URL to jixedbar@gmail.com, so we can add it on our list.

License

jixedbar is available for use in all personal or commercial projects under both MIT and GPL licenses.

• 

• 
  •    Facebook
  •    Twitter
  •    Ohloh
  •    Google Code

•