Menu
I am trying to find a way to either fade-in or slide-in colored squares on a site. I want it to start onload fade-in the upper left hand square and go around the page doing the same thing, one after another.
webpage: [url]www.edrafting.homeip.net
Can anyone point me in the right direction?
Thanks,
[CODE]
window.onload=function(){
//stock code
function el(tid){if(tid.nodeName){return tid;}return el._ts[tid]||(el._ts[tid]=document.getElementById(tid));};el._ts={};
function trans(elm, opacity) { el(elm).style.opacity = (opacity / 100);}
function transIE(elm, opacity) { el(elm).style.filter = "alpha(opacity=" + opacity + ")";}
if(window.ActiveXObject){ trans= transIE; }
//customize from here below :
//a list of the ids of the tags you want to reveal.
var elms=["box1", "box2", "box3","box4","box5",
"box6","box7","box8","box9","box10",
"box11","box12", "box13", "box14", "box15"];
for(var i=0;i<elms.length;i++){ trans(elms[i],0) }; //first hide them all
for(var i=0;i<elms.length;i++){ //schedule them to unhide on a timeout...
setTimeout("trans('"+elms[i]+"', 100);document.title='"+elms[i]+"'", i * 500);
} //change 500 to the # of ms between each reveal
}
[/CODE]<i>
</i>setTimeout("trans('"+elms[i]+"', 100);document.title='"+elms[i]+"'", i * 500);
Then if I want the elements to be hidden when the page loads, I can just hide them with a css rule and then fade them in?
[/QUOTE]
<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<i> </i><meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>E Drafting - Home Page</title>
<link rel="stylesheet" type="text/css" href="plain.css" />
<script type="text/javascript" src="sw.js"></script>
<script type="text/javascript">
window.onload=function(){
//stock code
function el(tid){if(tid.nodeName){return tid;}return el._ts[tid]||(el._ts[tid]=document.getElementById(tid));};el._ts={};
function trans(elm, opacity) { el(elm).style.opacity = (opacity / 100);}
function transIE(elm, opacity) { el(elm).style.filter = "alpha(opacity=" + opacity + ")";}
if(window.ActiveXObject){ trans= transIE; }
//customize from here below :
//a list of the ids of the tags you want to reveal.
var elms=["box1", "box2", "box3","box4","box5",
"box6","box7","box8","box9","box10",
"box11","box12", "box13", "box14", "box15"];
for(var i=0;i<elms.length;i++){ trans(elms[i],0) }; //first hide them all
for(var i=0;i<elms.length;i++){ //schedule them to unhide on a timeout...
setTimeout("trans('"+elms[i]+"', 100);document.title='"+elms[i]+"'", i * 500);
} //change 500 to the # of ms between each reveal
}
</script>
<script type="text/javascript">
/*Toggle Sound Script © John Davenport Scheuer
as first seen in www.dynamicdrive.com/forums (user name:
jscheuer1). Visit http://www.dynamicdrive.com for 100's
of DHTML scripts. This credit must remain for legal use.
*/
var sndEl="homepage/mixdown.mp3" //Set to name and path of your sound file
function toggleSound(){
if (document.all&&document.all.sound&&document.all.sound.src!=='')
document.all.sound.src=''
else if (document.getElementById&&document.getElementById('snd')){
sndEl=document.getElementById('snd')
document.getElementById('sndC').removeChild(sndEl)
}
else if (document.all&&document.all.sound&&document.all.sound.src=='')
document.all.sound.src=sndEl
else if (document.getElementById)
document.getElementById('sndC').appendChild(sndEl)
}
</script>
</head>
<body>
<i> </i> <div id="maincontent">
<i> </i> <div id="toprow">
<i> </i> <div id="box1"></div>
<i> </i> <div id="box2"> <script type="text/javascript">
<i> </i> if (document.getElementById&&!document.getElementById('sound')){
<i> </i> document.write('<div id="sndC" style="position:absolute;top:-1000px:left:-1000px;visibility:hidden;">')
<i> </i> document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" Name="MediaPlayer" id="snd" src="'+sndEl+'" AutoStart="true" ShowStatusBar="0" ShowControls="0" ShowDisplay="0" volume="1" HEIGHT="1" WIDTH="1" loop="true">')
<i> </i> document.write('</div>')
<i> </i> }
<i> </i> document.write('<input type="image" class="centerd" src="homepage/music.gif" onclick="toggleSound();">')
<i> </i> </script></div>
<i> </i> <div id="box3"></div>
<i> </i> <div id="box4"></div>
<i> </i> <div id="box5"><a href="#"><img class="centerd1" src="HomePage/Blk-Design.gif" width="70" height="40" /></a></div><div id="kitchen"><img src="HomePage/kitchen.gif" width="200" height="98" /></div>
<i> </i> <div id="box6"></div><div id="box7"><a href="#"><img id="center7" src="HomePage/Blk-Design-Services.gif" width="56" height="39" /></a></div><div id="box8"></div>
<i> </i> <div id="box9"><a href="#"><img class="centerd" src="HomePage/Blk-Contact-Us.gif" width="61" height="15" alt="Picture of a new kitchen" /></a></div>
<i> </i> <div id="box10"><img src="HomePage/Montra.gif" width="160" height="71" alt="Designs with you in mind" /></div>
<i> </i> <div id="box11"></div>
<i> </i> <div id="box12"><a href="#"><img class="centerd1" src="HomePage/Blk-About-E.gif" width="68" height="39" alt="Picture of a new kitchen" /></a></div>
<i> </i> <div id="box13"></div>
<i> </i> <div id="box14"></div>
<i> </i> <div id="box15"></div><div id="Neighborhood"><img src="HomePage/Neighborhood.gif" width="196" height="196" alt="The Neighborhood" /></div>
<i> </i> <div id="logo"><img class="centerd1" src="HomePage/logo.gif" width="622" height="172" alt="E Drafting Logo" /></div>
<i> </i> </div>
<i> </i> <div id="rotate">
<i> </i> <script type="text/javascript">
<i> </i> //Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
<i> </i> //Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
<i> </i> //Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
<i> </i> new inter_slide(slides)
<i> </i> </script>
<i> </i> </div>
<i> </i> </div>
<i> </i></body>
</html>
<i>
</i>setTimeout("trans('"+elms[i]+"', 100);document.title='"+elms[i]+"'", i * 500);
This is very easy to do if you have the jQuery library installed. You'd just created a variable to keep track of the square number and then you could use the fadein animation(http://docs.jquery.com/Effects/fadeIn ) You can use the callback function part of the fadein animation to increment the variable that targets the correct square
[/quote]
<i>
</i> $(document).ready(function(){$("div.box1").fadeIn(6000);});
It still gives me trans is undefined when I run the page on line 31:
[/QUOTE]
[CODE]if(window.ActiveXObject){ trans= transIE; }[/CODE][CODE]if(window.ActiveXObject){ trans= transIE; }
window.trans = trans;
window.el=el;[/CODE][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">
/*<![CDATA[*/
.tst {
width:50px;height:50px;background-Color:red;float:left;
}
/*]]>*/
</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 2K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//
// **** Functional Code - NO NEED to Change
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
}
function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
this.srtfin=[zxcsrt,zxcfin];
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde.replace(/[-#]/g,'');
this.update([zxcsrt,zxcfin],zxctime);
}
zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}
zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+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 (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.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(zxcobj,zxcopc){
if (zxcopc<0||zxcopc>100) return;
zxcobj.style.filter='alpha(opacity='+zxcopc+')';
zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var elms=["box1", "box2", "box3","box4","box5",
"box6","box7","box8","box9","box10",
"box11","box12", "box13", "box14", "box15"];
var cnt=0;
function Test(){
zxcBAnimator('opacity',elms[cnt],0,100,2000);
cnt++;
if (cnt<elms.length) setTimeout(function(){Test(); },2000);
}
/*]]>*/
</script></head>
<body onload="Test();">
<div id="box1" class="tst"></div>
<div id="box2" class="tst"></div>
<div id="box3" class="tst"></div>
<div id="box4" class="tst"></div>
<div id="box5" class="tst"></div>
<div id="box6" class="tst"></div>
<div id="box7" class="tst"></div>
<div id="box8" class="tst"></div>
<div id="box9" class="tst"></div>
<div id="box10" class="tst"></div>
<div id="box11" class="tst"></div>
<div id="box12" class="tst"></div>
<div id="box13" class="tst"></div>
<div id="box14" class="tst"></div>
<div id="box15" class="tst"></div>
</body>
</html>[/CODE]0.1.9 — BETA 5.24