CODEWITHSUNDEEP
javascriptjquery
Shaggy
Shaggy

Reputation: 11

jQuery Script creates infinite loop in Firefox (only)

I wrote a jQuery Script which checks the window size and increases the outer wrapper to fit perfectly into the users window.

function reSize($target){
    $target.css('width', $(window).width()+'px');
}
$(document).ready(function(){
    setTimeout(function() {
        $(window).bind('resize', reSize($('#blocker')));
        $(window).trigger('resize');

        while($(window).height() < $('.newcontainer').height()+30){
            $('.newcontainer').css('width', $('.newcontainer').width() - 10 +'px');
        }

        $('#chatfenster').css('height', $('.newcontainer').height() - 260 +'px');
        $('#userlist').css('height', $('.newcontainer').height() - 350 +'px');
    }, 100);
});

It works very smooth in Chrome and Safari but in Firefox it's freezing and I don't know why. Sometimes I feel like Firefox is the new IE.

http://design.maxxcoon.com/bestlife/webinar_chat/ (don't open this link in firefox because it crashes the browser)

Can anybody help me please? Thanks in advance

Upvotes: 1

Views: 131

Answers (2)

Shaggy
Shaggy

Reputation: 11

Figured it out without a loop. May be helpful for others.

<script type="text/javascript">

function reSize($target){
$target.css('width', $(window).width()+'px');
}
$(document).ready(function(){
setTimeout(function() {
    $(window).bind('resize', reSize($('#blocker')));
    $(window).trigger('resize');

    var windowSize = $(window).height();
    var containerHeight = $('.newcontainer').height();
    var containerWidth = $('.newcontainer').width();

    if(containerHeight > windowSize){
        var pixelToMuch = containerHeight - windowSize;
        var divFactor = pixelToMuch * 1.67;
        var newWidth = containerWidth - divFactor;
        $('.newcontainer').css('width',newWidth+'px');
    }

    $('#chatfenster').css('height', $('.newcontainer').height() - 260 +'px');
    $('#userlist').css('height', $('.newcontainer').height() - 350 +'px');
}, 100);
});
</script>

Upvotes: 0

Anders Marzi Tornblad
Anders Marzi Tornblad

Reputation: 19305

This part is very unreliable:

    while($(window).height() < $('.newcontainer').height()+30){
        $('.newcontainer').css('width', $('.newcontainer').width() - 10 +'px');
    }

You are checking the height of the window against the height of the first element found with a class of newcontainer. As long as the height of the window is smaller than that height plus 30 pixels, you set the width of all elements with class="newcontainer" to 10 less than the width of the first one of them.

If your condition is for one dimension (height) and the changes you make is to another dimension (width), the loop will run either never, or probably forever, or possibly randomly...

If there is a maximum height or a maximum width for your .newcontainer elements, you should instead calculate the allowed values for height or width and set them once, not in a loop! Something like this, maybe:

var windowHeight = $(window).height();
var maximumContainerHeight = windowHeight - 30;
$('.newcontainer').css('height', maximumContainerHeight + 'px');

However, I do not know if you want to set width or height, so I'm guessing.

If what you are doing is really setting the width of something, hoping that the layout engine will affect the height as a side-effect, you are going at this the very wrong way.

Another, better, solution is to use modern CSS solutions, like flexbox, to let the browser automatically handle all layout issues.

Upvotes: 2

Related Questions