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 prototype-scriptaculous@googlegroups.com
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to