treadmill wrote:
> Hi All,
>
> I'm a bit of a novice with javascript, so please be patient with me.
> I've created a function that basically takes an array of images and
> rotates them on a web page. What I want to do is change this code to a
> Class, so I can create multiple instances of the class and therefore
> run multiple instances of it on the same web page.
>
> Here is the current code that I have, which works absolutely fine and
> have had no problems with. I'm showing you this, so you have an idea
> of what I trying to convert to a class and that you are seeing real
> working code to start with. This code is called from the web page as
> an Event as follows:
>
> Event.observe(window, "load", function() {
> ImageRotater.init(iTrn,'imgTran');
> });
>
> [1 CODE START]
> var iTrn=new Array();
> iTrn[0]=new Image(387,336); iTrn[0].src="/images/cigar_and_snuff/
> transitions/transition_8.jpg";
> iTrn[1]=new Image(387,336); iTrn[1].src="/images/cigar_and_snuff/
> transitions/transition_2.jpg";
> iTrn[2]=new Image(387,336); iTrn[2].src="/images/cigar_and_snuff/
> transitions/transition_3.jpg";
> iTrn[3]=new Image(387,336); iTrn[3].src="/images/cigar_and_snuff/
> transitions/transition_4.jpg";
> iTrn[4]=new Image(387,336); iTrn[4].src="/images/cigar_and_snuff/
> transitions/transition_5.jpg";
> iTrn[5]=new Image(387,336); iTrn[5].src="/images/cigar_and_snuff/
> transitions/transition_6.jpg";
> iTrn[6]=new Image(387,336); iTrn[6].src="/images/cigar_and_snuff/
> transitions/transition_7.jpg";
> iTrn[7]=new Image(387,336); iTrn[7].src="/images/cigar_and_snuff/
> transitions/transition_1.jpg";
>
> var ImageRotater = function() {
> var step = 0;
> var fadestep = 0;
> var timer;
> var fotimer;
> var fitimer;
> var l, im;
>
> return {
> init:function(ia,d) {
> l = $(d); im = ia;
> setTimeout("ImageRotater.imgFadeOut()",5000);
> },
> imgFadeOut:function() {
> clearInterval(fotimer);
> fadestep = l.getStyle('opacity');
> if (fadestep <= 0) { ImageRotater.imgTrans(); return; }
> fadestep -= 0.02; l.setOpacity(fadestep); fotimer =
> setInterval("ImageRotater.imgFadeOut()",50);
> },
> imgTrans:function() {
> clearInterval(timer);
> if (step >= im.length) step=0;
> l.setOpacity(0.0); l.src=im[step].src; l.show(); step++;
> ImageRotater.imgFadeIn();
> },
> imgFadeIn:function() {
> clearInterval(fitimer);
> fadestep = l.getStyle('opacity');
> if (fadestep >= 1) { timer =
> setInterval("ImageRotater.imgFadeOut()",5000); return; }
> fadestep += 0.02; l.setOpacity(fadestep); fitimer =
> setTimeout("ImageRotater.imgFadeIn()",50);
> }
> };
> }();
> [1 CODE END]
>
> So that's the working code.
>
>
>
>
> Now I want to convert this to a working class using Prototype
> 1.6.0.3. This is what I have so far and this code is called on the
> webpage as an event as follows:
>
> Event.observe(window, "load", function() {
> var t = new RotateImages(ihTrn,'imgTran');
> t.imgFadeOut();
> });
>
>
> I know that when the following line is executed, within the class,
> nothing happens:
>
> this.fotimer = setInterval("this.imgFadeOut",50);
>
> If I change this line to the following:
>
> this.fotimer = setInterval("this.imgFadeOut()",50);
>
> Then it reports that this.imgFadeOut() is not a function.
>
>
> [2 CODE START]
> var RotateImages = Class.create({
It's a good idea to name constructor in a form of a noun - e.g.
"ImageRotator", rather that of a verb.
> initialize: function(i,d) {
> this.step=0;
> this.fadestep=0;
> this.timer;
> this.fotimer;
> this.fitimer;
> this.l=d;
> this.im=i;
These expressions are pretty useless (except for clarity). You can
safely omit them.
> },
> imgFadeOut: function() {
> clearInterval(this.fotimer);
> this.fadestep = $(this.l).getStyle('opacity');
> if (this.fadestep <= 0) { this.imgTrans; }
> else { this.fadestep -= 0.02;
> $(this.l).setOpacity(this.fadestep);
> this.fotimer = setInterval("this.imgFadeOut",50); }
setInterval(this.imgFadeOut.bind(this), 50);
> },
> imgTrans: function() {
> clearInterval(this.timer);
> if (this.step >= this.im.length) this.step=0;
> $(this.l).setOpacity(0.0); $(this.l).src=im[this.step].src; $
> (this.l).show(); this.step++; this.imgFadeIn;
> },
> imgFadeIn: function() {
> clearInterval(this.fitimer);
> this.fadestep = $(this.l).getStyle('opacity');
> if (this.fadestep >= 1) { this.timer =
> setInterval("this.imgFadeOut",
... same here
> 5000); }
> else { this.fadestep += 0.02;
> $(this.l).setOpacity(this.fadestep);
> this.fitimer = setTimeout("this.imgFadeIn",50); }
... and here
> }
> });
> [2 CODE END]
>
> Any ideas how I can get round this problem, or even if it's possible
> to do what I'm trying to do with this class?
>
> Many thanks for your help!
>
> Regards,
> Kevin
--
kangax
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
