Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Hidden Div Movin' Around

    Hey guys! How are ya?


    Gettin' right to the point, I need a help!

    I already created a javascript code to hide my div when click on close "[x]". What I need to do is get it movin' around the website

    here's the code:

    it's between <head></head>
    Code:
    <script language=javascript type='text/javascript'>
    function hidediv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('hideShow').style.visibility = 'hidden';
    }
    else {
    if (document.layers) { // Netscape 4
    document.hideShow.visibility = 'hidden';
    }
    else { // IE 4
    document.all.hideShow.style.visibility = 'hidden';
    }
    }
    }
    
    function showdiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('hideShow').style.visibility = 'visible';
    }
    else {
    if (document.layers) { // Netscape 4
    document.hideShow.visibility = 'visible';
    }
    else { // IE 4
    document.all.hideShow.style.visibility = 'visible';
    }
    }
    }
    </script>

    and it's between <body></body>
    Code:
    <div id="hideShow">
    <img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div>
    and it's in CSS
    Code:
    #hideShow {
    	position:absolute;
    	margin: 300px 110px;
    	}
    thx!
    Last edited by oracleguy; 08-26-2010 at 10:13 PM. Reason: Please use code tags when posting

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    You *REALLY* care about Netscape 4 and MSIE 4???? You REALLY think people are still using browsers that were obsolete by 2001???

    Anyway, what do you mean by "move around the website"?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry... I just picked up this code in a random website. Now it's clean.

    hum... I want it to move around the site in a random trajectory. Just move... and move. =P

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    You mean like bounce off the walls?

    A truly random trajectory (each tiny incremental move made randomly, also known as a "drunkard's walk") might not really move much at all. After all, the random moves will *tend* to cancel each other out.

    bouncing off walls--or maybe going in a straight line for a random length before changing--gives a better "look" to it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    bouncing off walls--or maybe going in a straight line for a random length before changing--gives a better "look" to it.
    Exactly this!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    WHICH? Bouncing off walls? That is, only changing direction when it hits a wall? And when the direction changes, do you want the bounce to be random? (That is, if it hits the right wall on its way down, could it bounce back *up*? An unnatural bounce?)

    Or the other?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    Here...kind of on the spur of the moment. Needs a bit of clean up, but mostly works okay.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
    <script type="text/javascript">
    var deltax = 1 + Math.floor( Math.random() * 4 );
    var deltay = 1 + Math.floor( Math.random() * 4 );
    var x = 0;
    var y = 0;
    var maxx = 800 - 150;
    var maxy = 600 - 150;
    var delay = 20;
    
    var mover = null;
    
    function moveit( )
    {
        mover = document.getElementById("flyer");
        x += deltax;
        y += deltay;
        if ( x > maxx ) x = maxx;
        else if ( x < 0 ) x = 0;
        if ( y > maxy ) y = maxy;
        else if ( y < 0 ) y = 0;
        mover.style.top  = y + "px";
        mover.style.left = x + "px";
    
        if ( x == 0 || x == maxx || y == 0 || y == maxy )
        {
            var dx = 1 + Math.floor( Math.random() * 4 );
            var dy = 1 + Math.floor( Math.random() * 4 );
            if ( x==0 || x == maxx ) deltax = ( deltax > 0 ) ? -dx : dx;
            if ( y==0 || y == maxy ) deltay = ( deltay > 0 ) ? -dy : dy;
        }
        setTimeout( moveit, delay );
    }
    </script>
    <style type="text/css">
    div#ground {
        position: relative;
        width: 800px; height: 600px;
        border: solid red 3px;
        background-color: pink;
    }
    div#flyer {
        position: absolute;
        width: 150px; height: 150px;
        border: solid brown 1px;
        background-color: wheat;
        color: brown;
        text-align: center;
        vertical-align: center;
    }
    </style>
    </head>
    <body onload="moveit();">
    <center>
    <h2>This is some stuff above the ground.</h2>
    <div id="ground">
        <div id="flyer">
            <br/>FLY AWAY!
            <br/>FLY AWAY!
            <br/>FLY AWAY!
            <br/>FLY AWAY!
            <br/>FLY AWAY!
        </div>
    </div>
    </center>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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