jQueryBar – A jQuery Notification bar plugin

Hi Guys,

Working on a project I wanted to have a notification bar that is flexible enough to me to include my

  1. Youtube Video
  2. Any number of messages
  3. My social links
  4. Allow user to show hide it
  5. Auto adjust margins where applicable
  6. and many other requirements

So I begun developing jQueryBar

Here is a quick video on what could be achieved rather than writing it down I just created a video



Demos and all are hosted on my jquerybar.com website so you can go check them out. I am pretty hopeful to add more in future. But here are some settings that are possible.

jQuerybar settings

Here are settings that you can make use of with jQueryBar.

Setting Explanation
Height of your Notification Bar. Minimum 40 recommended. enforced 40 if below 40. This will auto
adjust if you try to include a Youtube Video
Minimum height of collapsed notification bar.
Backgournd color of collapsed notification bar
Padding for notification bar element. Careful with super high values
Backgroud color for your notification bar
Border size of your notification bar, Left and Right border size will always be ZERO
Notification area border color
I am not sure if you will end up using this but this setting defined border radius and will only be applied to either top-right, top-left or bottom-left, bottom-right corners
default value is fixed-top Other values

  1. fixed-topkeep notification bar always visible at the top
  2. document-topSrolls out of view with user scroll
  3. fixed-bottomkeep notification bar always visible at the bottom
Displays a shadow under the notification bar to give extra crisp
Defines a shadow color, HEX/rgb color values
default value is delayed Other values

  1. delayedShows notification bar after notificationAreaDelay milliseconds
  2. expandedExpands the notification bar immidiately after page load
  3. collapsedKeep the notification bar collapsed
A delay value that is applicable if notificationAreaInitialDisplay is set to ‘delayed’
a border color animation will be performed
When user show/hides the notification bar what easing type should be used. default is ‘easeOutQuad’ Get more information from http://jqueryui.com/effect/
If you would like to auto hides your notification bar after N seconds, mark this value as true and adjust notificationAreaAutoHideDelay setting accordingly
value must be in milisecond (so 15000 means 15 seconds) and will only be applied if notificationAreaAutoHide is set to true.
Sometimes you may have other layers to show that gets priority over other content. You can move notification bar at the top by adjusting this value. Higher value means notification bar layer get priority over other.
default value is collapse Other values

  1. collapseThis is the default value where user should be able to hide and show your notification bar
  2. hideIf set to hide then notification bar is hidden temporarily until user refresh the page. You can make it permanent if keepHiddenOnRefreshIfUserHides is set to true
cookie based setting and will allow user to permanently hide notification bar on your site. Cookies must be enabled to make this work.
set this to true if you want to run a border animation every 15 seconds
Border Start Color for your attention seeker
These are the messages that will be displayed on youy notification bar. Keep in mind that- maximum notification length (recommended) in number of characters is 150 including anchor tags maximum notification length (recommended) in number of characters is 85 including anchor tags if you are
targeting mobile devices
set up links that will go with your message. Please note that in the example on left hand side http://link1 is for Message 1 and so on
set up links text will go with your message links. Please note that in the example on left hand side Visit Author website is forhttp://link1 and will result in this HTMLVisit Author website
If you want to move links to new line. Default is false.
This settings is applied to the flipper/slider, this actuall means that keep a message in user view for N milliseconds default is 15000
If you would like that the content of your website are always visible i.e. they shouldn’t hide behind the notification bar when it initially loads then set this to true.
Font Styles
Font family for notification message default is :’Georgia,Times New Roman,Times,serif’
Font size for notification message. default is 14
Font color for message text, default value is #FFF
default is none, possible values include none | indent | normal
defines text shadow color for notification message, default is #f1f1f1
link Styles
Font family for notification link default is :’Georgia,Times New Roman,Times,serif’
Font size for notification link. default is 11
link padding
background color for your link if any, default is ‘#333’, override it with
Font color for message text, default value is #FFF
default is none, possible values include none | indent | normal
defines text shadow color for notification message, default is #f1f1f1
default is none, possible values include none | underline
youtube video
A youtube video code i.e. in URL http://www.youtube.com/watch?v=GXJZJFSrIiU video code is GXJZJFSrIiU
default width of youtube video. recommended value is on lower end. 180 or less
default height of youtube video. recommended values is 136 or less
autoplay video, set this to true if you like to autoplay youtube video
If you would like users can fullscreen your youtube video then set this to true
if you would like to add controls to your video
true or false
Link to your profile page e.g. http://www.facebook.com/jaspreetchahal.org
Link to your twitter profile e.g. http://www.twitter.com/jschahal
Link to your LinkedIn profile e.g. http://au.linkedin.com/pub/jaspreet-chahal/28/133/143/
Link to your Google Plus profile e.g.https://plus.google.com/115454845108821658209 (Add me if you like :))
Link to your RSS feed such as http://jaspreetchahal.org/feed
if user is on mobile then hide Youtube and social links by default, set this to true (recommended)
powered by
Show your support. A back link to http://jaspreetchahal.org or kindly purchase a license for just $19.99 bucks and put value to false.


I am pretty hopeful that you will provide some good feedback on this plugin

Works with

Tested on all major browsers’ latest releases



If you like this Plugin, please consider donating

You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work.
If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to
help support future updates and development.

        Main uses of Donations

  1. Web Hosting Fees
  2. Cable Internet Fees
  3. Time/Value Reimbursement
  4. Motivation for Continuous Improvements


Change log

* Initial Release


Download and maintenance releases from GitHub

I hope that this plugin does some good to you.

Update Jan 2015: No Longer Maintained. Cheers!




  1. hey Jaspreet,

    Great job with Jquery bar, I like how flexible your script is! We developed a similar notification bar plugin, but with a bit less flexibility. I especially like your slider option, it’s very innovative.

    I have “+1ed” you,

    All the best,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.