Question

I’m having an issue where I’m helping my front end development guy change a design on a government public site, which restricts us to certain browsers and technologies, as the highest level of Firefox here on post is 3.6, however off post you may look at it in 9 or 10.

At first, I couldn’t get .click() to work with "Pause / Play" buttons inside my JavaScript for a slideshow we implemented in Firefox. After searching many questions here on this site, I was able to fix this in Firefox 3.6 by using .live('click',function().., I understand .live is on its way out, but it fixed our problem in this case..

However, this doesn’t seem to be working when we test it in Firefox 9.

Example of the JavaScript and code for the img buttons below,

Any advice would be much appreciated.

<script type="text/javascript">
    $(document).ready(function () {
        $('.slideshow').cycle({ fx: 'fade', prev: '#btnPrev', next: '#btnNext', timeout: '5000' });
        $('#btnPause').live('click', function () { $('#.slideshow').cycle('pause'); });
        $('#btnPlay').live('click', function () { $('#.slideshow').cycle('resume'); });
    });
    
</script>

<td align="right">
    <input type="image" src="images/pause.png" id="btnPause" alt="Pause" />
</td>
<td align="left">
    <input type="image" src="images/play.png" id="btnPlay" alt="Play" />
</td>

Answer 1

I think it might have to do with these lines:

$('#.slideshow')

I think you just want:

$('.slideshow')

I’m not sure why FF 9 wouldn’t like that, but its the only thing that stands out to me.

If that doesn’t work, I would try just putting the functions in the onclick of your buttons.

Your example would then look like this:

<script type="text/javascript">
    $(document).ready(function () {
        $('.slideshow').cycle({ fx: 'fade', prev: '#btnPrev', next: '#btnNext', timeout: '5000' });
    });

</script>

<td align="right">
    <input type="image" src="images/pause.png" onclick="$('.slideshow').cycle('pause');" id="btnPause" alt="Pause" />
</td>
<td align="left">
    <input type="image" src="images/play.png" onclick="$('.slideshow').cycle('resume');" id="btnPlay" alt="Play" />
</td>