DIV innerhalb eines anderen DIV bewegen

[BobAndrews]

Hallo zusammen,
ich möchte einen DIV Container innerhalb eines anderen (übergeordneten) DIVs bewegen lassen. Dabei soll der sich bewegende DIV immer an den Rändern dieses übergeordneten DIVs abprallen und in die Gegenrichtung weiterfliegen.

Ich hab ein Script gefunden, das einen DIV innerhalb der Grenzen des Browserfensters bewegt. Wenn ich nun aber die Werte in den Funktionen getBodyWidth und getBodyHeight durch meinen übergeordneten Container (ID "contentscroll") ersetze passiert nichts mehr.

Was muss ich ändern?

<script type="text/javascript">

function startAnimation()
{
	oMyImage = document.getElementById( "myDiv" );
	myImageWidth = oMyImage.offsetWidth;
	myImageHeight = oMyImage.offsetHeight;
	dx = 2;
	dy = 2;
	posTop = 0;
	posLeft = 0;

	window.setTimeout( "moveImage()" , 1000 );
}

function getBodyWidth()
{
return (window.innerWidth)?window.innerWidth:document.body.offsetWidth;
//return (document.contentscroll.width); <--- Funktioniert nicht
}

function getBodyHeight()
{
return (window.innerHeight)?window.innerHeight:document.body.offsetHeight;
//return (document.contentscroll.heihgt); <--- Funktioniert nicht
}

function moveImage()
{
	posTop += dy;
	posLeft += dx;
	oMyImage.style.top = posTop + "px";
	oMyImage.style.left = posLeft + "px";

	if ( ( posTop >= getBodyHeight() - myImageHeight ) || ( posTop <= 0 ) )
	{
		dy *= -1;
	};

	if ( ( posLeft >= getBodyWidth() - myImageWidth ) || ( posLeft <= 0 ) )
		dx *= -1;

	window.setTimeout( "moveImage()" , 10 );
}
</script>

Danke und viele Grüße
Bob

 

[Quaese]

Hi,

das Element contentscroll muss mit position: relative ausgezeichnet sein. Im Script änder mal folgendes:

function getBodyWidth(){
  return document.getElementById("contentscroll").offsetWidth;
}

function getBodyHeight(){
  return document.getElementById("contentscroll").offsetHeight;
}

Vielleicht hilft Dir das weiter.

Ciao
Quaese