1

I have tried every possible combination of methods for replacing an image but have found no solution that works.

I uploaded the problematic code here: http://dl.dropbox.com/u/2959730/index.html

I would suggest downloading the source and trying your code. The problem lies with the player.playPause() function that should be attached to the #playButt img.

Please help I've been struggling for hours now!

EDIT:

I've corrected everything and as per suggestion I'm using this code now for playPause(), but it still doesn't work!. This is the most frustrating thing I have ever dealt with...

this.playPause = function(){  
    this.status = !this.status;  
    var status = this.status;
    var playEl = document.getElementById('play');
    $("#play").fadeOut(200, function(){  
        if(status)  
            playEl.src = "img/pauseButton.png";
        else  
            playEl.src = "img/playButton.png";
        $("#play").fadeIn(200); 
    }) 
}
jpopesculian
  • 712
  • 3
  • 11

3 Answers3

1

playPause() is defined as a property of var player, in playlist.js.

Your onclick onclick="playPause(); return false;" isn't calling playPause because it can't find the function in the global scope. You need to change your onclick to:

onclick="player.playPause(); return false;"

Update:

The problem is with this callback:

$("#play").fadeOut(200, function(){  
    if(this.status)  
        playEl.src = "img/pauseButton.png";
    else  
        playEl.src = "img/playButton.png";
}).fadeIn(200);

this.status is undefined inside that callback since this now refers to the element #play. To fix this problem you need to declare var status = this.status before the callback, and test if(status) inside the callback.

Two other things:

  1. The .fadeIn(200) should be placed inside the callback, otherwise it is running before the fadeOut completes (so there's no fade effect at all).
  2. You don't need var playEl = document.getElementById('play'); since you're using jQuery to grab the element. Inside the callback, the this keyword refers to the element already.

The complete code should be:

var status = this.status = !this.status;
$("#play").fadeOut(200, function(){  
    if(status)  
        this.src = "img/pauseButton.png";
    else  
        this.src = "img/playButton.png";
    $(this).fadeIn(200);
});

Another Update:

In addition to the above fix, there's a further problem. It looks like there are two elements on the page with id="play". In fact, the whole #ipod2 is duplicated. I checked the source code, but it's not there, only in the live DOM. If you $("#play").remove(); in the console, you'll see that the image replacement code now works. However, you'll need to find out where ipod2 is being cloned in the JS and fix that.

David Tang
  • 92,262
  • 30
  • 167
  • 149
  • it probably has to do with the slider javascript that causes the sliding back and forth. I really appreciate the tip, and I'll definitely look into it. – jpopesculian Jan 04 '11 at 01:00
  • Thank you so much. I finally figured it out. I had a never ending function on the slider resulting in a clone of ipod2. I fixed it and it works perfectly. Btw I love you. – jpopesculian Jan 04 '11 at 01:16
0

You aren't actually attaching to the #playButt image though, from what I can tell. All you're doing is defining the onclick attribute of that image and just calling playPause, which isn't defined.

Have you changed the document since you asked your question?

Does it work if you have onclick="player.playPause(); return false;" in your onclick handler for the #playButt image?

Alex Vidal
  • 4,080
  • 20
  • 23
  • I actually fixed that a while ago... Here I updated the code: http://dl.dropbox.com/u/2959730/index.html. It still doesn't work though. – jpopesculian Jan 04 '11 at 00:25
0

You definitely need to have player.playPause() instead of just playPause().

And you seem to have a problem in the css or height function of slider.js as Firebug reports that a[0] is undefined.

Nabab
  • 2,608
  • 1
  • 19
  • 32