Moving Elements from Point to Point in DHTML


Have we not heard the chimes at midnight ?
x : y :







The code is as shown below.

<HEAD>

<TITLE>Moving Elements from Point to Point</TITLE>

<SCRIPT LANGUAGE="JavaScript" SRC="../include/browser.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

function setPosition (x, y)
{
	document.aForm.leftVal.value = x;
	document.aForm.topVal.value = y;
}

function moveItem (curElem, mTop, mLeft)
{
	var dom;

	dom = eval (docObj + '.' + curElem + styleObj);
	if (mTop > 200) { mTop = 200; }
	if (mLeft > 500) { mLeft = 500; }
	if (mTop < 150) { mTop = 150; }
	if (mLeft < 150) { mLeft = 150; }
	dom.top = mTop;
	dom.left = mLeft;
	setPosition (mLeft, mTop);
}

</SCRIPT>

</HEAD>

<BODY onLoad="setPosition(150, 150);">

<A HREF="../dhtmlidx.html">Dynamic HTML Index</A><BR><BR>

<DIV ID="moveit" STYLE="position: absolute; left: 100px; top: 100px; font: bold 12pt/12pt times; color: red; background-color: pink;">
	Have we not heard the chimes at midnight ?
</DIV>

<FORM ACTION="(Empty Reference!)" NAME="aForm" METHOD="get">
	x : <INPUT TYPE="text" NAME="leftVal" VALUE=document.aForm.leftVal.value SIZE="3">
	y : <INPUT TYPE="text" NAME="topVal" VALUE=document.aForm.topVal.value SIZE="3"><BR><BR>
	<INPUT TYPE="button" VALUE="Move" onClick="moveItem('moveit',document.aForm.topVal.value,document.aForm.leftVal.value);">
</FORM>