jBar Plugin, the jQuery call to action bar blog post

jBar Plugin, the jQuery call to action bar

Todd Motto

8 Apr, 2012


3 minutes read

jBar is a simple and lightweight jQuery notification bar that’s been revisited and rewritten (18.11.2012) as an official plugin, which serves up loads of easy customisable options. The jBar allows you to create a simple call to action and bring it forward for the user to see at the top of your website. The user can then toggle the visibility of the bar by clicking the ribbon.


jBar was created to provide a lightweight plugin to replace the restrictions provided by Hellobar and allow easy implementation and customisation for you or your client’s websites. Hellobar you also have to pay for if you want an unbranded version, which is no fun. There’s nothing like full control over your code.


The jBar sits at the top of your website, and is fully customisable.

The rest of the options are up to you:

type: ‘fixed’ – Two options for the jBar, fixed or static positioning. Fixed is always there when scrolling, and static remains at the top at all times.

Once you've finished reading this post, do you want to learn even more?


Learn JavaScript for FREE!

We've created the best online course for you to fully master JavaScript using real-world examples and techniques you’ll find nowhere else.

  • ES2015 and beyond
  • Variables and Scoping
  • Strings, Numbers and Booleans
  • Conditional Statements
  • Operators
  • Modules
  • Arrays and Objects
  • Functions and Closures
  • Loops and Iteration
Get course Get javascript Basics

delay: ’1000′ – In milliseconds, change to anything you like.

backgroundColor: ‘#DB5903′ – Use a HEX colour here, use any you like. This is the background colour for the jBar and also the ribbon, so the two match up.

borderColor: ‘#FFF’ – Use a HEX colour here too, change the border colour to suit your website.

buttonTextColor: ‘#FFF’ – Change the button text colour.

buttonColor: ‘#333′ – Change the button’s colour.

backgroundColorHover: ‘#222′ – Hover styles for the button.

calltoAction: ‘jBar Plugin!’ – Add anything you like to display your message.

buttonText: ‘Download it!’ – The text to go inside the button, add anything you like. Shorter the better though.

buttonLink: ‘https://www.toddmotto.com’ – The hyperlink of your button. Send it anywhere.


Simply include the plugin file, jQuery (jbar.js) in your page, and customise the options set out below:

<script src="jquery.js"></script>
<script src="jbar.min.js"></script>
  $(function() {
          type: 'fixed', // fixed/static (lowercase)
          delay: '1000', // In milliseconds
          backgroundColor: '#DB5903', // Background Color
          borderColor: '#FFF', // Background Color
          buttonTextColor: '#FFF', // Button Text
          buttonColor: '#333', // Button Color
          buttonColorHover: '#222', // Button Color Hover
          calltoAction: 'jBar Plugin! A simple and lightweight notification banner.', // Call to action text
          buttonText: 'Download it!', // Button Text
          buttonLink: 'https://www.toddmotto.com' // Hyperlink from button


All you need to do is download the source code, and hook up the scripts with your website. If you need some support, feel free to comment and I’ll provide some help.

About the author

Todd Motto profile picture

Todd Motto

GDE Google Developer Expert

Todd is the Founder of Ultimate Courses. With a passion for Angular, TypeScript and JavaScript, Todd leads the online courses creation and has written hundreds of articles on front-end web development and beyond. He specialises in breaking down complex topics and understands the critical mission of learning new technology fast, comprehensively and the right way.

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we'd love it if you'd spare a moment to share them!

Explore our JavaScript courses

Get started today and join over 60,000 developers.