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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
m00003643Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Barry JonesAuthor Commented:
Great stuff!  Thanks...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.