WOAHbar! Free HelloBar.com alternative source code


“WOAHbar! is an open source light-weight javascript notification bar you can plug into any website or blog in 5 minutes!”

I recently found a really cool notification popup bar called Hellobar.com and decided to try it on Jobdeals.com

I love what they’re doing, but wasn’t interested in paying $5 a month for a plugin I can write in an evening..  so I decided to whip up a hellobar.com alternative and then post it here for everyone to use on your their own website!

Introducing the WOAHbar! See it in action here http://www.jobdeals.com/about/

hellobar source code

Hellobar.com free alternative

This catchy notification bar is great for increasing sales of a product or ebook on your website, growing your newsletter or promoting your brand.

If you’re a web developer, graphic designer, or offer services – make sure to create a profile on Jobdeals.com and let the customers come to you!

Here are the graphics (right click on each and pick ‘Save As’):

Up Arrow

Up Arrow Hover

hellobar.com source code example

Down Arrow

Make sure to include these jquery dependancies inside the <head> tag if your project doesn’t already:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

Here’s the code… let’s start with the javascript you can paste somewhere in the <head> tag:

<script type="text/javascript">
    var stub_showing = false;
 
    function woahbar_show() { 
        if(stub_showing) {
          $('.woahbar-stub').slideUp('fast', function() {
            $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
            $('body').animate({"marginTop": "2.4em"}, 250);
          }); 
        }
        else {
          $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
          $('body').animate({"marginTop": "2.4em"}, 250);
        }
    }
 
    function woahbar_hide() { 
        $('.woahbar').slideUp('fast', function() {
          $('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);  
          stub_showing = true;
        }); 
 
        if( $(window).width() > 1024 ) {
          $('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body
        }
    }
 
    $().ready(function() {
        window.setTimeout(function() {
        woahbar_show();
     }, 5000);
    });
</script>

Now put this after the <BODY> tag:

<div class="woahbar" style="display:none">
   <span>
       Welcome to Jobdeals! Need some help from a local service pro? <a class="woahbar-link" href="/request-services/">Request a Service FREE</a>
    </span>
    <a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="woahbar-up-arrow.png"></a>
</div>
<div class="woahbar-stub" style="display:none">
    <a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="woahbar-down-arrow.png"></a>
</div>

This has been tested with all modern browsers (Chrome, FF, Safari, ioS/Android, IE, etc). You’re good to go!

Here are the styles:

.woahbar
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 19px;
  z-index: 100;
  padding: 5px 0 5px 0;
  text-align: center;
  font-size: 110%;
  color: #fff;
  background-color: #EB593C;  /* << set custom bar color here */
  box-shadow: 0px 0px 5px #888888;
  -moz-box-shadow:0px 0px 5px #888888;
  -webkit-box-shadow:0px 0px 5px #888888;
  border-bottom: 3px solid #fff;
  font-family: Georgia,Times New Roman,Times,serif;
}
 
.woahbar-stub
{
  position: fixed;
  top: -10px;
  left: 0px;
  width: 100%;
  height: 19px;
  z-index: 200;
  padding: 7px 0 5px 0;
  text-align: center;
}
 
.woahbar span
{
  float: left;
  width: 95%;
  text-align: center;
  padding-top: 2px;
}
 
.woahbar-link
{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
 
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
  background: linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
  -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.28);
  color: white;
  padding: 2px 8px 1px 8px;
}
 
.woahbar-down-arrow:hover {
  background-color: #ff7f62; /* << set custom hover bar color here */
}
 
.woahbar-up-arrow:hover {
  background: url(woahbar-up-arrow-hover.png);
}
 
.woahbar-link:hover
{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
 
  background: #5c5c5c; /* Old browsers */
  background: -moz-linear-gradient(top, #5c5c5c 0%, #696969 12%, #777777 25%, #575757 39%, #3c3c3c 50%, #111111 51%, #111111 60%, #3b3b3b 76%, #2c2c2c 91%, #232323 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(12%,#696969), color-stop(25%,#777777), color-stop(39%,#575757), color-stop(50%,#3c3c3c), color-stop(51%,#111111), color-stop(60%,#111111), color-stop(76%,#3b3b3b), color-stop(91%,#2c2c2c), color-stop(100%,#232323)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39%,#3c3c3c 50%,#111111 51%,#111111 60%,#3b3b3b 76%,#2c2c2c 91%,#232323 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39%,#3c3c3c 50%,#111111 51%,#111111 60%,#3b3b3b 76%,#2c2c2c 91%,#232323 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39%,#3c3c3c 50%,#111111 51%,#111111 60%,#3b3b3b 76%,#2c2c2c 91%,#232323 100%); /* IE10+ */
  background: linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
  -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.28);
  color: white;
  padding: 2px 8px 1px 8px;
  text-decoration: none;
}
 
.close-notify
{
  float: right;
  margin-right: 22px;
  color: #fff;
  width: 17px;
  height: 19px;
  text-decoration: none;
  background-color: #EB593C; /* << set custom bar color here */
  cursor:pointer;
}
 
.show-notify
{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 3px solid #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.35);
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.35);
  float: right;
  margin-right: 10px;
  color: #fff;
  width: 35px;
  height: 33px;
  text-decoration: none;
  background-color: #EB593C; /* << set custom bar color here */
  cursor:pointer;
}

Customization

You can easily change the color of the bar with the 4 properties in the style section anywhere you see :

/* << set custom bar color here */

The graphics are transparent so they’ll work over every bar color!

That’s it! Let me know how it works out for you!

Rob
@robstar


Hellobar.com clone, hellobar.com source code, hellobar.com alternative, free hellobar, hellobar example, hellobar jquery, hello bar jquery

This entry was posted in Spotlight, Web Designers and Web Developers and tagged , , , , , , , , , . Bookmark the permalink.

4 Responses to WOAHbar! Free HelloBar.com alternative source code

  1. Zoran says:

    Yo nice i was just looking for something similar a bit ago. This is a great hello bar alternative. All you need is jquery and some css for this free hellobar.com source code

  2. Florian says:

    Exactly what i was looking for!
    Thanks for this great work!

  3. Casey says:

    I love HelloBar but not their per-click billing model. This is a great alternative less the click tracking and other stats; however, you could set this up to push events to Google Analytics and have similar insight into it’s effectiveness.

    Thanks for the code to get me started on building my own HelloBar clone!