Search code examples
javascriptjqueryfirefoxoperamozilla

jQuery partially not working in firefox and opera

I'm testing my webpage in browsers and it seems that some bits are not working in firefox and opera. I assume it's caused by jQuery used on my page.

This is my website: http://freshbeer.lv/ht/index.html

At the bottom of the source code you can find all jQuery code used (mainly to call and apply plugins). I'm having trouble to determine what is wrong, as there are no errors shown in console (firefox 20.0) Main dysfunctions are

  1. player, just compare how it works in chrome and than check it out in firefox or opera, first of all it doesn't show "..." which signifies loading, secondly once you click play on another player, both songs keep playing, where as in other browsers first song would pause, so there would be only one song playing.

  2. advertisement should have margins on top and bottom calculated by jQuery, it doesn't in opera and firefox. So Am I missing something? Maybe I need to apply certain code standards?

That seems to be all, however I can't be sure.

I'll put code written by me here (most likely issue is in it), note, there are several jQuery plugins included above it.

<script type="text/javascript">

//Audio Player
audiojs.events.ready(function () {
    var as = audiojs.createAll();

        $('audio').each(function () {
            var myAudio = this;
            this.addEventListener('play', function () {
                $('audio').each(function () {
                    if (!(this === myAudio)) {
                        this.pause();
                    }
            });
        });
    });
});

$(document).ready(function() {

    //Responsive add margins
    function addMargin () {
        var add = $(".advert");
        var addMargin = add.css("margin-left");
        add.css({
            "margin-top": addMargin,
            "margin-bottom": addMargin
        });
    }
    addMargin();
    $(window).resize(addMargin);

    //Responsive Grid
    var MusicGrid = (function() {
        var $musicGridContainer = $('.grid'),
            init = function() {
                changeMusicGrid();
                initEvents();
                initPlugins();
            },
        changeMusicGrid = function() {
            var w_w = $(window).width();
            if (w_w <= 765) n = 1;
            else if (w_w <= 1180) n = 2;
            else n = 3;
        },
        initEvents = function() {
            $(window).on('smartresize.MusicGrid', function(event) {
                changeMusicGrid();
            });
        },
        initPlugins = function() {
            $musicGridContainer.imagesLoaded(function() {
                setTimeout(function() {
                    $musicGridContainer.masonry({
                        itemSelector: '.article',
                        columnWidth: function(containerWidth) {
                            return containerWidth / n;
                        },
                        isAnimated: true,
                        animationOptions: {
                            duration: 150
                        }
                    });
                }, 500);
            });
        };
        return {
            init: init
        };
    })();
    MusicGrid.init();
});


//Preload Content
function preloadCode() {
    if (preloadCode.done) return;
    preloadCode.done = true;
    clearTimeout(t);

    $(".preloader").css("display", "none");
    $(".grid").css({ opacity: 0, visibility: 'visible', marginTop: 20 }).animate({ marginTop: 0, opacity: 1 }, 550);

    $('.article[id^="article-"]').each(function () {
        if (parseInt(this.id.replace('article-', '')) % 3 === 0) {
            $('#' + this.id).css({ marginTop: 50 }).animate({ marginTop: 0 }, 350);
        } else if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
            $('#' + this.id).css({ marginTop: 100 }).animate({ marginTop: 0 }, 400);
        } else {
            $('#' + this.id).css({ marginTop: 150 }).animate({ marginTop: 0 }, 450);
        }
    });

    $(".footer").css("display", "block");

}

var t = setTimeout(preloadCode, 6000);
$(window).load(preloadCode);

</script>
Solution

  • 1. advertisement should have margins on top and bottom calculated by jQuery, it doesn't in opera and firefox. So Am I missing something? Maybe I need to apply certain code standards?

    Your element has auto margins, so, depending on the browser, .css('margin-left') might return different values, including 0.

    I recommend using the JsSizes library which is a lightweight plugin that will allow you to get the actual margins in pixels.

    2. player, just compare how it works in chrome and than check it out in firefox or opera, first of all it doesn't show "..." which signifies loading, secondly once you click play on another player, both songs keep playing, where as in other browsers first song would pause, so there would be only one song playing.

    Firefox and Opera don't support mp3 in their audio element, so it gets replaced by a flash object. Therefore you can't listen to those DOM events anymore.

    Although, according to their annotated source code, the flash object has public methods play(), pause(), and isPlaying.

    I'd recommend listening a click event on the 'play-pause' button and use these functions. Like this :

    var as = ''; // You're going to have to make your as variable global to access it outside of your function.
audiojs.events.ready(function () {
    as = audiojs.createAll();
    $('.audiojs .play-pause').click(function(){ //Listening to the click event
        var thisIndex = $(this).parents('.audiojs').index('.audiojs'); // When you create several players, as is an array of instances of players. Here we're finding the DOM index of the player so it reflects its position in the as array.
        $.each(as, function(index,val){ //then, for each instance of players in the as array
            if ( index != thisIndex && as[index].playing ) as[index].pause(); //If the player is already playing, and its index is different than the one we just clicked on, pause it !
        });
    });
});