Hi Guys,
Working on a project I wanted to have a notification bar that is flexible enough to me to include my
- Youtube Video
- Any number of messages
- My social links
- Allow user to show hide it
- Auto adjust margins where applicable
- 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
[ltu]
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 |
|---|---|
| notificationAreaHeight | 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 |
| notificationAreaCollapsedHeight |
Minimum height of collapsed notification bar. |
| notificationAreaCollapsedBarBackground | Backgournd color of collapsed notification bar |
| notificationAreaPadding | Padding for notification bar element. Careful with super high values |
| notificationAreaBackground | Backgroud color for your notification bar |
| notificationAreaBorderSize | Border size of your notification bar, Left and Right border size will always be ZERO |
| notificationAreaBorderColor | Notification area border color |
| notificationAreaBorderRadius:8, |
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 |
| notificationAreaPosition | default value is fixed-top Other values
|
| notificationAreaShadow | Displays a shadow under the notification bar to give extra crisp |
| notificationAreaShadowColor |
Defines a shadow color, HEX/rgb color values |
| notificationAreaInitialDisplay | default value is delayed Other values
|
| notificationAreaDelay | A delay value that is applicable if notificationAreaInitialDisplay is set to ‘delayed’ |
| notificationAreaBorderAnimationWhenShown | a border color animation will be performed |
| notificationAreaEasing | When user show/hides the notification bar what easing type should be used. default is ‘easeOutQuad’ Get more information from http://jqueryui.com/effect/ |
| notificationAreaAutoHide:false, |
If you would like to auto hides your notification bar after N seconds, mark this value as true and adjust notificationAreaAutoHideDelay setting accordingly |
| notificationAreaAutoHideDelay | value must be in milisecond (so 15000 means 15 seconds) and will only be applied if notificationAreaAutoHide is set to true. |
| notificationAreaZIndex | 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. |
| hideAction | default value is collapse Other values
|
| keepHiddenOnRefreshIfUserHides | cookie based setting and will allow user to permanently hide notification bar on your site. Cookies must be enabled to make this work. |
| attentionSeeker | set this to true if you want to run a border animation every 15 seconds |
| attentionSeekerColor:”#2fff51″, |
Border Start Color for your attention seeker |
| notifications:[“Message 1″,”Message 2″,”Message 3”], |
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 |
| links:[“http://link1″,”http://link2″,”http://link1“], |
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 |
| linkTexts:[“Visit Author website”,”Try it FREE”,”Version 1 of this software”], |
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 |
| linkOnNewLine | If you want to move links to new line. Default is false. |
| notificationSlideInterval | This settings is applied to the flipper/slider, this actuall means that keep a message in user view for N milliseconds default is 15000 |
| notificationAreaAdjustBodyMargins |
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 |
|
| textFontFamily | Font family for notification message default is :’Georgia,Times New Roman,Times,serif’ |
| textFontSize | Font size for notification message. default is 14 |
| textColor |
Font color for message text, default value is #FFF |
| textShadow |
default is none, possible values include none | indent | normal |
| textShadowColor | defines text shadow color for notification message, default is #f1f1f1 |
| link Styles |
|
| linkFontFamily:’Georgia,Times New Roman,Times,serif’, |
Font family for notification link default is :’Georgia,Times New Roman,Times,serif’ |
| linkFontSize:11, |
Font size for notification link. default is 11 |
| linkPadding:5, |
link padding |
| linkBackground |
background color for your link if any, default is ‘#333’, override it with ” |
| linkColor | Font color for message text, default value is #FFF |
| linkShadow | default is none, possible values include none | indent | normal |
| linkShadowColor | defines text shadow color for notification message, default is #f1f1f1 |
| linkTextDecoration | default is none, possible values include none | underline |
| youtube video |
|
| youtubeVideoCode | A youtube video code i.e. in URL http://www.youtube.com/watch?v=GXJZJFSrIiU video code is GXJZJFSrIiU |
| youtubeVideoWidth:180, |
default width of youtube video. recommended value is on lower end. 180 or less |
| youtubeVideoHeight:136, |
default height of youtube video. recommended values is 136 or less |
| youtubeAutoPlay:false, |
autoplay video, set this to true if you like to autoplay youtube video |
| youtubeAllowFullScreen:false, |
If you would like users can fullscreen your youtube video then set this to true |
| youtubePlayerControls:true, |
if you would like to add controls to your video |
| Social |
|
| includeSocial:true, |
true or false |
| socialFollowFacebook |
Link to your profile page e.g. http://www.facebook.com/jaspreetchahal.org |
| socialFollowTwitter | Link to your twitter profile e.g. http://www.twitter.com/jschahal |
| socialFollowLinkedin | Link to your LinkedIn profile e.g. http://au.linkedin.com/pub/jaspreet-chahal/28/133/143/ |
| socialFollowGoogleplus |
Link to your Google Plus profile e.g.https://plus.google.com/115454845108821658209 (Add me if you like :)) |
| socialFollowRss |
Link to your RSS feed such as http://jaspreetchahal.org/feed |
| hideSocialYoutubeLowResolutions:true, |
if user is on mobile then hide Youtube and social links by default, set this to true (recommended) |
| powered by |
|
| showPoweredBy:true | 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. |
[/ltu]
I am pretty hopeful that you will provide some good feedback on this plugin
Works with
Tested on all major browsers’ latest releases
Donations
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
- Web Hosting Fees
- Cable Internet Fees
- Time/Value Reimbursement
- Motivation for Continuous Improvements
Change log
1.0
* 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!
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,
Bertrand