Why is this difference in calculations? JQuery

Question

i have this site:

link

There is a difference when you call function in document.ready calculation or resize function

There is a white border when the page loads calculation is not correct ...

$( document ).ready(function() {
    var windowsize = $(window).outerWidth();   
    var stanga= jQuery('#secondary').outerWidth();
    console.log('stanga:',stanga);
    var dreapta= jQuery('.right').outerWidth();
    console.log('dreapta:',dreapta);
    var contentwh=windowsize-stanga-dreapta;
    console.log('total:',contentwh);
    $('.navbar-fixed-top').css('width',contentwh);
    $('#main-content').css('width',contentwh);
    $('.continut').css('width',contentwh);

    $(window).on('resize',function(){
        var windowsize = $(window).outerWidth();   
        var stanga= jQuery('#secondary').outerWidth();
        console.log('stanga-resize:',stanga);
        var dreapta= jQuery('.right').outerWidth();
        console.log('dreapta-resize:',dreapta);
        var contentwh=windowsize-stanga-dreapta;
        console.log('total-resize:',contentwh);
        $('.navbar-fixed-top').css('width',contentwh);
        $('#main-content').css('width',contentwh);
        $('.continut').css('width',contentwh);
    }
});

Basically I used the same code and document.ready but also according to resize and unfortunately goes.

I did manual calculation on a 1366 px and ought to get a 669px width (good value) and I am 657px sites.

Does anyone know why this difference appears to 12px?

Thanks in advance!

Answer 1

-edit

The issue lies with the .right node max-width property disabling this causes the page to load the dimensions correctly however the algorithm with the node resizing is not being run correctly on document ready. The page loads correctly after re-sizing the page.

My best guess for this next issue is that the OP did not provide enough code to fully diagnose his issue; but, i am positive that the code on ready is not executing correctly. Run each variable in console and edit your question to provide the answers please.

Onload values:

window: 1903
custom2.js:89 
stanga: 260
custom2.js:91 
dreapta: 609
custom2.js:93 
total: 1034

After resize:

window: 1918
custom2.js:156 
stanga-resize: 260
custom2.js:158 
dreapta-resize: 614
custom2.js:160 
total-resize: 1044
custom2.js:154 
window: 1920
custom2.js:156 
stanga-resize: 260
custom2.js:158 
dreapta-resize: 614
custom2.js:160 
total-resize: 1046

Your resize event is being triggered twice, thats a problem of its own, but eventually it resolves the correct values.

Answer 2

You must be using Windows as OS aren't you?

The problem is that on load, you have a scrollbar.So when you are making you calculs, some element have a smaller width. Later, the scrollbar dispear and the white gap appear.

Quick fix would be to add overflow:hidden on the body then make your calculs. Afterward, you can remove the overflow hidden.

Note that the problem also appear when you resize the window below a certain height.

Answer 3

You might need to load the background image asynchronus, catch an event when loading is done, and then make calculations. Like so:

$(document).ready(function() {
  asyncLoad('.yourElement');
});

$(window).resize(function() {
  doCalculations('.yourElement');
});

var asyncLoad = function(elem) {
  var imgCSS = elem.css('background-image');
  var imgSrc = imgCSS.replace('url(', '').replace(')', '');
  $('<img/>').attr('src', imgSrc).load(function() {
    $(this).remove();
    elem.css('background-image', imgCSS);
    doCalculations(elem);
  });
});

var doCalculations = function(elem) {
  var windowsize = $(window).outerWidth();   
  var stanga = jQuery('#secondary').outerWidth();
  var dreapta = jQuery('.right').outerWidth();
  var contentwh = windowsize-stanga-dreapta;
  $('.navbar-fixed-top').css('width',contentwh);
  $('#main-content').css('width',contentwh);
  $('.continut').css('width',contentwh);
}

You might need to change the function to catch an array of images and do something when the last is done loading, but I hope the idea of 'Async loading' is well explained.

As explained HERE the function loads an image, and then it uses the same image as background-image for your element, and the browser is smart enough to not load that image twice.