javascript - Div is showing with delay of 2-3 seconds on a CMS after height change, Is there alternative -

i trying change element's height possible after page loads, it's third party cms on code running not sure done, have tried far,

var mywindow = mywindow || {};  mywindow.resize = function () {     //$(".container-box").height($("#contentrow").height() - 15);     setheight("container-box", $("#contentrow").height() - 15); };  window.onload = function () {     mywindow.resize();     //$("#container-root").show();     showstuff("container-root");     $(window).resize(mywindow.resize()); }  function showstuff(id) {     document.getelementbyid(id).style.display = 'block'; }  function setheight(classname, size) {     document.getelementsbyclassname(classname).height = size; } 

i'm going guess "slow" mean doesn't happen until div has been visible while.

the reason you're using load event, doesn't happen until very late in page load cycle.

if want change height possible, put script tag @ bottom of page , immediately, without waiting load.

if can't put script tag @ bottom of page (some cms's difficult), can use jquery's ready callback, happens sooner load:

    $(mywindow.resize); 

---

side note: resize handler hookup incorrect:

$(window).resize(mywindow.resize()); // remove these ----------------^^ 

with () there, you're calling mywindow.resize() , passing return value (undefined) $(window).resize(...), way foo(bar()) calls bar , passes return value foo.

---

also note setheight function won't work @ all. you're using getelementsbyclassname , assigning height property on back. collection of elements, not single element, , collection doesn't have height property.

the commented-out jquery line above call setheight work.