'**************************************
' for :DHTML Layer Mover - Speed controlled.
'**************************************
<html>
<head>
<title>layer mover by Tim Abell</title>
<meta http-equiv="Content-Type" content="text/html;">
<script language="JavaScript">
<!--
// General Purpose JS Object Mover
// by Tim Abell (timothyabell@hotmail.com)
// June 2002
//
// Some code (browser compatibility and basic moving functionality)
// from a script by: David Sosnowski (support@codelifter.com)
// Hosted at The JavaScript Source!! http://javascript.internet.com
//
// Call the SlideObject() function to make a layer move.
//
//globals - speed settings, modify to suit.
var speed= 10;
var increment = 20;
var incrementNS4 = 10; // for slower NS4 browsers
//read browser ver and set appropriate strings
var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;
var Lq, Sq
GetNavSettings
//global reference to moving object & final destination.
var giEndX, giEndY, gsObjectName
function SlideObject(iEndX,iEndY,sObjectName) {
giEndX = iEndX
giEndY = iEndY
gsObjectName = sObjectName
TimedSlide()
}
function TimedSlide() {
var RetVal
RetVal = MoveStep(giEndX,giEndY,gsObjectName)
RetVal = !RetVal
if (RetVal) {
setTimeout('TimedSlide()',speed)
}
}
function MoveStep(iEndX,iEndY,sObjectName) {
//alert('MoveStep: Move '+sObjectName+ 'To ('+iEndX+','+iEndY+')')
var NewX, NewY
var XGap, YGap
var XDest, YDest
var CurX, CurY
//get current position
if (is_NS4) {
eval('CurX = '+Lq+sObjectName+Sq+'.left');
eval('CurX = '+Lq+sObjectName+Sq+'.top');
} else {
CurX = document.getElementById(sObjectName).style.left
CurY = document.getElementById(sObjectName).style.top
}
CurX = parseInt(CurX)
CurY = parseInt(CurY)
//work out direction & step size
// select case of gap:
// "0" - end
// "< increment" move to end
// "> increment" - move by increment
XGap = iEndX - CurX
YGap = iEndY - CurY
//step size X
if (XGap > 0) { //check sign of Gap
if (XGap > increment) { //check if increment would overstep final position
XDest = CurX + increment
} else {
XDest = CurX + XGap
}
} else {
if ( (-XGap) > increment) { //check if increment would overstep final position
XDest = CurX - increment
} else {
XDest = CurX + XGap
}
}
//step size Y
if (YGap > 0) { //check sign of Gap
if (YGap > increment) { //check if increment would overstep final position
YDest = CurY + increment
} else {
YDest = CurY + YGap
}
} else {
if ( (-YGap) > increment) { //check if increment would overstep final position
YDest = CurY - increment
} else {
YDest = CurY + YGap
}
}
//take the step
if (is_NS4) {
eval(Lq+sObjectName+Sq+'.left=XDest');
eval(Lq+sObjectName+Sq+'.top=YDest');
} else {
document.getElementById(sObjectName).style.left = XDest+"px";
document.getElementById(sObjectName).style.top = YDest+"px";
}
return ((XGap==0)&&(YGap==0)) //return whether at final destination
}//MoveStep
function GetNavSettings() {
if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
} else {
Lq = "document.all.";
Sq = ".style";
}
}
//-->
</script>
</head>
<body bgcolor="#003366" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" text="#FFFFFF" link="#B3D9FF" vlink="#B3D9FF" alink="#B3D9FF">
<p> </p>
<table border="1" cellspacing="0" cellpadding="5" bordercolor="#006633">
<tr><td width="50" height="50">
<a href="#" onMouseOver="SlideObject(19,55,'lyrTarget')">Home</a>
<td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50">
<tr><td colspan="9" height="50">
<tr><td colspan="4" height="50">
<td width="50" height="50">
<a href="#" onMouseOver="SlideObject(267,154,'lyrTarget')">Target</a>
<td colspan="4" height="50">
<tr><td colspan="9" height="50">
<tr><td colspan="9" height="50">
<tr><td width="50" height="50">
<a href="#" onMouseOver="SlideObject(16,306,'lyrTarget')">Target</a>
<td colspan="8" height="50">
<tr><td colspan="9" height="50">
<tr><td colspan="9" height="50">
<tr><td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50"> <td height="50">
<td width="50" height="50">
<a href="#" onMouseOver="SlideObject(517,456,'lyrTarget')">Target</a>
</table>
<div id="lyrTarget" style="position:absolute; width:28px; height:24px; z-index:1; left: 161px; top: 107px">
<!-- anything in this div tag will move -->
<p><font face="Arial, Helvetica, sans-serif" size="4">O</font></p>
</div>
</body>
</html>
code: Can't Copy and Paste this? Click here for a copy-and-paste friendly version of this code!
Terms of Agreement:
By using this code, you agree to the following terms...
You may use
this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
You may link to this code from another website, but ONLY if it is not wrapped in a frame.
You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.
'**************************************
' Name: DHTML Layer Mover - Speed controlled.
' Description:Moves a layer to a specified point at a predefined speed.
' By: Tim Abell
'
' Inputs:The main function: SlideObject(iEndX,iEndY,sObjectName), takes the parameters of the destination x, y and the layer to be moved to that point.
'
' Side Effects:Probably won't work with multiple layers at once. (conflicting global variables)
'
'This code is copyrighted and has' limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=2956&lngWId=14'for details.'**************************************
See the html above
Remove the top javascript or the bottom javascript section as its been "doubled up". Good stuff though! (If this comment was disrespectful, please report it.)
For some odd reason, PSC has Java and JavaScript together. This is NOT Java code. Please don't submit it as such. Even though I feel like it, I won't vote a 1 for this code. Please don't make this mistake in the future. (If this comment was disrespectful, please report it.)
(If this comment was disrespectful, please report it.)
Add Your Feedback
Your feedback will be posted below and an email sent to
the author. Please remember that the author was kind enough to
share this with you, so any criticisms must be stated politely, or they
will be deleted. (For feedback not related to this particular code, please
click here instead.)
6/6/2002 9:02:04 PM: 
