3:39 AM
0
A: jQuery: Code working on fiddle not working on site

Andrew WhitakerI 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; outlin...

 
thanks, I think that would only apply to the flash player, whose id="f-SIX" is inside id="SIX". In Chrome, for example, there is no id="f-SIX" so the inside/outside problem doesn't exist. Actually, I don't think you're answer is correct, because when I hid id="SIX" in Chrome it didn't hide id="f-SIX" in firefox...
 
@Michael: Are you sure? I'm in chrome right now...
 
o.k, i'll take a closer look again. Thank you. I"m sure you're right. You're a lot more experienced than I am!
 
@Michael: Hmm, you're right about different things happening in different browsers. I see no id="SIX" in FireFox...
 
..the audio plugin creates an id #f-ONE for firefox. Anyways, for the purpose of figuring out the problem, I removed the code that hides the #f-ONE divs (so in firefox 16 players should show), therefore, there is nothing that should theoretically stop the program from working in Chrome. In Chrome, the divs in format #ONE, #TWO are hidden with CSS and then, according to your fiddle code, one of them should show once you click start.
 
3:39 AM
@Michael: I'm beginning to think that .show() and hide() act unpredictably on the object tag. Is there any way you could wrap both objects with one div that you show and hide instead?
 
I think your suggestion would involve altering the plugin code which is very complex. Anyways, I have no idea what's happening now. I removed the jquery that was hiding the flash players in firefox but they are still hidden.
Hi, thanks a lot for your help, but if you have other things to do, please don't worry about this issue!!!
 
No problem, I'm interested in figuring it out now :p
 
well, I have no idea now, there should be one audio player showing in each browser because I removed the jquery and css that hides the audio players for #ONE and #f-ONE
to give you background, I was able to hide all the audio players in Chrome and Safari using CSS, but in Firefox because of the different divs, I had to hide them with javascript
 
Ah ok
So Chrome is the simplest case right? Because then just showing the audio tag should work
 
that's what I thought, yes
 
3:44 AM
But that doesn't even seem to be correct
 
that's right, when I remove the javascript that hides the firefox players, chrome still didn't work, although it may be a cache issue
 
Hmm
So in Chrome, the elements with id starting with "f" shouldn't show up (in reference to a comment way earlier)
Is that correct?
(I'm still seeing those, and selecting them in the console yields results)
 
I assume so...I gave the chrome audio players an id of #ONE and then hid them, but maybe, as you seem to have spotted, the audio player gives them those ids behind the scenes
anyways, I have no once again removed the javascript that hides those #f ids so that should not be an issue. Also, one audio player should be visible in chrome because I removed the css display: none for one of them
 
Is that up on the live page?
 
yeah, now, I'm just clearing my cache to see what it shows. Chrome's cache holds onto stuff forever
 
3:49 AM
Yeah it does
you can use Incognito mode to disable it (Ctrl+Shift+N)
Well I see ONE now
 
yeah, I took off css display: none for one of them
 
Ok. If you do "Inspect Element" on that guy do you see the object#f-one underneath?
 
o.k, well, I hid it again, but I saw what you mean in your OP answer. However, there's absolutely no CSS or Javascript hiding #f-ONE, so that should not be an issue now, I think
 
Right, except for that if statement in the JS that looks for $("#f"...) on the page
that will evaluate to true, and the else block won't be entered
 
o.k, so to get this working in Chrome at least, what should I do to that if statement?
 
3:56 AM
Just to see if it'll work in chrome you could just keep the else code
and go from there for the other browsers if you want
 
o.k, I made that if statement false and it seems to work in chrome now. You were right about the problem I think. Good job.
 
Np. I am worried about the other browsers though. I wonder if you just hide $("#" + ran) if it'll work for the other browsers too
I'm not sure about that
 
I'm sorry, I don't get it. isn't $("#" + ran) what's allowing it to show in Chrome? why would I hide it?
are the players showing for you in firefox? they're not showing for me now but they should be (since the code that's hiding them is hidden).
 
oh sorry i misspoke... I mean if you just use $("#" + ran)
In FF 5.0 they are showing up
 
o.k, well, I changed it to $("#" + ran) and it works in Chrome, but I don't know how this will help the situation in FF.
I have to find a way to hide them in Firefox without screwing it up for Chrome, but that looks very hard because they have the same ids
 
4:04 AM
I don't think it will
Yeah--Lets see
 
maybe I should add a class to the players in firefox? do you know how to do that?
 
There might be a way to accomplish it pretty easily, lets see
so in FF 5, the markup just looks like the object tag, no audio tag. Which means that $("#ONE") for example doesn't exist at all
 
I'm assuming the same problem might exist in I.E...which I can't test
 
maybe it's just a matter of swapping your if/else logic around
lucky you haha
I can take a look in IE9
 
yeah, but my students probably all use IE
 
4:05 AM
ah
So ok if you change your `if/else` to:

if ($('#ONE').length) {
ran = $('#' + ran);
ran.show();

} else {
ran = $('#f-' + ran);
$('ran').show();
}
that takes care of the Chrome case with the if statement. and the if will fail, at least in FF, so it'll run the else code, which we want
 
o.k., I get it, now do you know a way to hide firefox players? if I hid the FF players the same way, wouldn't the #f-ONE still interfere?
O.K, I put your code in and Chrome still works.
 
You should be able to use CSS or JavaScript to hide the #f-* players and not affect chrome
 
o.k, I used CSS to hide the players in FF. It works fine, and Chrome still works, but when you click start in FF, it doesn't show a player.
 
dang! alright, lets see
 
so is it because you swapped the if/else logic that Chrome still works? even though the CSS #f-ONE would normally keep the player hidden in Chrome?
 
4:16 AM
Nope, try ran.show() instead of $('ran').show
(even then i'm not sure it'll work though)
 
same result unfortunately
 
yeah i typed it in the console and it didnt work
 
would hiding the FF audio with javascript rather than CSS maybe off a solution?
 
Not sure. If you go to the firebug console and type $("f-ONE").show() it does not work either
oops i mean $("#f-ONE")
I have an idea. In the else block instead of using ran.show() try:
ran[0].style.display = 'block';
OR:
ran.css("display", "block");
 
it works!
 
4:23 AM
Weird right?
I will look in IE9
 
weird, yes. great thinking though on your part. thanks, please do check i.e.
 
In IE it sort of works, but if you click start multiple times it doesn't hide the other players
 
the game is only half finished, I was going to make up a function that clear everything after they play it once, so that shouldn't be a problem (hopefully)
 
Oh ok cool
oh btw I would use
ran.css('display', 'block')
 
thanks so much for your help. I really learned a lot.
 
4:26 AM
instead of the first suggestion
Oh, no problem
 
o.k., I will.
 
I will update my answer with the relevant pieces of this conversation
 
thanks a lot. I'll accept your answer now.
 
Okay. I'm just glad we figured it out, that was pretty puzzling
Good luck with the game!
 
thank you. Cheers