SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Create PopOvers?

    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 :-)

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First,
    Welcome to Sitepoint. It looks as though you've recently joined
    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 Yahoo UI.

  3. #3
    SitePoint Enthusiast i0nutzb's Avatar
    Join Date
    Mar 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi tetley07.
    you can put anything you want to popin in a div with theese properties:
    Code:
    #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:
    Code:
    <script type="text/javascript">
    window.onload=function(){
    document.getElementById('popup').style.display='block';
    };
    </script>
    ok, now you have a popIN window 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:
    Code:
    <a href="#" onclick="document.getElementById('popup').style.display='none'; return false;">CLOSE</a>
    And there you go

    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:
    Code:
    $(document).ready(function(){
    $('#popup').animate({top:600})
    })
    (ofcourse, you MUST include jquery.js

    I hope this will help you. And DON'T buy that software

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast SoMBrA's Avatar
    Join Date
    Oct 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    polvero, the first link you posted points to your desktop .
    "...here is a stubbed out 2 minute version."

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahahaha. Awesome! That's too funny. here's where it really is:
    http://dustindiaz.com/basement/pop-over.html


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •