Question

I’m using the jCarousel Lite jQuery plugin on a page, but it seems to be causing severe problems in Firefox 3.6. In that browser, the page briefly loads, and then all of the content disappears, except for one of the <li> elements that I’m using the plugin on.

The page in question is here. The code applying the carousel:

<script type="text/javascript">

    jQuery(window).load(function() {
        jQuery(".loopnetcarousel").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev"
        });
    });

</script>

(I was initially using (document).ready, but replaced that with (window).load after seeing that some people have problems with it in Firefox 3.6, but that didn’t seem to change anything).

More information: If I stop the page load before all of the page content is replaced as described, everything works fine, including the carousel. Also, I tried replacing that carousel script with another one, and the same problem occurs.

Answer 1

Looks like the problem is the way that the loopnet.com properties are loaded. The loopnet.com scripts use document.write to create the carousel content. If you look at the Net tab in Firebug you will see that the loopnet.com scripts are all loaded twice. First when the page loads and then again when the carousel script is run. The second time it is run in Firefox the document.write just clears the entire page. A simple fix would be to just remove the script tags before setting up the carousel code. Example jsFiddle: http://jsfiddle.net/fqFH7/7/

 $(function() {
    //remove the scripts so that they are not executed again by the carousel code
    jQuery(".loopnetcarousel script").remove();    

    jQuery(".loopnetcarousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

Try commenting out the remove() line in the jsFiddle and you will see the same problem as your site.