Hidden Div Movin' Around

Apocalixto · 08-26-2010, 08:05 PM

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!

Old Pedant · 08-26-2010, 09:37 PM

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"?

Apocalixto · 08-26-2010, 10:40 PM

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

Old Pedant · 08-26-2010, 11:18 PM

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.

Apocalixto · 08-26-2010, 11:22 PM

Quote:

Originally Posted by Old Pedant

bouncing off walls--or maybe going in a straight line for a random length before changing--gives a better "look" to it.

Exactly this!

Old Pedant · 08-27-2010, 12:24 AM

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?

Old Pedant · 08-27-2010, 02:58 AM

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>