Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Determine Height & Width of browser window in JavaScript

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 79
    Comment on it

    Hi All,

    We most of the time in web development get stuck with responsive designs, the best way to handle that now a days is to use Bootstrap classes which take cares of your site but that helps you to achieve responsiveness width wise.

    What if we want responsiveness height wise? What if we want to something on the whole window without scrollbars and that should fit in exactly the height and width of our browser?

    This Blog will help you achieve this using Javascript, we will determine the actual height and width of the browser at runtime.

    function getViewport() {
                var viewPortWidth;
                var viewPortHeight;
    
                // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
                if (typeof window.innerWidth != 'undefined') {
                    viewPortWidth = window.innerWidth,
                    viewPortHeight = window.innerHeight
                }
    
                    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
                else if (typeof document.documentElement != 'undefined'
                && typeof document.documentElement.clientWidth !=
                'undefined' && document.documentElement.clientWidth != 0) {
                    viewPortWidth = document.documentElement.clientWidth,
                    viewPortHeight = document.documentElement.clientHeight
                }
    
                    // older versions of IE
                else {
                    viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
                    viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
                }
                return [viewPortWidth, viewPortHeight];
            }
    

    The above function will give you the actual height and width of your window at runtime. Use it and then play with your controls dynamically. To use the above function you can simply:

    var width = getViewport()[0];
    var height = getViewport()[1];
    

    Happy Coding..........

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: