How To Create PopOvers?

JavaScript
1

Hey there,

I’m trying to find out what the best way to create a simple popover is without having to fork out for it.

I want to be able to do pretty much exactly what happens on this site, wait for the popover to come down after the page has loaded, I would like something similar to that.

I don’t even know if this can be done without buying the software but I thought I would ask here to see if any of you guys knew how to do it.

Thanks a lot :slight_smile:

2

First,
Welcome to Sitepoint. It looks as though you’ve recently joined :slight_smile:
Second,
Don’t buy their software. Please. Don’t.
Third, really? I’d love to help, but I literally can’t stand those pop-overs. They do get my attention, and every time they’re annoying. However I suppose I’m saying this without any context on what you might be using them for.

If it is in fact user initiated, like some sort of dialog component, I can see merit. Nevertheless, here is a [stubbed out 2 minute version I put together using [url=http://developer.yahoo.com/yui]Yahoo UI](file:///Users/ddiaz/Desktop/pop-over.html).

3

hi tetley07.
you can put anything you want to popin in a div with theese properties:

#popup {
position:absolute;
display:none;
top:50px;
left:50px; /* you should change left and top */
width:200px;
height:200px;
}

you should put #popup div right after <body> tag (or just before </body> )
in header tag, add this:

<script type="text/javascript">
window.onload=function(){
document.getElementById('popup').style.display='block';
};
</script>

ok, now you have a popIN window :slight_smile: Ofcourse, we have to hide the window, right?
for that, you should have a button on your page (let’s assume we have <a> tag). You have to do this way:

<a href="#" onclick="document.getElementById('popup').style.display='none'; return false;">CLOSE</a>

And there you go :slight_smile:

For animation effect you can use either a library (there is A LOT others) like jquery, or, like mister Diaz tell before, with YUI.
For jquery, you have to change your css to something like top:-500px. The code for that is:

$(document).ready(function(){
$('#popup').animate({top:600})
})

(ofcourse, you MUST include jquery.js :slight_smile:

I hope this will help you. And DON’T buy that software :slight_smile:

4

i0nutzb also nailed it. everything except the animation can be done with some simple logic. Unfortunately, I simply refuse to do animation without a library. As mentioned, jQuery and YUI both do it quite well. Even scriptaculous can do the the top animation with something like Effect.SlideDown. I think your best bet for something like this is jQuery.

Nevertheless, there are other factors to take into account, for instance, when a user scrolls down the page, and also at which point do you want to show this popover dialog, and lastly if the user ever wants to see this thing again (if it’s an ad) - then you’ll want to dive into cookies to store their preference. I used Jim Auldridges Cookie Library for that. It’s well-written, namespaced, and abstracts the dirty work for you :slight_smile:

5

polvero, the first link you posted points to your desktop :D.
“…here is a stubbed out 2 minute version.”

6

Ahahaha. Awesome! That’s too funny. here’s where it really is:
http://dustindiaz.com/basement/pop-over.html