Dynamic Move Objects - JavaScript Made Easy

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Dynamic Move Objects		[View Sample]

Dynamic Movement brings you some very cool DHTML functionality. You can basically move any object that is positioned absolutely from any point to another.


Insert into <HEAD>


Insert into <BODY>
<script language="JavaScript" type="text/javascript"> <!-- // [DynamicMovement v1.2] // // date: 10/26/98 // // This script ables you to easily move // objects dynamically around the screen. // // NEW! for version 1.2: // // Cross-browser functionality, the script // now delivers DynamicMovement to both // MSIE 4.x and Netscape 4.x // // Commercial use prohibited. // // (C) Copyright Jari Aarniala, 1998 // [foo@dlc.fi - www.dlc.fi/~foo] IE4 = navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4; NS4 = navigator.appName.substring(0,8) == "Netscape" && parseInt(navigator.appVersion) >= 4; // checkBrowser() -- Checks whether the browser is new enough for some DynamicMovement ... function checkBrowser(){ if(IE4 \|\| NS4){ return true; } return false; } // movableObj() -- Creates a new movable object function movableObj(startX, startY, endX, endY, delay, speed, refId){ this.sX = startX; this.sY = startY; this.eX = endX; this.eY = endY; this.de = delay; this.sp = speed; this.ref = refId; xL = endX - startX; yL = endY - startY; with (Math){ if(abs(xL) > abs(yL)){ this.xS = (xL > 0)?1:-1; this.yS = (yL > 0)?abs(yL / xL):-abs(yL / xL); this.howManySteps = abs(xL / speed); } else if(abs(yL) > abs(xL)){ this.yS = (yL > 0)?1:-1; this.xS = (xL > 0)?abs(xL / yL):-abs(xL / yL); this.howManySteps = abs(yL / speed); } else { this.yS = (yL > 0)?1:-1; this.xS = (xL > 0)?1:-1; this.howManySteps = abs(xL / speed); } } this.startMovement = startMovement; } // startMovement() -- starts the movement function startMovement(){ if(checkBrowser()){ if(IE4){ ref = document.all(this.ref).style; } else { ref = document[this.ref]; } doDynamicMovement(this.sX, this.sY, this.eX, this.eY, this.de, this.xS, this.yS, ref, this.sp, this.howManySteps); } } // doDynamicMovement() -- does the Dynamic Movement function doDynamicMovement(curX, curY, eX, eY, sp, xS, yS, ref, speed, hS){ if(Math.floor(hS - 1) != 0){ hS--; curX += xS * speed; curY += yS * speed; ref.left = Math.round(curX); ref.top = Math.round(curY); setTimeout("doDynamicMovement(" + curX + ", " + curY + ", " + eX + ", " + eY + ", " + sp + ", " + xS + ", " + yS + ", ref, " + speed + ", " + hS + ")", sp); } else { setPos(eX, eY, ref); } } // setPos() -- sets the end position accurately when doDynamicMovement has done its job function setPos(x, y, ref){ ref.left = x; ref.top = y; } // --> </script> <script language="JavaScript" type="text/javascript"> <!-- // Here we define the movable object dynaText = new movableObj(-100,-100,180,280,10,10,"wow"); // --> </script> <body> <div align="center"><h1>Dynamic Movement</h1></div> <p>Dynamic Movement brings you some very cool DHTML functionality in both Netscape 4.0+ and MSIE 4.0+. You can basically move any object that is positioned absolutely from any point to another.</p> <p>In this demo, we move a DIV object from point (-100,-100) (in other words, off the screen and therefore invisible) to (180,280).</p> <form> <input type="button" onClick="dynaText.startMovement()" value="Do the movement!"> </form> <div id="wow" style="position: absolute; left: -100; top: -100; width: 300; font-family: Verdana, Arial, Helvetica; font-size: 20pt; color: #ff0000"> This is a dynamic object in motion.</div><br><br><br><br>

Other Options