Procedural JS to Object JS conversion problem
Posted: Wed Sep 08, 2010 1:27 pm
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
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';
}