Question

I have a problem where an element is not showing on Opera nor Firefox. Using firebug on Firefox I could see that an error saying that a function I use to initialize the code ‘is not defined‘

Now here’s the thing, when I empty the cache on the Firefox browser, I can see my element which contains a “facebook button” and the error is gone, but once I refresh the browser I can’t see my element and returns the error again. I would have to empty out the cache in order to see the button once again.

The element is supposed to be triggered with jQuery to show if a facebook user is online, and if not it will show that button. But this is only working on Chrome & Safari, and I believe on IE8 (which i don’t have) but someone told me it worked.

This is the code to show the element on my Javascript file:

jQuery('#fbLogin').show();

Now, if i was to change this on my .css file:

#fbLogin {
display:none;
}

to this:

#fbLogin {
display:block;
 }

it will display, but the problem i saw was that it showed all the time, and this needs to be hidden if the user is logged in. I basically have a code that says .show the button and .hide if logged in…

here’s a link to a page if you want to take a look further:

http://gullypost.com/entertainment/tim-westwood-kendrick-lamar-interview/

On Safari & Chrome you will notice that the facebook button shows up on the right sidebar, but not visible on the other browsers.

Can someone help me solve the problem to this? Thanks.

Answer 1

It looks like the second time the page loads, you’re getting the following JavaScript error:

fb_og_actions_init_vid is not defined

The file that contains the function is being added to the page correctly. My only guess would be to try and move the reference to the function:

fb_og_actions_init_vid("Connected to Facebook", "108821");

To within a document.ready function:

$(document).ready(function(){
    fb_og_actions_init_vid("Connected to Facebook", "108821");
});