...

View Full Version : 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>


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


<div id="hideShow">
<img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div>


and it's in CSS

#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
bouncing off walls--or maybe going in a straight line for a random length before changing--gives a better "look" to it.

Exactly this! :D

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.


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum