CODEWITHSUNDEEP
jquerydebugging
Leahcim
Leahcim

Reputation: 41919

jQuery: Code working on fiddle not working on site

On this site testsite, I'm making a numbers game for ESL students. It uses a flash and a html5 audio player depending on browser (The plugin for somereason uses flash for firefox, but that's not really important). There are 16 audio tracks. The flash player divs are #f-ONE, #f-TWO etc, while the html5 are #ONE, #TWO etc.

All the audio players are hidden on page load, and then (using the working code from this fiddle http://jsfiddle.net/andrewwhitaker/9BcUP/) when you click the start button, one number from an array of 16 is selected and assigned to variable ran and then either #f- is added if it's flash or # is added if html5 and then one of the audio players is supposed to show. ran.show(): but it doesn't work.

For debugging, I put in some console.log(ran) and it shows that the random element from the array is selected and then the div # is being added, but for someone reason the audio player is not showing.

Can you help me figure out why?

Upvotes: 1

Views: 179

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

I noticed that your markup is:

<audio controls="" autobuffer="" id="SIX" class="html5audio">
    <source src="http://eslangel.com/wp-content/uploads/2011/07/six.mp3" type="audio/mpeg">
    <object type="application/x-shockwave-flash" name="f-SIX" style="outline-style: none; outline-width: initial; outline-color: initial; visibility: visible; " data="http://eslangel.com/wp-content/plugins/degradable-html5-audio-and-video/incl/player.swf" width="290" height="24" id="f-SIX"><param name="wmode" value="opaque"><param name="menu" value="false"><param name="flashvars" value="initialvolume=80&amp;soundFile=http://eslangel.com/wp-content/uploads/2011/07/six.mp3&amp;playerID=f-SIX"></object>
    <script type="text/javascript">AudioPlayer.embed("f-SIX", {soundFile: "http://eslangel.com/wp-content/uploads/2011/07/six.mp3"});</script>
</audio>

Note that the element with id='f-SIX' is inside the element with id='SIX'. This means that when you hide elements with id="NUM", the element with id='F-NUM' is also hidden. Showing the inner element will not cause it to show up because the parent element is hidden (at least this appears to be the case for Google Chrome)

Additionally, you have to think about browsers for which only the elements with id='f-SIX' are going to show up. This occurs because the audio tag is not supported in some browsers yet, therefore just the object tag will show up.

I would change your JavaScript as follows:

$(".start").click(function() {

    var ran = getRandom(myArray, true);
    if ($('#ONE').length) { 
        ran = $('#' + ran);
        ran.show();

    } else {
        ran = $('#f-' + ran);
        ran.css('display', 'block');
    }
});

Also note the use of display:block instead of .show(). The only reason for this is because I couldn't get the object tag to play nice with .show() (any advice on this appreciated).

For anyone reading, please read the entire chat transcript to see how I came about this answer.

Upvotes: 1

Related Questions