Procedural JS to Object JS conversion problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
thinsoldier
Forum Contributor
Posts: 367
Joined: Fri Jul 20, 2007 11:29 am
Contact:

Procedural JS to Object JS conversion problem

Post by thinsoldier »

Anyone familiar with writing their own JS objects?

I've got a short script for a slideshow that worked fine as procedural code and as an object literal
but in that other object format (what's it called?) it's not working


Function A contains a call to Function B and tells B that it's callback function should be to call A again
Thus making the same thing happen over and over (repeating slideshow)
But I can't seem to find the right "this" that represents the scope containing Function A in order to give it to function B as the callback
if that makes sense.

When I had this set up as an Object Literal
line 37 was calling "Thinslideshow.showtime, ThinSlideshow.nextSlide"
I had previously tried using this.nextSlide in that spot but "this" on that line
was referring to some Scriptaculous object instead of ThinSlideshow.
But once I made that change to mentioning Thinslideshow. explicitly, everything was working as an Object Literal.

I decided to change to this more CLASS-like format so I could have multiple INSTANCES
of the object so I could have more than 1 slideshow with different transition delays.
But in this format the nextSlide function only gets called the first time (line 15)
and on line 37 its unable to call itself over and over

Code: Select all

// Uses Prototype JS Lib
var ThinSlideshow = function(){
this.container='';
this.showtime='3';
this.slides='';

this.setupSlides=function( nodeSlideshowContainer )
{
    this.container = nodeSlideshowContainer;
    this.slides = this.container.childElements();
    this.slides.invoke('addClassName','slide');
    this.slides[0].addClassName('currentSlide');
    this.slides[1].addClassName('nextSlide');
    this.slides[0].fade({delay:this.showtime, afterFinish:this.nextSlide}); // line 15
}

this.nextSlide=function(eff) 
{
    var slide = eff.element.next();
    if(slide == null)    {slide = eff.element.up().down();}

    // previous slide is no longer current
    eff.element.removeClassName('currentSlide');
    eff.element.removeClassName('nextSlide');
    
    // current slide is current and no longer next
    slide.addClassName('currentSlide');
    slide.removeClassName('nextSlide');

    // next slide
    var next = slide.next();
    if( next == null ){ next = slide.up().down(); }
    next.style.display='';
    next.addClassName('nextSlide');
    
	slide.fade({delay:ThinSlideshow.showtime, afterFinish: ThinSlideshow.nextSlide}); // line 36
	console.log(ThinSlideshow.nextSlide); // says it's undefined
}


  this.Version = '0.2';
}
Warning: I have no idea what I'm talking about.
thinsoldier
Forum Contributor
Posts: 367
Joined: Fri Jul 20, 2007 11:29 am
Contact:

Re: Procedural JS to Object JS conversion problem

Post by thinsoldier »

Ok I fixed my problem. I guess this could be equally considered a Prototype library issue as much as a lacking knowledge of general javascript issue.

On line 15 I just needed to add a reference to the "this" in the current scope (my thinslideshow object) so that it would be available within the nextSlide function as a part of the eff.options. Array

Code: Select all

this.slides[0].fade({delay:this.showtime, afterFinish:this.nextSlide}); // line 15
...becomes...
this.slides[0].fade({delay:this.showtime, afterFinish:this.nextSlide, myreference: this }); // line 15

and then in the nextSlide function I can use
var slideshow = eff.options.myreference;
and then I have access to the slideshow.showtime and slideshow.nextSlide
Warning: I have no idea what I'm talking about.
Post Reply