68 users online (0 members and 68 guests)  

Thread: Fancy PoP UP


  Results 1 to 8 of 8
  1. #1
    Mr.Chaotix's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2005
    Posts
    14

    Fancy PoP UP

    Dunno if this has already been discussed but, could some 1 help me figure out how to make custom popups, ie popups with custom frames.
    Ref:
    http://img300.imageshack.us/img300/4567/untitled1copy5uy.th.jpg

    http://img300.imageshack.us/img300/4567/untitled1copy5uy.jpg

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Fancy PoP UP!

    Hi there Mr.Chaotix,

    what you saw on that site was not a 'new window' but a 'div' .
    Here is an example for you to try, it has these editable features...
    • start dropdown delay.
    • dropdown speed.
    • display time.

    ...as for the rounded corners, I have used a simple background-image for
    this effect, but of course this can be made more elaborate with a good
    image editor such as 'Photoshop'.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>drop down div with delays</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*<![CDATA[*/
    body {
    background-color:#fcfcfc;
    color:#000;
    }
    #container {
    width:500px;
    height:310px;
    background-image:url(http://achelous.mysite.wanadoo-members.co.uk/round_corner.gif);
    position:absolute;
    top:-330px;                             /*height value plus 20px;*/
    left:50%;
    margin-left:-250px;                     /*half the width value*/
    font-family:verdana,sans-serif;
    font-size:14px;
    color:#000;
    }
    #container p {
    text-align:justify;
    margin:35px;
    }
    /*//]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var i=-330;                    // this is the same as the "#container" top value
    var startDelay=5000;           // this is the div dropdown delay time in milliseconds
    var speedDown=60;              // this is the div drop down speed in milliseconds
    var displayTime=10000;         // this is the div display time in milliseconds
    function dropDiv() {
    document.getElementById("container").style.top=i+"px";
    if(i<50) {
    i+=8;
    dropper=setTimeout("dropDiv()",speedDown);
    } 
    else {
    clearTimeout(dropper);
    setInterval('removeDiv()',displayTime);
    }
    }
    function removeDiv() {
    document.getElementById("container").style.top=i+"px";
    if(i>-330) {
    i-=8;
    upper=setTimeout("removeDiv()",speedDown);
    }
    else {
    clearTimeout(upper);
    }
    }
    //]]>
    </script>
    </head>
    <body onload="setTimeout('dropDiv()',startDelay)">
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
    Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
    nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt 
    turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, 
    accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, 
    est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
    </p>
    </div>
    </body>
    </html>

  3. #3
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Fancy PoP UP!

    be warned though... you can get some very bad raves by having these!

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Fancy PoP UP!

    Hi there ALL
    be warned though... you can get some very bad raves by having these!
    What are the 'these' to which you refer.?
    Surely you cannot be referring to 'divs'

  5. #5
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Fancy PoP UP!

    i am talking about the popups that make you click "close" to get rid of them... like these:

    http://popuptest.com/popuptest8.html

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Fancy PoP UP

    So not divs then.

  7. #7
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Fancy PoP UP

    no, it uses divs! it uses javascript to move the div down the screen.

    so it uses a floating div in a bad way!

  8. #8
    Mr.Chaotix's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2005
    Posts
    14

    Thumbs up Re: Fancy PoP UP

    Thanx a lot friends.... its of great help!



Tags for this Thread