DEV Community

Cover image for peekABar - jQuery plugin for a Notification Bar
Code And Deploy
Code And Deploy

Posted on

2 2

peekABar - jQuery plugin for a Notification Bar

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery-plugins/peekabar-jquery-plugin-for-a-notification-bar

In this post, I'm sharing how to implement a peekABar Simple Customizable jQuery plugin for a sticky notification bar. This is useful to implement in your product that needs notifications when the request has been processed successfully. And it is customizable with your own design you like.

Install and Download

Run the following command below:

npm install jquery-peek-a-bar --save
Enter fullscreen mode Exit fullscreen mode

Sample peekABar Working Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic on TinyMCE with Custom Dialog Box</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="dist/js/jquery.peekabar.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/css/jquery.peekabar.min.css">

    <style type="text/css">
        .custom-bar {
            color: white;
        }
    </style>
    <script>
        $(document).ready(function() {
            // Default
            var defaultBar = new $.peekABar();
            $('.btn-default-show').click(function () {
                $('.peek-a-bar').hide();
                defaultBar.show();
            });

            $('.btn-default-hide').click(function () {
                defaultBar.hide();
            });

            /**
            * Autohide Bar
            */
            var autohideBar = new $.peekABar({
                autohide: true,
            });

            $('.btn-autohide-show').click(function () {
                $('.peek-a-bar').hide();
                autohideBar.show();
            });

            $('.btn-autohide-hide').click(function () {
                autohideBar.hide();
            });

            /**
             * Custom bar
             */
            var customBar = new $.peekABar({
                autohide: true,
                backgroundColor: '#5892fc',
                color: '#fff',
                padding: '2em',
                cssClass: 'custom-bar',
                html: '<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Test message with custom bar style.'
            });

            $('.btn-custom-show').click(function() {
                $('.peek-a-bar').hide();
                customBar.show();
            });

            $('.btn-custom-hide').click(function() {
                customBar.hide();
            });
        });
    </script>
</head>
<body>
    <div class="container" style="margin-top:250px; text-align:center">
        <button class="btn btn-success btn-default-show">Default Bar</button>
        <button class="btn btn-danger btn-default-hide">Hide the Default Bar</button>
        <button class="btn btn-success btn-autohide-show">Auto Hide Bar</button>
        <button class="btn btn-success btn-custom-show">Custom Bar</button>
    </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery-plugins/peekabar-jquery-plugin-for-a-notification-bar if you want to download this code.

Happy coding :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay