SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Objects and scope Please help!!!!


    In the method nextImage, I can't figure out how to access thumbs. It keeps coming back as undefined. (Using Firefox)

    I'm relatively new to javascript and this is killing me!!! Please help!

    Code JavaScript:
    function runPortal(portal_number){
    	// there are multiple runPortals on each webpage
     
    	this.portal = document.getElementById('portal'+portal_number); // represents the div that holds the images
    	this.thumbs = this.portal.getElementsByTagName('a').length; // represents all the images within the div that will be rotated
    	this.length = this.thumbs.length; // that's how many images will be rotated
     
     
    	// Hide everything
    	for (var j=0;j<this.thumbs.length;j++){
    		if (j==0) continue; // Don't hide the first one
    		this.thumbs[j].childNodes[0].style.display = 'none';
    	}
     
     
    	this.nextImage = function (){
    		// there are a fixed number of images to rotate. Start over
    		if (this.i >= this.length){
    			this.i = 0;
    		}
    		// One fades away, the next appears
    		Effect.dglPuff(this.thumbs[this.last].childNodes[0], {duration:.6, from:.7});
    		Effect.Appear(this.thumbs[this.i].childNodes[0]); 
     
    		// iterate to the next image for the next run
    		this.last = this.i;
    		this.i++;
    	}
     
     
    	// Set up the image rotator
    	// here is where I started guessing
    	// thumbs needs to belong to the object rotator, I guess.
     
    	this.rotator = new PeriodicalExecuter(this.nextImage, 4); // This object runs the function every 4 seconds
    	this.rotator.portal = document.getElementById('portal'+portal_number); // represents the div that holds the images
    	this.rotator.thumbs = this.rotator.portal.getElementsByTagName('a'); // represents all the images within the div that will be rotated
    	this.rotator.length=this.length;  // that's how many images will be rotated
    	this.rotator.i=0; // the counter for what image we're one
    	this.rotator.last=0; // the counter for the previous image
     
    }

  2. #2
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll pay $20 paypal if someone can make this work. (FF, IE6 and 7) Edit: Offer suspended, as of post 5, see below.
    Last edited by busy; Jun 27, 2007 at 11:08.

  3. #3
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Replace this line:
    Code:
    this.rotator = new PeriodicalExecuter(this.nextImage, 4);
    With this:
    Code:
    var self = this;
    this.rotator = new PeriodicalExecuter(function() { self.nextImage(); }, 4);
    You can give the $20 to a charity of your own choice.
    Last edited by kyberfabrikken; Jun 27, 2007 at 10:41. Reason: whoops - a bit too fast

  4. #4
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh? Isn't that the same? I think he rather needs closures:

    Code:
    this.rotator = new PeriodicalExecuter(this.nextImage.bind(this), 4);

  5. #5
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm testing now. If either one works I'll pay up. If not, the offer is revoked, because I just rewrote the whole thing and I think I found another solution (although I don't like it as much because everything is global)

  6. #6
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neither one worked I still get: "this.thumbs[this.last] has no properties"
    Off Topic:

    Weird, the enter key has quit working in here... I can't start text on a new line...
    Anyways, here's how I ended up doing it.
    Code JavaScript:
    function fadePortals(num_ports){
    	var num_ports = num_ports;
    	// Create array for each portal
    	portal = new Array(num_ports);
    	current = new Array(num_ports);
    	last = new Array(num_ports);
    	thumbs = new Array(num_ports);
    	for (var j=0;j<num_ports;j++){
    		portal[j]=document.getElementById('portal'+j);
    		thumbs[j]=portal[j].getElementsByTagName('a'); // represents all the images within the div that will be rotated
    		current[j]=0;
    		last[j]=0;
    		// hide them all except the first one
    		// thumbs[j] = new Array(thumbs[j].length);
    		for (var i=0;i<thumbs[j].length;i++){
    			if (i==0) continue; // Don't hide the first one
    			thumbs[j][i].childNodes[0].style.display = 'none';
    		}
    	}
    	function switchAll(){
    		for (var j=0;j<num_ports;j++){
    			switchOne(j);
    		}
    	}
     
    	function switchOne(portal_id){
    		if (thumbs[portal_id].length == 1){
    			return;
    		}
    		// alert(thumbs[portal_id].length);
    		if (current[portal_id] >= thumbs[portal_id].length){
    			current[portal_id] = 0;
    		}
     
    		Effect.dglPuff(thumbs[portal_id][last[portal_id]].childNodes[0], {duration:.6, from:.7});
    		Effect.Appear(thumbs[portal_id][current[portal_id]].childNodes[0]);
    		last[portal_id] = current[portal_id];
    		current[portal_id] = current[portal_id]+1;
    	}
     
    var rotator = new PeriodicalExecuter(switchAll, 3);
    }
    Thanks for the replies though, I appreciate the help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •