PDA

View Full Version : Toggle between 2 divs but with fade effect



monaya
04-03-2010, 02:19 PM
I have this code that makes one div show and another dissapear. Can I make it so that either the one that shows fades in a little or the one that goes away fades out a little. I just want some effect to show the action instead of it being instant


<script type="text/javascript">
/*<![CDATA[*/
function toggleLayersx(id1,id2){
var obj=document.getElementById(id1);
obj.style.display=obj.style.display=='none'?'inline':'none';
document.getElementById(id2).style.display=obj.style.display=='inline'?'none':'inline';

}
/*]]>*/
</script>

vwphillips
04-03-2010, 03:44 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>
<style type="text/css">
/*<![CDATA[*/
#d1 {
width:100px;height:100px;background-Color:red;display:none;
}

#d2 {
width:100px;height:100px;background-Color:green;
}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// 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 specified minimum/maximum values
// 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.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (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: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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[*/
function toggle(id1,id2,ms){
if (!this.id1){
var obj=document.getElementById(id1);
this.tog=zxcSV(obj,'display')=='none';
this.id1=new zxcAnimate('opacity',obj,this.tog?0:100);
this.id1.Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
this.id2=new zxcAnimate('opacity',document.getElementById(id2),this.tog?100:0);
this.id2.Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
}
this.id1.animate(this.id1.data[0],this.tog?100:0,ms||1000,[0,100]);
this.id1.obj.style.display='block';
this.id2.animate(this.id2.data[0],this.tog?0:100,ms||1000,[0,100]);
this.id2.obj.style.display='block';
this.tog=!this.tog;
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



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

<body>
<input type="button" name="" value="TEST" onclick="toggle('d1','d2',5000);" />
<div id="d1" ></div>
<div id="d2" ></div>


</body>

</html>

monaya
04-03-2010, 04:11 PM
This is really nice! It doesnt seem to work properly in my situation.

I have div being created dynamically server side so the div id's change like div34, div 35, div36 and so on. It works find with my code, but with yours it seems to open and close the same div only even when I select a different div.

vwphillips
04-03-2010, 05:03 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>
<style type="text/css">
/*<![CDATA[*/
#d1 {
width:100px;height:100px;background-Color:red;display:none;
}

#d2 {
width:100px;height:100px;background-Color:green;
}

#d3 {
width:100px;height:100px;background-Color:yellow;display:none;
}

#d4 {
width:100px;height:100px;background-Color:blue;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// 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 specified minimum/maximum values
// 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.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (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: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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[*/
function toggle(id1,id2,ms){
if (!this[id1].data){
var obj=document.getElementById(id1);
var tog=zxcSV(obj,'display')=='none';
this[id1]=new zxcAnimate('opacity',obj,tog?0:100);
this[id1].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
this[id1].tog=tog;
this[id2]=new zxcAnimate('opacity',document.getElementById(id2),tog?100:0);
this[id2].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
}
this[id1].animate(this[id1].data[0],this[id1].tog?100:0,ms||1000,[0,100]);
this[id1].obj.style.display='block';
this[id2].animate(this[id2].data[0],this[id1].tog?0:100,ms||1000,[0,100]);
this[id2].obj.style.display='block';
this[id1].tog=!this[id1].tog;
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



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

<body>
<input type="button" name="" value="TEST d1 d2" onclick="toggle('d1','d2',5000);" />
<div id="d1" ></div>
<div id="d2" ></div>

<input type="button" name="" value="TEST d3 d4" onclick="toggle('d3','d4',5000);" />
<div id="d3" ></div>
<div id="d4" ></div>

</body>

</html>

or please post a link to your page

monaya
04-03-2010, 07:26 PM
Hey Vic, Actually the second code block you updated didn't work for me at all (meaning clicking links did nothing), but for the first code block please go here and click the "..." by the user comments above the story.

Collapse again by clicking "show less" and then try to click a different comment, you'll see that the same comment loads again.

http://rimmix.com/Entwine

monaya
04-03-2010, 07:29 PM
Here's some of the html you might need


<a href="javascript:;" onClick="toggle('divshowrestcomment27','showmorecomment27','300');return false;" id='showmorecomment27'>...</a>

<span id="divshowrestcomment27" style="display: none;">roup...anyone care to write it with me???&nbsp;&nbsp;

<a href="javascript:;" onClick="toggle('showmorecomment27','divshowrestcomment27','500');return false;" id='divshowrestcomment27'>less</a>

the numbers behind the div id change.

vwphillips
04-04-2010, 10:37 AM
this corrects the code for Moz


<!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[*/
#d1 {
width:100px;height:100px;background-Color:red;display:none;
}

#d2 {
width:100px;height:100px;background-Color:green;
}

#d3 {
width:100px;height:100px;background-Color:yellow;display:none;
}

#d4 {
width:100px;height:100px;background-Color:blue;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// 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 specified minimum/maximum values
// 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.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (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: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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[*/
function toggle(id1,id2,ms){
if (!this[id1]||!this[id1].data){
var obj=document.getElementById(id1);
var tog=zxcSV(obj,'display')=='none';
this[id1]=new zxcAnimate('opacity',obj,tog?0:100);
this[id1].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
this[id1].tog=tog;
this[id2]=new zxcAnimate('opacity',document.getElementById(id2),tog?100:0);
this[id2].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
}
this[id1].animate(this[id1].data[0],this[id1].tog?100:0,ms||1000,[0,100]);
this[id1].obj.style.display='block';
this[id2].animate(this[id2].data[0],this[id1].tog?0:100,ms||1000,[0,100]);
this[id2].obj.style.display='block';
this[id1].tog=!this[id1].tog;
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



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

<body>
<input type="button" name="" value="TEST d1 d2" onclick="toggle('d1','d2',5000);" />
<div id="d1" ></div>
<div id="d2" ></div>

<input type="button" name="" value="TEST d3 d4" onclick="toggle('d3','d4',5000);" />
<div id="d3" ></div>
<div id="d4" ></div>

</body>

</html>

I will look at your HTML

I have looked at your HTML
you have duplicate id names which is illegal
and the expanded text is in a span so applying opacity will be a problem

I will have a think but your HTML will require a rethink.

vwphillips
04-04-2010, 01:00 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>
<style type="text/css">
/*<![CDATA[*/
.tst {
position:relative;width:300px;height:150px;border:solid black 1px;
}

#tst1{
position:relative;left:0px;top:0px;
}
#tst2{
position:absolute;display:none;left:0px;top:0px;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// 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 specified minimum/maximum values
// 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.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (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: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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[*/
function toggle(id1,id2,ms){
if (!this[id1]||!this[id1].data){
var obj=document.getElementById(id1);
var tog=zxcSV(obj,'display')=='none';
this[id1]=new zxcAnimate('opacity',obj,tog?0:100);
this[id1].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
this[id1].tog=tog;
this[id2]=new zxcAnimate('opacity',document.getElementById(id2),tog?100:0);
this[id2].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
}
this[id1].animate(this[id1].data[0],this[id1].tog?100:0,ms||1000,[0,100]);
this[id1].obj.style.display='block';
this[id2].animate(this[id2].data[0],this[id1].tog?0:100,ms||1000,[0,100]);
this[id2].obj.style.display='block';
this[id1].tog=!this[id1].tog;
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



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

<body>
<div class="tst" >
<div id="tst1" >
<span>description</span> Twilight is fading as the morning sun rises bringing a serene palette of colors. Waves ripple in melodic synchrony hitting the empty wine bottle on th
<a href="javascript:;" onclick="toggle('tst1','tst2');return false;" id='showmore'>... show more</a>
</div>
<div id="tst2" >
<span>description</span> Twilight is fading as the morning sun rises bringing a serene palette of colors. Waves ripple in melodic synchrony hitting the empty wine bottle on the sand. Leander stands on the shore facing the rising sun, barefoot, jeans rolled up just above his ankles, eyes closed against the sunlight.
<a href="javascript:;" onclick="toggle('tst1','tst2');return false;" id='showmore'>... show less</a>
</div>
</div>
</body>

</html>

monaya
04-04-2010, 03:33 PM
Sorry i forgot to mention I was on mozilla.

It works after the adjustment you mentioned in the previous post!!

if (!this[id1]||!this[id1].data){


Vic where do I have duplicate id's btw?

vwphillips
04-04-2010, 05:00 PM
<span class="style13 style38 style43">
<span class="style38 style49">
Twilight is fading as the morning sun rises bringing a serene palette of colors. Waves ripple in melodic synchrony hitting the empty wine bottle on th
<a href="javascript:;" onClick="toggleLayersx('divshowrestidea117','showmore');return false;" id='showmore'>... show more</a>
<span id="divshowrestidea117" style="display: none;">e sand. Leander stands on the shore facing the rising sun, barefoot, jeans rolled up just above his ankles, eyes closed against the sunlight.
<a href="javascript:;" onClick="toggleLayersx('showmore','divshowrestidea117');return false;" id='showmore'>show less</a>
</span>



fading MinMax(tested with IE and Moz)


<!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 {
position:relative;width:300px;height:150px;border:solid black 1px;
}

#tst1{
position:relative;left:0px;top:0px;
}
#tst2{
position:absolute;display:none;left:0px;top:0px;
}
#tst3{
display:none;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// 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 specified minimum/maximum values
// 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.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (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: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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[*/
function MinMax(id1,id2,ud,ms){
if (!this[id1]||!this[id1].data){
this[id1]=new zxcAnimate('opacity',document.getElementById(id1),100);
this[id1].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
}
this[id1].animate(this[id1].data[0],ud?0:100,ms||1000,[0,100]);
this[id1].obj.style.display='block';
document.getElementById(id2).style.display=ud?'inline':'none';
}

function toggle(id1,id2,ms){
if (!this[id1]||!this[id1].data){
var obj=document.getElementById(id1);
var tog=zxcSV(obj,'display')=='none';
this[id1]=new zxcAnimate('opacity',obj,tog?0:100);
this[id1].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
this[id1].tog=tog;
this[id2]=new zxcAnimate('opacity',document.getElementById(id2),tog?100:0);
this[id2].Complete=function(){ if (this.data[0]==0){ this.obj.style.display='none'; } }
}
this[id1].animate(this[id1].data[0],this[id1].tog?100:0,ms||1000,[0,100]);
this[id1].obj.style.display='block';
this[id2].animate(this[id2].data[0],this[id1].tog?0:100,ms||1000,[0,100]);
this[id2].obj.style.display='block';
this[id1].tog=!this[id1].tog;
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



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

<body>
<span class="storytitleonpage">Entwine</span> &nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id="tst3" onclick="MinMax('tst','tst3',false,2000);return false;">(+)</a>
<div id="tst" >
<div id="tst1" >
<span>description</span> Twilight is fading as the morning sun rises bringing a serene palette of colors. Waves ripple in melodic synchrony hitting the empty wine bottle on th
<a href="javascript:;" onclick="toggle('tst1','tst2');return false;" id='showmore'>... show more</a>
</div>
<div id="tst2" >
<span>description</span> Twilight is fading as the morning sun rises bringing a serene palette of colors. Waves ripple in melodic synchrony hitting the empty wine bottle on the sand. Leander stands on the shore facing the rising sun, barefoot, jeans rolled up just above his ankles, eyes closed against the sunlight.
<a href="javascript:;" onclick="toggle('tst1','tst2');return false;" id='showmore'>... show less</a>
</div>
</div>
<br />
<br />
<a href="#" onclick="MinMax('tst','tst3',true,2000);return false;">(- minimize)</a></span>
</body>

</html>

monaya
04-04-2010, 06:17 PM
With the duplicate showmore id issues I couldnt figure out how else to do it because I need to hide a div that's inside a div. I needed the "show more" to disappear when clicked.

For the toggle function, I'm still using code from post #7 which is working perfectly in mozilla.

The toggle function in the last code required clicking twice on the links to open and close.

The minmax function in the last code for the "minimize" link on the page caused my container2 to sort of look out of whack when shown. I also tried using the toggle function there too and for some reason the same happens.

it appears like this when using the function
http://screencast.com/t/NmI2Zjc1NjY

it should look like this:
http://screencast.com/t/MjU3MjI3MDU

This is no biggie I'm really happy using the fade effect on only certain links anyhow!

vwphillips
04-05-2010, 09:14 AM
"minimize" link on the page caused my container2

that is the HTML and style, play around to get the required appearance