How to Create Call-To-Action Notification Bars with jQuery jBar

Call-to-action notification bars help you announce latest deals and offers right inside a floating notification bar at the top of the website. It has been a great importance in web design. If you are a web designer then you might like to try this. And by the way, I have also written an article for WordPress users about Top 10 WordPress Plugins to Display Sticky Notification Bar.

So, if you want to announce any latest deals and offers that took place on your website you may try jBar jQuery plugin. If you use jBar on your website that’s awesome, because your visitors will not be disturbed yet notification bars will easily catch the attention of visitors without disturbing them.

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.

Call-to-action bars are really amazing to announce new promotions, offers, and deals. AND its great for such usage and a jQuery plugin eases creating them.

jBar jQuery plugin helps you add notifications at the top of the webpage and toggles automatically for a few seconds. After that user can click to a arrow down to show/hide it.

How Add jBar on an HTML webpage Website

All you need to do is, 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>
<script>
    $(function() {
        $.jBar({
            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: 'http://www.toddmotto.com' // Hyperlink from button
        });
    });
</script>