Hello Bar-Like code

I'm wondering if there's a tutorial or open source code that I can get to do a jQuery bar at the top of the screen that loads only t开发者_如何学Gohe first time someone visits my site. Basically like www.hellobar.com

Thanks, Wade

I hacked up an awesome popup bar last nite and released the source :

http://blog.jobdeals.com/2011/12/free-hellobar-com-alternative-source-code/

Just like HelloBar.com without the $5/month fee! See it in action here: http://www.jobdeals.com/about/

The jNotify plugin will do it: http://www.givainc.com/labs/jnotify_jquery_plugin.htm You'll need to wire up the cookies (or other mechanism) yourself for only displaying it once.

"Hello Bar" is just an HTML element (i.e. a div) that slides away.

You can achieve that effect by using jQuery's .slideUp() (Look here)

For the "do not show again" part, you'll have to work with cookies.

Unfortunately Robstar's demo was not working, so I created a full demo with FREE source files and full documentation download at: http://haatch.com/WOAHbar

I also took the time to make it available for mobile devices too! Just resize the browser window when you get there to see it, or view it on your mobile device!

I take no credit for the WOAHbar itself, this is 100% Robstar's code, I simply made it more available by creating the demo and full docs.

We should really upvote Robstar's post as, even though the demo doesn't work, the code is flawless. Robstar, get at me: https://stackoverflow.com/users/1624499/haatch

For people still interested in this, I have made an open-source JavaScript plugin, which is available here: https://github.com/AnandChowdhary/hello-bar

It's a great way to capture leads, announce a sale or discount, etc. It supports targeting based on location, referrer, A/B testing, etc. It is simple to use:

Install Hello Bar from NPM:

yarn add hello-bar

Initialize with text to display:

import HelloBar from "hello-bar";

new HelloBar({
  text: "Hello, world!"
});

Please visit the repository for more advanced code samples, like targeting and call-to-action buttons.