Move Element

There are two scripts featured on this page:
Move Object 1 and Move Object 2.
Both move objects but are quite different.

MoveObject 1

A MouseOver event call will slide an element to a new position
on the Horizontal or Vertical axis.
A MouseOut event call will slide the element back to the original position.

MouseOver the Tab on the Left

A Standard
Vertical Slide Application

A Standard
Horizontal Slide Application

An Example OverRiding
the Initial Parameters

Link 1
Link 2
Link 3
Link 4

test test

Application Notes and Functional Code.

Click the TextArea to Toggle the Height.

// A MouseOver event call will slide an element to a new position
// on the Horizontal or Vertical axis.
// A MouseOut event call will slide the element back to the original position

// Application Notes

// The element to slide must have a unique ID name
// and inline style attributes for
// z-index, top and left.
// Other style attributes may be specified in a style class

// The MouseOver Event
// e.g.
// <div id="MySlide"
// style="position:absolute;z-index:10;top:100px;left:200px;width:200px;height:100px;background-color:red;text-align:center;border:solid black 1px;"
// onmouseover="zxcSlide('MySlide','H',-150,2,50);" onmouseout="zxcReturn('MySlide');"
// >
//Content<br>
//</div>
// where zxcSlide()
// parameter 0 = the unique ID name of the slide element    (string)
// parameter 1 = 'H' for Horizontal, 'V' for Vertical slide (string 'H' or 'V') ** see Note Below
// parameter 2 = the  + or - distance to slide the element  (digits)
// parameter 3 = the slide increment (mimimum 1 = slow)     (digits)
// parameter 4 = the slide speed     (mimimum 5 = fast)     (digits)

// The function 'zxcReturn()' will slide specific element to its neutral position.

// Note 1
// For normal use the parameters 1 to 4 are set on the first MouseOver event call
// To change these parameters use 'HH' or 'VV' for paremeter 1

// Note 2
// The z-index of the slide element is increased by 1 when active
// and returned to the original z-index when returned.
// When hiding the side element under another element that element must have a z-index
// of greater than the slide element z-index+1.

// The function 'zxcReturn()' will slide specific elements to their neutral position.
// As many slide element IDs as required may be specified as parameters.
// e.g.
// <div style="position:relative;z-index:14;width:300px;height:115px;left:0px;top:150px;">
// <div style="position:absolute;z-index:3;left:0px;top:0px;width:300px;height:115px;text-align:center;background-color:yellow;border:solid black 1px;" >
// <br>
// <a onmouseover="zxcSlide('MySlide3','H',150,1,100);zxcReturn('MySlide4','MySlide5');" onmouseout="">Link 1</a><br>
// <a onmouseover="zxcSlide('MySlide4','H',150,1,100);zxcReturn('MySlide3','MySlide5');" onmouseout="">Link 2</a><br>
// <a onmouseover="zxcSlide('MySlide5','H',150,1,100);zxcReturn('MySlide3','MySlide4');" onmouseout="">Link 3</a><br>
// </div>
// <div id="MySlide3" style="position:absolute;z-index:1;top:10px;left:100px;width:200px;height:50px;background-color:green"
// onmouseout="zxcReturn('MySlide3');" ></div>
// <div id="MySlide4" style="position:absolute;z-index:1;top:30px;left:95px;width:200px;height:50px;background-color:#FF66FF"
// onmouseout="zxcReturn('MySlide4');"  onmouseover="clearTimeout(zxcTO);" ><a href="http://www.vicsjavascripts.org.uk" onmouseover="clearTimeout(zxcTO);" >test test</a></div>
// <div id="MySlide5" style="position:absolute;z-index:1;top:30px;left:100px;width:200px;height:50px;background-color:#FF6600"
// onmouseout="zxcReturn('MySlide5');" ></div>
// </div>

// There may be occasions where mouseover of a link triggers the 'zxcReturn()' call
// The return action id delayed by a timeout period specified by the valur of variable 'zxcReturnDelay'
// This action is cancelled by the inclusion of  onmouseover="clearTimeout(zxcTO);"
//  as applied to the example above in "MySlide4"

// The functional code(about 2.5K) is best as an external JavaScript

// All variables, function names etc are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// This may be safely changed to charactors of choise using global find and replace

// Tested with IE6 and Mozilla FireFox

// Functional Code - NO NEED to change
// The functional code(about 2.5K) is best as an external JavaScript

// All variables, function names etc are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// This may be safely changed to charactors of choise using global find and replace

// Tested with IE6 and Mozilla FireFox

// Functional Code - NO NEED to change

function zxcAddFunctions(zxc){
 this.mobj=zxc.style;
 this.ref=zxc.id;
 window[this.ref]=this;
 this.to=null;
 this.auto=zxcAuto;
 this.setto=zxcTimeOut;
}

function zxcTimeOut(zxcf,zxcd){
 this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

//-->
</script>

MoveObject 2

Move an element to a new specified or anchor position.
Activated by an event call.
Using OOP techniques one or as many elements as required may be moved
at the same time at a speed determined by the specified move increment and delay.

Click to Move to
Left 300px
Top 1700px

Click to Move to
Left 400px
Top 1700px

Application Notes and Functional Code.

Click the TextArea to Toggle the Height.

// Move an element to a new specified or anchor position.
// Activated by an event call.
// Using OOP techniques one or as many elements as required may be moved
// at the same time at a speed determined by the specified move increment and delay

// Application Notes

// Activated by an event call.
// The element style position is forced to absolute on calling the script.
// The element will therefore mo longer take up any space.

// Example 1 - The element must have a unique ID name
// <input type="button" name="" value="Move 400*300" onclick="zxcMoveTo('Tst1',[400,300],4,50);zxcMoveTo('Tst2',[400,300],1,200);">

// Example 2  - The element does not need a unique ID name
// <div id="Tst1" style="position:absolute;left:620px;top:100px;width:50px;height:50px;background-color:red;"
// onclick="zxcMoveTo(this,[100,100],1,10);"></div>

// Example 3 - To an Anchor Position   - The element and anchor must have a unique ID names
// <input type="button" id="fred" value="Move to this Position" onclick="zxcMoveTo('Tst1','fred',4,50);zxcMoveTo('Tst2','fred',1,200);">

// The Call Parameters
// Specified Position - zxcMoveTo('Tst1',400,300,4,50);
// Anchor    Position - zxcMoveTo('Tst1','AnchorID',4,50);
// parameter 0 - the object or the unique ID name of the object to move       (object or string ID)
// parameter 1 - Specified Position
//                An array of new X and Y positions
//                field 0 - new Horizontal(X) position (digits)
//                field 1 - new Vertical(Y)   position (digits)
// parameter 1 - Anchor Position
//                the unique ID name of the anchor element                    (string)
// parameter 2 - (optional) the move increment or default                     (digits)
//                default is set by customising variable zxcDefaultIncrement
//                the last value is retained until changed
// parameter 3 - (optional) the move delay or default                         (digits)
//                default is set by customising variable zxcDefaultDelay
//                the last value is retained until changed

// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These charactors may be changed to charactors of choise using global find and replace

// The Functional Code(about 2.5K) is best as an External JavaScript

// Tested with IE6 and Mozilla FireFox

// Customising Variables

var zxcDefaultIncrement=5; // (digits)
var zxcDefaultDelay=30;    // (digits)

//-->
</script>

// Functional Code - No Need to Change

var zxcOOPCnt=0;

function zxcOOPMove(zxcm){
 this.obj=zxcm;
 this.to=null;
 this.ref='zxcoopmove'+zxcOOPCnt;
 window[this.ref]=this;
 this.stop=true;
 zxcOOPCnt++;
}

zxcOOPMove.prototype.move=function(){
 if (this.stop){ return; }
 this.obj.style.left=(this.obj.spos[0]+=(this.inc/this.obj.xr*this.obj.xpol))+'px';
 this.obj.style.top=(this.obj.spos[1]+=(this.inc/this.obj.yr*this.obj.ypol))+'px';
 if ((((parseInt(this.obj.style.left)<this.obj.fpos[0]&&this.obj.xpol>0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol<0))&&this.obj.xr==1)||(((parseInt(this.obj.style.top)<this.obj.fpos[1]&&this.obj.ypol>0)||(parseInt(this.obj.style.top)>this.obj.fpos[1]&&this.obj.ypol<0))&&this.obj.yr==1)){
  this.setTimeOut("move();",this.dly);
 }
 else {
  this.obj.style.left=(this.obj.fpos[0])+'px';
  this.obj.style.top=(this.obj.fpos[1])+'px';
  this.stop=true;
 }
}

zxcOOPMove.prototype.setTimeOut=function(zxcf,zxcd){
 this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}

function zxcPos(zxc){
 zxcObjLeft = zxc.offsetLeft;
 zxcObjTop = zxc.offsetTop;
 while(zxc.offsetParent!=null){
  zxcObjParent=zxc.offsetParent;
  zxcObjLeft+=zxcObjParent.offsetLeft;
  zxcObjTop+=zxcObjParent.offsetTop;
  zxc=zxcObjParent;
 }
 return [zxcObjLeft,zxcObjTop];
}

//-->
</script>