CODEWITHSUNDEEP
javascripthtmlcontrolsheight
JMKintela
JMKintela

Reputation: 25

Javascript for Div height, make it faster

I have the Following script to control any element with a ID, in this case it's a div with a "wrapper" id:

 window.onload = window.onresize = function ResizeIFrame() {
                var div = document.getElementById("wrapper");
                var myWidth = 0, myHeight = 0;

                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth ;
                    myHeight = window.innerHeight - 90;

                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth ;
                    myHeight = document.documentElement.clientHeight - 90 ;
                } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight - 90;
                }
                div.style.width = myWidth + 'px';
                div.style.height = myHeight + 'px';
            }

In this web you could see how it's working: http://www.jmquintela.cl/?page_id=145 the problem is that the script waits for the page to be fully loaded to run the function and resize the window, or waits until the user resize the window manually. But the loading of the page could take too long some time and I want that the script execute itself before the window is fully loaded so the users can navigate in the mid-time. I try to call the function like this, but doesn't work:


    ResizeIFrame()

help please! bye!

Upvotes: 0

Views: 435

Answers (2)

RwwL
RwwL

Reputation: 3308

window.onload doesn't fire until all images and iframes have finished loading, which is why all the major JS libraries try to identify when the DOM is ready to manipulate, which often happens a lot sooner. If you're not using / don't want to use one of those libraries, there is a very lightweight cross-browser DOM-ready helper here: https://github.com/ded/domready#readme

Upvotes: 1

Naftali
Naftali

Reputation: 146310

Try this:

 function ResizeIFrame() {
            var div = document.getElementById("wrapper");
            var myWidth = 0, myHeight = 0;

            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth ;
                myHeight = window.innerHeight - 90;

            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth ;
                myHeight = document.documentElement.clientHeight - 90 ;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight - 90;
            }
            div.style.width = myWidth + 'px';
            div.style.height = myHeight + 'px';
        }  

window.onload = window.onresize =  ResizeIFrame;

//Then you can just do:
ResizeIFrame(); //whenever you desire

Upvotes: 0

Related Questions