jQuery .data() Firefox

Question

Any reason or knowledge to why using jQuery's .data() won't do anything on Firefox? I have built the following and it works great on Chrome/Safari but on Firefox it doesn't.

$(function() {
    $('.top-header-container .top-section.outer').data('size','big');
});
$(window).scroll(function() {
    var $headerTop = $('.top-header-container .top-section.outer');
    if ( $('body').scrollTop() > 0 ) {
        if ($headerTop.data('size') == 'big') {
            $headerTop.data('size','small').stop().animate({
                height: '40px'
            }, 600);
            $headerTop.find('.main-menu-container').stop().animate({
                opacity: 0
            }, 600);
            $headerTop.find('.site-logo-big').fadeOut(300, function() {
                $headerTop.find('.site-logo-small').fadeIn(300);
            });
            $headerTop.find('.social-container-big').fadeOut(300, function() {
                $headerTop.find('.social-container-small').fadeIn(300);
            });
            $('.content-container').stop().animate({
                marginTop: '130px'
            }, 600);
            $headerTop.addClass('small');
        }
    } else {
        if ($headerTop.data('size') == 'small') {
            $headerTop.data('size','big').stop().animate({
                height: '205px'
            }, 600);
            $headerTop.find('.main-menu-container').stop().animate({
                opacity: 1
            }, 600);
            $headerTop.find('.site-logo-small').fadeOut(300, function() {
                $headerTop.find('.site-logo-big').fadeIn(300);
            });
            $headerTop.find('.social-container-small').fadeOut(300, function() {
                $headerTop.find('.social-container-big').fadeIn(300);
            });
            $('.content-container').stop().animate({
                marginTop: '285px'
            }, 600);
            $headerTop.removeClass('small');
        }  
    }
});

UPDATE: Adding console.log('test'); directly below $(window).scroll(function() { so before any .data() is used, it shows in the FF console. BUT if I put a console.log below if ( $('body').scrollTop() > 0 ) { nothing happens in Firefox, but does in Chrome. Does scrollTop work in FF?

Thanks in advance, R

@ComFreek No, that's the weird thing. It carries out all the rest of the JS in that file fine... before and after this function. — John the Painter, May 17 '14 at 13:01

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

Referencing this question: Animate scrollTop not working in firefox

The issue was that FF uses html as the overflow, whereas other browsers else uses body. However, adding body body,html results in it working in FF, but not in Chrome. The best solution for this is to use $(window).scrollTop() rather than $('body').scrollTop().

Hope this helps.

edited May 23 '17 at 12:15

Community

1
1

answered May 17 '14 at 13:13

John the Painter

2,495
8
59
101

score 0 · Answer 2 · answered May 17 '14 at 13:56

The .data() method works just fine on Firefox and so does .scrollTop().

The simple solution to your problem is: Instead of using if ( $('body').scrollTop() > 0 ) use if ( $(window).scrollTop() > 0 )

A little theory:

If you remove <!DOCTYPE html> from your document, $('body').scrollTop() will work just fine. I cannot properly explain why this happens. It has got something to do with element layout attributes in HTML5. But I would not recommend removing the HTML5 declaration since it is the standard.

jQuery .data() Firefox

2 Answers2