Javascript Objects and THIS scope.

Hi

I am building a javascript image slideshow and it is the first time that I am using JS objects.  The attached code is the slideshow.js include file.  The application also uses the JS framework prototype.js 1.6.0.2.

In the ssSlideshow object, I have declared a function "start()".  From this function I need to access the object properties .  this.[property] doesnt seem to be working.

Any ideas pls?  I am sure this is simple... :)

TheFoot
/*
  Javascript / ASP slideshow objects
  Caribbean Systems Inc.
  www.caribbeansystems.com
*/
 
// Array of all the slideshows on the current webpage
var aSlideshows = new Array();
var nSSCount = 0;
 
/////////////////////////////////////////////////////
// Each ssSlideshow object represents a unique slideshow instance
function ssSlideshow(nTheID){
 
  this.id = nTheID;
  this.showcounter = false;
  this.showcaption = false;
  this.shownavigation = false;
  this.resizetoimage = false;
  this.width = 0;
  this.height = 0;
  this.borderwidth = 0;
  this.captionheight = 0;
  this.images = new Array(); 
  
  // Method to create and start the slideshow
  this.start = function(){
  
    // Hide fallback markup
    var eleContainer = $('ss-' + this.id);
    eleContainer.innerHTML = '';
 
    // Build image frame
    var eleFrame = new Element('div', {'class': 'ss-frame'});
    eleFrame.hide();
    eleFrame.style.width = this.width;
    eleFrame.style.height = eleContainer.style.height;
    eleFrame.style.padding = this.borderwidth;
    eleContainer.appendChild(eleFrame);
    
    // Show loading animation
    eleFrame.style.backgroundColor = '#b4dbec';
    var eleImage = new Element('img', {'class': 'ss-image'});
    eleImage.src = '/images/loading.gif';
    eleImage.style.top = (eleContainer.style.height) / 2;
    eleFrame.appendChild(eleImage);
    eleFrame.show();
    
    // Preload each image
    for (x in this.images){
      this.images[x].loadimage();
    }
    
    // Start the slideshow timer
    alert('Ready to start');
    // 
    
  }
  
}
 
/////////////////////////////////////////////////////
// Slideshow Image Object
function ssSlideshowImage(nTheID){
  this.id = nTheID;
  this.url = '';
  this.width = 0;
  this.height = 0;
  this.caption = '';
  this.linkurl = '';
  this.image = new Image();
  this.loadimage = function(){
    this.image.src = this.url;
  }
}
 
/////////////////////////////////////////////////////
// Start all slideshows
function ssStartSlideshows(){
  for (var i = 0; i < aSlideshows.length; i++){
    aSlideshows[i].start();
  }
}

Open in new window

LVL 12
Barry JonesAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
m00003643Connect With a Mentor Commented:
Try this:
function fnTest(){
        this.id = 100;
        this.start = function() { start(this); }
}
 
function start(parent) {
        alert(parent.id);
}
 
var o = new fnTest();
//o.start();

Open in new window

0
 
Barry JonesAuthor Commented:
PS.  Any tips on better coding of this appreciated... :)
0
 
m00003643Commented:
When you refer to "this" from within the start method, it actually refers to the start method itself.  If you need to access properties of the "parent" from within start, try the following:
  this.start = function(){
  
    ...
 
    // Preload each image
    for (x in parent.images){
      parent.images[x].loadimage();
    }
    
    ...
    
  }
 
  this.start.parent = this;  // IMPORTANT!!!!

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Barry JonesAuthor Commented:
Thanks for your reply.  this.id returns "undefined".. please tell me what I am doing wrong.  Below is my test code..

Thanks.. TheFoot
function fnTest(){
  this.id = 100;
  this.start = function(){
    alert(parent.id);
  }
  this.start.parent = this;
}
 
  var o = new fnTest();
  o.start();

Open in new window

0
 
m00003643Commented:
Ahhh... I'm afraid I mislead you on my first post.  When you set the parent property following the start method, you can only access start.parent in subsequent code.  If you need to access the parent from within the start method, then try the following:
function fnTest(){
	this.id = 100;
	this.start = start(this);
}
 
function start(parent) {
	alert(parent.id);
}
 
var o = new fnTest();
o.start();

Open in new window

0
 
Barry JonesAuthor Commented:
Thanks..

Almost there!  This code causes the start() function to be called upon object instantiation...?

How can I prevent that?

Thanks, TheFoot
0
 
Barry JonesAuthor Commented:
Great stuff!  Thanks...
0
All Courses

From novice to tech pro — start learning today.