asked on

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

Barry Jones

ASKER

PS. Any tips on better coding of this appreciated... :)

m00003643

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

Barry Jones

ASKER

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

m00003643

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

Barry Jones

ASKER

Thanks..

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

How can I prevent that?

Thanks, TheFoot

ASKER CERTIFIED SOLUTION

m00003643

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Barry Jones

ASKER

Great stuff! Thanks...