Slide-in onload script

@jaiantbassDec 21.2008

I am trying to take this slide-in onclick script and have the div slide-in onload without the option to have it slide-up onclick.

[code] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head> <title></title> <script type=”text/javascript” src=”animate.js”></script> <script type=”text/javascript”> function slideExample1(elementId, headerElement) { var element = document.getElementById(elementId); if(element.up == null || element.down) { animate(elementId, 0, 20, 150, 0, 250, null); element.up = true; element.down = false; headerElement.innerHTML = ‘vvv’; } else { animate(elementId, 0, 20, 150, 130, 250, null); element.down = true; element.up = false; headerElement.innerHTML = ‘^^^’; } } </script>

</head>

<body> <div style=”position:relative; width:150px; height:170px; top:0px; left:0px;”> <div id=”exampleHeader1″ style=”position:absolute; width:150px; height:20px; top:0px; left:0px; background:#3b587a; text-align:center; color:#FFFFFF;” onclick=”slideExample1(‘examplePanel1’, this);”> ^^^ </div> <div id=”examplePanel1″ style=”position:absolute; width:150px; height:130px; top:20px; left:0px; background:#B1B579; overflow:hidden;”> Content1 </div> </div>

</body>

</html> [/code]

Any ideas?

Thanks

to post a comment

JavaScript

13 Comments(s) _↴

@astupidnameDec 21.2008 — #If I understand correctly, just remove this:

onclick="slideExample1('examplePanel1', this);"

and insert this into the set of script tags which hold the slideExample1 function:

window.onload = function () {

slideExample1('examplePanel1',document.getElementById('exampleHeader1'));

};

@tivrfoaDec 21.2008 — #hi!

maybe:

[code=html]<body onload="slideExample1('examplePanel1', 'exampleHeader1');">[/code]

@jaiantbassauthorDec 21.2008 — #tivrfoa,

this is close,

<i>
 </i>&lt;body onload="slideExample1('examplePanel1', 'exampleHeader1');"&gt;

@tivrfoaDec 21.2008 — #tivrfoa,

this is close,

<i>
 </i>&lt;body onload="slideExample1('examplePanel1', 'exampleHeader1');"&gt;

Now the div is displayed when the pages loads then goes up. What I am trying to do is get the div to be hidden when the page loads, then slides into view. Any more ideas? Thanks so much for your help.[/QUOTE]

show your animate.js code here. so we can help you better!!

and make a change:
<body onload="slideExample1('examplePanel1', document.getElementById('exampleHeader1'));"> as astupidname said.

@jaiantbassauthorDec 21.2008 — #Sorry, here is the animate.js code that I am using:

<i>
 </i>//This code was created by the fine folks at Switch On The Code - http://blog.paranoidferret.com
 //This code can be used for any purpose
 
 function animate(elementID, newLeft, newTop, newWidth,
 newHeight, time, callback)
 {
 var el = document.getElementById(elementID);
 if(el == null)
 return;
 
 var cLeft = parseInt(el.style.left);
 var cTop = parseInt(el.style.top);
 var cWidth = parseInt(el.style.width);
 var cHeight = parseInt(el.style.height);
 
 var totalFrames = 1;
 if(time&gt; 0)
 totalFrames = time/40;
 
 var fLeft = newLeft - cLeft;
 if(fLeft != 0)
 fLeft /= totalFrames;
 
 var fTop = newTop - cTop;
 if(fTop != 0)
 fTop /= totalFrames;
 
 var fWidth = newWidth - cWidth;
 if(fWidth != 0)
 fWidth /= totalFrames;
 
 var fHeight = newHeight - cHeight;
 if(fHeight != 0)
 fHeight /= totalFrames;
 
 doFrame(elementID, cLeft, newLeft, fLeft,
 cTop, newTop, fTop, cWidth, newWidth, fWidth,
 cHeight, newHeight, fHeight, callback);
 }
 
 function doFrame(eID, cLeft, nLeft, fLeft,
 cTop, nTop, fTop, cWidth, nWidth, fWidth,
 cHeight, nHeight, fHeight, callback)
 {
 var el = document.getElementById(eID);
 if(el == null)
 return;
 
 cLeft = moveSingleVal(cLeft, nLeft, fLeft);
 cTop = moveSingleVal(cTop, nTop, fTop);
 cWidth = moveSingleVal(cWidth, nWidth, fWidth);
 cHeight = moveSingleVal(cHeight, nHeight, fHeight);
 
 el.style.left = Math.round(cLeft) + 'px';
 el.style.top = Math.round(cTop) + 'px';
 el.style.width = Math.round(cWidth) + 'px';
 el.style.height = Math.round(cHeight) + 'px';
 
 if(cLeft == nLeft &amp;&amp; cTop == nTop &amp;&amp; cHeight == nHeight
 &amp;&amp; cWidth == nWidth)
 {
 if(callback != null)
 callback();
 return;
 }
 
 setTimeout( 'doFrame("'+eID+'",'+cLeft+','+nLeft+','+fLeft+','
 +cTop+','+nTop+','+fTop+','+cWidth+','+nWidth+','+fWidth+','
 +cHeight+','+nHeight+','+fHeight+','+callback+')', 40);
 }
 
 function moveSingleVal(currentVal, finalVal, frameAmt)
 {
 if(frameAmt == 0 || currentVal == finalVal)
 return finalVal;
 
 currentVal += frameAmt;
 if((frameAmt&gt; 0 &amp;&amp; currentVal&gt;= finalVal)
 || (frameAmt &lt;0 &amp;&amp; currentVal &lt;= finalVal))
 {
 return finalVal;
 }
 return currentVal;
 }

Thanks again,

@tivrfoaDec 21.2008 — #do you want the inverse?

[code=html]
 <script type="text/javascript">
 function slideExample1(elementId, headerElement) {
 var element = document.getElementById(elementId);
 if(element.up == null || element.up) {
 animate(elementId, 0, 20, 150, 130, 250, null);
 element.down = true;
 element.up = false;
 headerElement.innerHTML = '^^^';
 } else {
 animate(elementId, 0, 20, 150, 0, 250, null);
 element.up = true;
 element.down = false;
 headerElement.innerHTML = 'vvv';
 }
 }
 </script>
 [/code]

@jaiantbassauthorDec 21.2008 — #Yes the inverse is the idea, but that doesn't seem to do it. I get the logic of reversing that part, but I seem to be missing something.

what I have so far:

animated.js

<i>
 </i>//This code was created by the fine folks at Switch On The Code - http://blog.paranoidferret.com
 //This code can be used for any purpose
 
 function animate(elementID, newLeft, newTop, newWidth,
 newHeight, time, callback)
 {
 var el = document.getElementById(elementID);
 if(el == null)
 return;
 
 var cLeft = parseInt(el.style.left);
 var cTop = parseInt(el.style.top);
 var cWidth = parseInt(el.style.width);
 var cHeight = parseInt(el.style.height);
 
 var totalFrames = 1;
 if(time&gt; 0)
 totalFrames = time/40;
 
 var fLeft = newLeft - cLeft;
 if(fLeft != 0)
 fLeft /= totalFrames;
 
 var fTop = newTop - cTop;
 if(fTop != 0)
 fTop /= totalFrames;
 
 var fWidth = newWidth - cWidth;
 if(fWidth != 0)
 fWidth /= totalFrames;
 
 var fHeight = newHeight - cHeight;
 if(fHeight != 0)
 fHeight /= totalFrames;
 
 doFrame(elementID, cLeft, newLeft, fLeft,
 cTop, newTop, fTop, cWidth, newWidth, fWidth,
 cHeight, newHeight, fHeight, callback);
 }
 
 function doFrame(eID, cLeft, nLeft, fLeft,
 cTop, nTop, fTop, cWidth, nWidth, fWidth,
 cHeight, nHeight, fHeight, callback)
 {
 var el = document.getElementById(eID);
 if(el == null)
 return;
 
 cLeft = moveSingleVal(cLeft, nLeft, fLeft);
 cTop = moveSingleVal(cTop, nTop, fTop);
 cWidth = moveSingleVal(cWidth, nWidth, fWidth);
 cHeight = moveSingleVal(cHeight, nHeight, fHeight);
 
 el.style.left = Math.round(cLeft) + 'px';
 el.style.top = Math.round(cTop) + 'px';
 el.style.width = Math.round(cWidth) + 'px';
 el.style.height = Math.round(cHeight) + 'px';
 
 if(cLeft == nLeft &amp;&amp; cTop == nTop &amp;&amp; cHeight == nHeight
 &amp;&amp; cWidth == nWidth)
 {
 if(callback != null)
 callback();
 return;
 }
 
 setTimeout( 'doFrame("'+eID+'",'+cLeft+','+nLeft+','+fLeft+','
 +cTop+','+nTop+','+fTop+','+cWidth+','+nWidth+','+fWidth+','
 +cHeight+','+nHeight+','+fHeight+','+callback+')', 40);
 }
 
 function moveSingleVal(currentVal, finalVal, frameAmt)
 {
 if(frameAmt == 0 || currentVal == finalVal)
 return finalVal;
 
 currentVal += frameAmt;
 if((frameAmt&gt; 0 &amp;&amp; currentVal&gt;= finalVal)
 || (frameAmt &lt;0 &amp;&amp; currentVal &lt;= finalVal))
 {
 return finalVal;
 }
 return currentVal;
 }

html:

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
 
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript" src="animate.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 function slideExample1(elementId, headerElement)
 {
 var element = document.getElementById(elementId);
 if(element.up == null || element.down)
 {
 animate(elementId, 0, 20, 150, 0, 250, null);
 element.up = true;
 element.down = false;
 headerElement.innerHTML = 'vvv';
 }
 else
 {
 animate(elementId, 0, 20, 150, 130, 250, null);
 element.down = true;
 element.up = false;
 headerElement.innerHTML = '^^^';
 }
 }
 &lt;/script&gt;
 
 
 &lt;/head&gt;
 
 &lt;body onload="slideExample1('examplePanel1', document.getElementById('exampleHeader1'));"&gt;
 &lt;div style="position:relative;
 width:150px;
 height:170px;
 top:0px;
 left:0px;"&gt;
 &lt;div id="exampleHeader1"
 style="position:absolute;
 width:150px;
 height:20px;
 top:0px;
 left:0px;
 background:#3b587a;
 text-align:center;
 color:#FFFFFF;"
 <i>   &gt;</i>
 
 &lt;/div&gt;
 &lt;div id="examplePanel1"
 style="position:absolute;
 width:150px;
 height:130px;
 top:20px;
 left:0px;
 background:#B1B579;
 overflow:hidden;
 "&gt;
 Content1
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div style="position:relative;
 width:150px;
 height:170px;
 top:0px;
 left:220px;"&gt;
 &lt;div id="exampleHeader2"
 style="position:absolute;
 width:150px;
 height:20px;
 top:0px;
 left:0px;
 background:#3b587a;
 text-align:center;
 color:#FFFFFF;"
 onclick="slideExample1('examplePanel2', this);"&gt;
 ^^^
 &lt;/div&gt;
 &lt;div id="examplePanel2"
 style="position:absolute;
 width:150px;
 height:130px;
 top:20px;
 left:0px;
 background:#D1E5EF;
 overflow:hidden;"&gt;
 Content2
 &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;div style="position:relative;
 width:150px;
 height:170px;
 top:0px;
 left:0px;"&gt;
 &lt;div id="exampleHeader3"
 style="position:absolute;
 width:150px;
 height:20px;
 top:0px;
 left:0px;
 background:#3b587a;
 text-align:center;
 color:#FFFFFF;"
 onclick="slideExample1('examplePanel3', this);"&gt;
 ^^^
 &lt;/div&gt;
 &lt;div id="examplePanel3"
 style="position:absolute;
 width:150px;
 height:130px;
 top:20px;
 left:0px;
 background:#163188;
 overflow:hidden;"&gt;
 Content3
 &lt;/div&gt;
 &lt;/div&gt;
 
 
 &lt;/body&gt;
 
 &lt;/html&gt;

@jaiantbassauthorDec 21.2008 — #Alright, someone has pointed me in this direction:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style type="text/css"&gt;
 .container div{width:100px; height:100px; position:absolute}
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 i=-100;
 var c;
 function f(){
 c=setInterval(function(){inv()},20)
 }
 function inv()
 {
 if(i!=0)
 {
 i+=5;
 document.getElementsByTagName("div")[1].style.top=i+"px";
 }
 else
 {
 clearInterval(c);
 document.getElementsByTagName("button")[0].parentNode.removeChild(document.getElementsByTagName("button")[0]);
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="f()"&gt;
 &lt;div class="container" style="position:relative"&gt;
 &lt;div style="background:red; top:-100px; z-index:100"&gt;&amp;nbsp;&lt;/div&gt;
 &lt;div style="background:white; top:-100px; z-index:200"&gt;&amp;nbsp;&lt;/div&gt;
 &lt;div style="background:#ffffff; top:0px;"&gt;&amp;nbsp;&lt;/div&gt;
 
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

This is where I believe I am going with this. Now I just need to figure out the easiest way to apply this to 10 or so separate boxes.

@vwphillipsDec 21.2008 — #from PM

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <style type="text/css">
 <!--
 .slide {
 position:absolute;left:-100;top:-100px;width:50px;height:50px;background-Color:red;
 }
 
 -->
 </style>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 // Basic Element Animator (11-October-2008) DRAFT
 // by Vic Phillips http://www.vicsjavascripts.org.uk
 
 // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
 
 // **** Application Notes
 
 // **** The HTML Code
 //
 // when moving an element the inline or class rule style position of the element should be assigned as
 // 'position:relative;' or 'position:absolute;'
 //
 // The element would normally be assigned a unique ID name.
 //
 
 // **** Executing the Effect(Script)
 //
 // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
 // where:
 // parameter 0 = the mode(see Note 1).                                                                     (string)
 // parameter 1 = the unique ID name or element object.                                                     (string or element object)
 // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
 // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
 // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
 //
 //  Note 1:  The default units(excepting opacity) are 'px'.
 //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
 //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
 //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
 //           The first call will set the toggle parameters.
 //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
 //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
 //           whenever required, say from an onclick/mouseover/out event.
 //           The period parameter will be retained unless re-specified.
 //
 // **** Advanced Applications
 //
 //  It may be required to access the current value of the effect.
 //  The element effect is accessible from the element property
 //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
 //  where mode is parameter 0 of the initial call.
 //  An array storing the current, start and finish values of the element effect may be accessed
 //  from the element effect.data as fields 0, 1 and 2 respectively
 //
 
 // **** General
 //
 // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
 // These characters may be changed to characters of choice using global find and replace.
 //
 // The Functional Code(about 1.7K) is best as an External JavaScript.
 //
 // Tested with IE7 and Mozilla FireFox on a PC.
 //
 
 
 
 // **** Functional Code - NO NEED to Change
 
 
 function zxcBAnimator(mde,obj,srt,fin,time){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj||(!srt&&!fin)||srt==fin) return;
 var oop=obj[mde.replace(/[-#]/g,'')+'oop'];
 if (oop){
 clearTimeout(oop.to);
 if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],time);
 else oop.update([srt,fin],time);
 }
 else obj[mde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,time);
 }
 
 function zxcBAnimatorOOP(mde,obj,srt,fin,time){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/[-#]/g,'');
 this.update([srt,fin],time);
 }
 
 zxcBAnimatorOOP.prototype.update=function(srtfin,time){
 this.time=time||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.srttime=new Date().getTime();
 this.cng();
 }
 
 zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.data[2]-this.data[1])/this.time*ms+this.data[1];
 if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else  zxcOpacity(this.obj,this.data[0]);
 if (ms<this.time) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
 this.data[0]=this.data[2];
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else zxcOpacity(this.obj,this.data[0]);
 }
 }
 
 function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }
 
 /*]]>*/
 </script>
 
 <script language="JavaScript" type="text/javascript">
 <!--
 
 function zxcByClassName(zxcnme,zxcel,zxctag){
 if (typeof(zxcel)=='string') zxcel=document.getElementById(zxcel);
 zxcel=zxcel||document;
 for (var zxctag=zxctag||'*',zxcreg=new RegExp('(^|\s)'+zxcnme+'(\s|$)'),zxcels=zxcel.getElementsByTagName(zxctag),zxcary=[],zxc0=0; zxc0<zxcels.length;zxc0++){
 if(zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
 }
 return zxcary;
 }
 
 
 function Load(cls){
 var objs=zxcByClassName(cls);
 for (var z0=0;z0<objs.length;z0++){
 var split=objs[z0].className.split(':');
 zxcBAnimator('left',objs[z0],split[1]-1,split[3]*1,split[5]);
 zxcBAnimator('top',objs[z0],split[2]-1,split[4]*1,split[5]);
 }
 }
 //-->
 </script>
 
 </head>
 
 <body onload="Load('slide');" >
 <div class="slide :-50:-50:450:50:1000" ></div>
 <div class="slide :-50:250:450:100:2000" ></div>
 </body>
 
 </html>
 [/CODE]

@bluestartechDec 21.2008 — #just download and use jQuery, nice neat solution and cross browser js library, which handles sliding and has many other need plugins

@jaiantbassauthorDec 21.2008 — #Vic,

Thanks again! I am having a hard time applying this to the same site, www.edrafting.homeip.net. I want to apply this to the individual boxes and having a hard time with absolute positioning. One of the main things is when you resize the window, everything moves. Not sure if there is a work around for this? I like this approach to animating the page. Thanks so much.

@vwphillipsDec 21.2008 — #nest the object in an element with relative positioning and move the object from -500(the required off screen position to 0.

the moving object may also have position:relative

will have a look tomorrow if you are still stuck

quickly

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <style type="text/css">
 <!--
 .slide {
 position:relative;left:-100px;top:0px;width:50px;height:50px;background-Color:red;
 }
 
 -->
 </style>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 // Basic Element Animator (11-October-2008) DRAFT
 // by Vic Phillips http://www.vicsjavascripts.org.uk
 
 // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
 
 // **** Application Notes
 
 // **** The HTML Code
 //
 // when moving an element the inline or class rule style position of the element should be assigned as
 // 'position:relative;' or 'position:absolute;'
 //
 // The element would normally be assigned a unique ID name.
 //
 
 // **** Executing the Effect(Script)
 //
 // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
 // where:
 // parameter 0 = the mode(see Note 1).                                                                     (string)
 // parameter 1 = the unique ID name or element object.                                                     (string or element object)
 // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
 // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
 // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
 //
 //  Note 1:  The default units(excepting opacity) are 'px'.
 //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
 //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
 //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
 //           The first call will set the toggle parameters.
 //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
 //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
 //           whenever required, say from an onclick/mouseover/out event.
 //           The period parameter will be retained unless re-specified.
 //
 // **** Advanced Applications
 //
 //  It may be required to access the current value of the effect.
 //  The element effect is accessible from the element property
 //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
 //  where mode is parameter 0 of the initial call.
 //  An array storing the current, start and finish values of the element effect may be accessed
 //  from the element effect.data as fields 0, 1 and 2 respectively
 //
 
 // **** General
 //
 // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
 // These characters may be changed to characters of choice using global find and replace.
 //
 // The Functional Code(about 1.7K) is best as an External JavaScript.
 //
 // Tested with IE7 and Mozilla FireFox on a PC.
 //
 
 
 
 // **** Functional Code - NO NEED to Change
 
 
 function zxcBAnimator(mde,obj,srt,fin,time){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj||(!srt&&!fin)||srt==fin) return;
 var oop=obj[mde.replace(/[-#]/g,'')+'oop'];
 if (oop){
 clearTimeout(oop.to);
 if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],time);
 else oop.update([srt,fin],time);
 }
 else obj[mde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,time);
 }
 
 function zxcBAnimatorOOP(mde,obj,srt,fin,time){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/[-#]/g,'');
 this.update([srt,fin],time);
 }
 
 zxcBAnimatorOOP.prototype.update=function(srtfin,time){
 this.time=time||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.srttime=new Date().getTime();
 this.cng();
 }
 
 zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.data[2]-this.data[1])/this.time*ms+this.data[1];
 if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else  zxcOpacity(this.obj,this.data[0]);
 if (ms<this.time) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
 this.data[0]=this.data[2];
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else zxcOpacity(this.obj,this.data[0]);
 }
 }
 
 function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }
 
 /*]]>*/
 </script>
 
 <script language="JavaScript" type="text/javascript">
 <!--
 
 function zxcByClassName(zxcnme,zxcel,zxctag){
 if (typeof(zxcel)=='string') zxcel=document.getElementById(zxcel);
 zxcel=zxcel||document;
 for (var zxctag=zxctag||'*',zxcreg=new RegExp('(^|\s)'+zxcnme+'(\s|$)'),zxcels=zxcel.getElementsByTagName(zxctag),zxcary=[],zxc0=0; zxc0<zxcels.length;zxc0++){
 if(zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
 }
 return zxcary;
 }
 
 
 function Load(cls){
 var objs=zxcByClassName(cls);
 for (var z0=0;z0<objs.length;z0++){
 var split=objs[z0].className.split(':');
 zxcBAnimator('left',objs[z0],split[1]-1,split[3]*1,split[5]);
 zxcBAnimator('top',objs[z0],split[2]-1,split[4]*1,split[5]);
 }
 }
 //-->
 </script>
 
 </head>
 
 <body onload="Load('slide');" >
 <center>
 <table border="1">
 <tr>
 <td width="50" >
 <div style="position:relative;" >
 <img class="slide :-600:-50:0:0:1000" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
 </div>
 </td>
 <td width="50" >
 <div style="position:relative;" >
 <img class="slide  :-600:250:0:0:1000" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
 </div>
 </td>
 </tr>
 </table>
 </center></body>
 
 </html>[/CODE]

@jaiantbassauthorDec 21.2008 — #Vic,

I ended up rebuilding the whole thing from scratch using your script. Made it much easier than trying to muddle through what I had. There are some little issues with sound compatibility with IE that weren't there before, but I am working on it. Other than that it is starting to get there. Thanks again.

www.edrafting.homeip.net

Also in #JavaScript _↴

Help with passing javascript variables to html?Buttons Virtual keyboard help

Success!

Help @jaiantbass spread the word by sharing this article on Twitter...

Tweet This

Slide-in onload script

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Slide-in onload script

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴