CODEWITHSUNDEEP
javascriptjqueryinternet-explorergoogle-chromefirefox
user3089222
user3089222

Reputation: 93

Javascript isn't working in Firefox/IE but works in Chrome

For some reason my nav collapse function isn't working in Firefox/IE but works in Chrome.

<script type="text/javascript">
    $(function(){
        $('#header').data('size','big');
    });

    $(window).scroll(function(){
        var $nav = $('#header');
        if ($('body').scrollTop() > 0) {
            if ($nav.data('size') == 'big') {
                $('#logo').fadeOut(300);
                $nav.data('size','small').stop().animate({
                    height:'95px'
                }, 600);
            }
        } else {
            if ($nav.data('size') == 'small') {
                $('#logo').fadeIn(300);
                $nav.data('size','big').stop().animate({
                    height:'185px'
                }, 600);
            }  
        }
    });
</script>

Any ideas? I'm thinking it's a syntax error.

You can see the live example in the navigation at http://medialimes.com

Upvotes: 0

Views: 180

Answers (2)

Joe Binney
Joe Binney

Reputation: 61

Try using $(window).scrollTop() instead of $('body').scrollTop(). This should work on both Chrome and Firefox/IE.

Upvotes: 2

StevenDufresne
StevenDufresne

Reputation: 16

My guess is that when you try to set

$('#header').data('size','big')

doesn actually set the data variable properly.

Try setting it using the attr method.

$(#header).attr('size','big');

Upvotes: 0

Related Questions