Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
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