PDA

View Full Version : Fade Script needed



Adalast
Jul 14th, 2009, 03:37 AM
I am looking for a fade script that works with a button similar to the one found here (http://www.greywyvern.com/code/javascript/). unfortunately, my coding experience is limited, so i need some help to figure out how to get done what i need done.

this script works exactly as i need it to for the site i'm working on, except it won't do images. i understand the limitation on this script, but still need image support. so would there be a way to modify this script to function on an alpha shift rather than a color change.

i need the fade to be triggered for various options in the same location on the web page. if any of you know of a script that is already completed that would accomplish this, please share. if anyone can help me figure out how to modify the one i have so that it will function as an alpha fade rather than a color change, that would work as well. all i really care about is that i can have a link on my page that causes text + images to fade in, then fade out when another button is clicked before fading in the next selection.

i know that i could accomplish this with flash, but the setup for the text fade script that i posted previously works so beautifully and looks exactly as i want it to, i would really rather stick with the JS way of doing it.

TinyScript
Jul 14th, 2009, 04:31 AM
I have a fade script as part of this script. You're welcome to pick it out.
http://stirfrydesign.110mb.com/index.htm
the image fades away after you click on it

vwphillips
Jul 14th, 2009, 10:21 AM
<!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 (14-May-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 specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** 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 specified 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.
// Note 6: parameters 2 and 3 must be different values to execute the script.
//

// **** Advanced Applications
//
// Calling function 'zxcBAnimator' returns the instance of the script,
// this may be assigned to a variable and used to access the current value of the effect or to control the effect.
// alternatively the script instance by 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 [instance].data as fields 0, 1 and 2 respectively where [instance] is the instance of the script.
//
// Once initialised the effect may be updated by calling function
// [instance].update([100,200])
// where:
// parameter 0 = an array defining the start and finish values. (array)
// field[0] =the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// field[0] = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 2 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (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.
//
// ** Bounce
// A 'bounce' effect may be applied by assigning the script instance property 'Bounce' an array
// defining the 'bounce' properties.
// e.g.
// [instance].Bounce=[100,90,4,200];
// where:
// field[0] = the 'bounce' maximum. (digits)
// field[1] = the 'bounce' minimum. (digits)
// field[2] = the number of bounces. (digits)
// field[3] = the 'bounce' duration. (digits)
//


// **** General
//
// Function 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.41K with 'bounce' and 'opacity' or 1.97K without 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) return;
var oop=obj[mde.replace(/\W/g,'')+'oop'];
if (oop){
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 oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
return oop;
}

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){
clearTimeout(this.to);
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.ms=this.mS;
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(){
this.ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
this.apply();
if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Bounce&&this.Bounce[2]>0) this.bounce();
}
}

zxcBAnimatorOOP.prototype.apply=function(){
if (isFinite(this.data[0])){
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]);
}
}

zxcBAnimatorOOP.prototype.bounce=function(){
if (this.Bounce[2]%2==0)
this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
this.Bounce[2]--;
}

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>

</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
onclick="zxcBAnimator('opacity#',this,100,10,1000);"
/>
<img id="tst1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
onclick="zxcBAnimator('opacity','tst1',100,0,1000);zxcBAnimator('opacity','tst2',0,100,1000);zxcBAnimator('op acity','tst3',0,100,1000);"
/>
<img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
onclick="zxcBAnimator('opacity','tst2',100,0,1000);zxcBAnimator('opacity','tst1',0,100,1000);zxcBAnimator('op acity','tst3',100,0,1000);"
/>

<div id="tst3" style="position:relative;width:100px;height:100px;background-Color:red;"
onclick="zxcBAnimator('left','tst3',100,0,1000);"
>
Some Text
</div>

</body>

</html>

vwphillips
Jul 14th, 2009, 04:41 PM
from pm

hello, thank you for the speedy reply to my post. your script looks like it should work with some fiddling to get everything looking right on the page, but i've run into some problems (mostly do to my horrendous lack of coding skills i'm sure).
for starters i can't seem to get the script working on anything. it works just fine on your example items, but when i try to apply it on anything i have done it just doesn't do anything. i am trying to get <div></div> tags to fade in and out when names are clicked in a list in a separate location on the page.
here is what i have using the other script i found:
the site i'm working on
it also seems that it doesn't like being loaded as an external script. i'm probably going to be using this script on several pages, so it would be really nice to be able to load it from a .js file.

thank you so much for the help,
Adam Ferestad

I can not answer this now, back tomorrow

vwphillips
Jul 14th, 2009, 04:53 PM
had time to test this, ok in FF and IE


<!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 src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
onclick="zxcBAnimator('opacity#',this,100,10,1000);"
/>
<img id="tst1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
onclick="zxcBAnimator('opacity','tst1',100,0,1000);zxcBAnimator('opacity','tst2',0,100,1000);zxcBAnimator('op acity','tst3',0,100,1000);"
/>
<img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
onclick="zxcBAnimator('opacity','tst2',100,0,1000);zxcBAnimator('opacity','tst1',0,100,1000);zxcBAnimator('op acity','tst3',100,0,1000);"
/>

<div id="tst3" style="position:relative;width:100px;height:100px;background-Color:red;"
onclick="zxcBAnimator('left','tst3',100,0,1000);"
>
Some Text
</div>

</body>

</html>

Adalast
Jul 15th, 2009, 05:18 PM
i seem to have it all working now, you're a godsend. since i'm swapping the information out in the same location, i had to use 7 instances with one being used for fading up the correct information over 1000ms and the other 6 doing a fade out on the other info over 1ms. worked like a charm. thank you agian so much vwphillips.