CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
Mohammad Fared
Mohammad Fared

Reputation: 658

Uncaught RangeError: Maximum call stack size exceeded chrome

I am getting the error "Uncaught RangeError: Maximum call stack size exceeded" on chrome. here is my jQuery function

$(window).scroll(function(){
        if ($(this).scrollTop() < 170) {
            $('#main-nav').css('position', '');
            $('#fixed-header-icon').slideUp().addClass('remove');
            if ($('.ajelnews').length > 0) {
                $('.main-nav').removeClass('relative');
                $('.main-nav').css('top', '');
            }
            if (!$('#main-nav').hasClass('main-nav')) {
                $('#main-nav').removeClass("fixed-true");
                $(".close-fixed-header").css('display', 'none');
            }
        }
    });

from this line $(".close-fixed-header").css('display', 'none');

Upvotes: 1

Views: 2605

Answers (1)

Rajendra kumar Vankadari
Rajendra kumar Vankadari

Reputation: 2387

$(window).scroll(function(){
    if ($(this).scrollTop() < 170) {
        $('#main-nav').css('position', '');
        $('#fixed-header-icon').slideUp().addClass('remove');
        if ($('.ajelnews').length > 0) {
            $('.main-nav').removeClass('relative');
            $('.main-nav').css('top', '');
        }
        if (!$('#main-nav').hasClass('main-nav')) {
            $('#main-nav').removeClass("fixed-true");
            $(".close-fixed-header").css('display', 'none');
        }
    }
});

Because you are adding a listener to scroll function inside which you are doing slideUp, which causes a change in window.scroll position. Which inturn causes a loop and going to infinite loop.

Which is where you are geting the error. And by the other chance you are changing the display property of the element.

What exactly happens when you change the display position ?

When css property says display:none for any element, that particular element will go out view tree or render tree. Which means the browser will remove that particular element from the view.

And if you set it back to display:block the tree gets changed and puts in the element back to the view. Which changes the view hieght and width and sometime causes scroll (depends on the parent size).

Upvotes: 1

Related Questions