Toggling with animation [Archive]

TechGlider

03-24-2009, 08:01 PM

I am trying to incorporate animation with a toggle feature.. Can someone help me do this..

If you look, i am using an array to loop through so that any previous toggled 'on' div will return to hidden. But i am trying to get the animation with it now, so i was wondering if this is something i will have to modify with the js or the html? It will work as is, but without the animation functions below..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<script type="text/javascript">

var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function displayDiv(showDiv)
{
var myDivs = new Array("faq1","faq2","faq3","faq4");

for (myDiv in myDivs){
//hide all
document.getElementById(myDivs[myDiv]).style.display = 'none';
}

//show desired
document.getElementById(showDiv).style.display = 'block';
}

function slidedown(showDiv){
if(moving[showDiv])
return;

if(document.getElementById(showDiv).style.display != "none")
return; // cannot slide down something that is already visible

moving[showDiv] = true;
dir[showDiv] = "down";
startslide(showDiv);
}

function slideup(showDiv){
if(moving[showDiv])
return;

if(document.getElementById(showDiv).style.display == "none")
return; // cannot slide up something that is already hidden

moving[showDiv] = true;
dir[showDiv] = "up";
startslide(showDiv);
}

function startslide(showDiv){
obj[showDiv] = document.getElementById(showDiv);

endHeight[showDiv] = parseInt(obj[showDiv].style.height);
startTime[showDiv] = (new Date()).getTime();

if(dir[showDiv] == "down"){
obj[showDiv].style.height = "1px";
}

obj[showDiv].style.display = "block";

timerID[showDiv] = setInterval('slidetick(\'' + showDiv + '\');',timerlen);
}

function slidetick(showDiv){
var elapsed = (new Date()).getTime() - startTime[showDiv];

if (elapsed > slideAniLen)
endSlide(showDiv)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[showDiv]);
if(dir[showDiv] == "up")
d = endHeight[showDiv] - d;

obj[showDiv].style.height = d + "px";
}

return;
}

function endSlide(showDiv){
clearInterval(timerID[showDiv]);

if(dir[showDiv] == "up")
obj[showDiv].style.display = "none";

obj[showDiv].style.height = endHeight[showDiv] + "px";

delete(moving[showDiv]);
delete(timerID[showDiv]);
delete(startTime[showDiv]);
delete(endHeight[showDiv]);
delete(obj[showDiv]);
delete(dir[showDiv]);

return;
}

</script>

<style type="text/css">
div {
display: none;
background: lightblue;
}
</style>

</head>

<body>

<p><h1>Frequently Asked Questions</h1></p><br>

<a href="#" onclick="displayDiv('faq1');">This is FAQ question number one?</a><br>
<div id="faq1" style="overflow: auto;width:450px; border:2px ridge black;">This is the content to FAQ number one. This is the content to FAQ number one. This is the content to FAQ number one. This is the content to FAQ number one. </div>

<a href="#" onclick="displayDiv('faq2')">This is FAQ question number two?</a><br>
<div id="faq2" style="overflow: auto; auto;width:600px;border:2px ridge black;">This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. </div>

<a href="#" onclick="displayDiv('faq3')">This is FAQ question number three.</a><br>
<div id="faq3" style="overflow: auto;border:2px ridge black;">This is the content to FAQ number three?</div>

<a href="#" onclick="displayDiv('faq4')">This is FAQ question number four.</a><br>
<div id="faq4" style="overflow: auto;width:500px;border:2px ridge black;">This is the content to FAQ number four? This is the content to FAQ number four? This is the content to FAQ number four? This is the content to FAQ number four? </div>

<p><br><br><br>I created a few different ways they can look. If you want me to do something different let me know.</p>
</body>
</html>

vwphillips

03-25-2009, 01:11 PM

<!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">
/*<![CDATA[*/
// Basic Element Animator (21-February-2009)
// 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.
// With the ability to scale the effect time on secified minimum/maximum values<br />
// and with three types of progression 'sin' and 'cos' and liner.

// **** 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('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2). (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)
// parameter 5 = (optional) to scale the effect time on a secified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (digits)
// parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// 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.
// Note 5: parameter 5 is of particular use when re-calling the effect
// in mid travel to retain an constant rate of progression.
//
// **** 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(/\W/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 2.06K) 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,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj||(!srt&&!fin)) return;
var oop=obj[mde.replace(/\W/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],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/\W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.ms);
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
var ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*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.ms) 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 type="text/javascript">
/*<![CDATA[*/
var TogAry=[];
var Lst=null;

function Init(cls,ms){
var objs=zxcByClassName(cls);
for (var z0=0;z0<objs.length;z0++){
TogAry[z0]=[objs[z0],objs[z0].offsetHeight,true,ms||1000];
objs[z0].style.display='none';
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

function displayDiv(nu){
if (Lst&&TogAry[nu]!=Lst&&!Lst[2]){
var lst=Lst;
clearTimeout(lst[0].to);
zxcBAnimator('height',lst[0],lst[1],0,lst[3]);
lst[2]=true;
lst[0].to=setTimeout(function(){ lst[0].style.display='none'; },lst[3]);
}
Lst=TogAry[nu]
Lst[0].style.display='block';
clearTimeout(Lst[0].to);
zxcBAnimator('height',Lst[0],Lst[2]?0:Lst[1],Lst[2]?Lst[1]:0,Lst[3]);
Lst[2]=!Lst[2];
if (Lst[2]) Lst[0].to=setTimeout(function(){ Lst[0].style.display='none'; },Lst[3]);
}

/*]]>*/
</script>
</head>

<body onload="Init('tog',1000);" >
<p><h1>Frequently Asked Questions</h1></p><br>

<a href="#" onclick="displayDiv(0);">This is FAQ question number one?</a><br>
<div class="tog" style="overflow: auto;width:450px; border:2px ridge black;">This is the content to FAQ number one. This is the content to FAQ number one. This is the content to FAQ number one. This is the content to FAQ number one. </div>

<a href="#" onclick="displayDiv(1)">This is FAQ question number two?</a><br>
<div class="tog" style="overflow: auto; auto;width:600px;border:2px ridge black;">This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. This is the content to FAQ number two. </div>

<a href="#" onclick="displayDiv(2)">This is FAQ question number three.</a><br>
<div class="tog" style="overflow: auto;border:2px ridge black;">This is the content to FAQ number three?</div>

<a href="#" onclick="displayDiv(3)">This is FAQ question number four.</a><br>
<div class="tog" style="overflow: auto;width:500px;border:2px ridge black;">This is the content to FAQ number four? This is the content to FAQ number four? This is the content to FAQ number four? This is the content to FAQ number four? </div>

</body>

</html>