CODEWITHSUNDEEP
javascripthtmlcss
VagrantC
VagrantC

Reputation: 837

How to dynamically change contents of HTML page based on current window size

I have a simple web page meant as a table of contents to other pages. I have five images used as buttons to those other pages, but I need them to be displayed in a specific way. I have everything centered, and the background is static and doesn't move when you scroll, but the problem is with the buttons.

I would like them to be of a specific height based on the current height of the browser. I say current height because I need it to resize itself if the user resizes the window.

Also, and more importantly, I need this to prevent the table of contents from ever being larger than the height of the browser. I noticed that on different screen resolutions, the images are larger or smaller and can look terrible because of this.

So, for instance, I want the height of there to be the same amount of space between the bottom of the browser and the table of contents, and between the top of the browser and the table of contents, no matter how large the browser window is or the resolution of the user's screen.

I was thinking, through javascript, to grab the size of the window using something like window.innerHeightand set the height of the div encompassing the table of contents to this value.

This is what I have so far, but the script doesn't seem to do anything at all (it's my first time using javascript so I might very well be doing something stupid.):

<html>
<head>
    <style>
        html, body {
            height: 100%;
        }
        body {
            background-image: url(../images/background.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        #logo {
            width: 200px;
            margin-top: 15px;
        }
        .c1 {
            width: 300px;
            margin-top: 15px;  <!--margin between buttons-->
        }
    </style>
    <title>Some Title</title>
</head>
<body bgproperties="fixed">  <!--static background-->
    <div align="center" id="contents">  
        <div >
            <a href="http://somewebpage">
                <img id="logo" src="images/logo.png" alt="Logo">  <!--title button-->
            </a>
        </div>
        <div >
            <a href="http://somewebpage">
                <img class="c1" src="images/img1" alt="image 1">  <!--second button-->
            </a>
        </div>
        <div>
            <img class="c1" src="images/img2" alt="image 2">  <!--third button-->
        </div>
        <div >
            <img class="c1" src="images/img3" alt="image 3">  <!--fourth button-->
        </div>
        <div>
            <img class="c1" src="images/img4" alt="image 4">  <!--fifth button-->
        </div>
    </div>
    <script>
        var ht = window.innerHeight 
        || document.documentElement.clientHeight 
        || document.body.clientHeight;    <!--Get the height of the browser-->
        document.getElementById("contents").style["height"] = ht;  <--set height of table of contents-->
    </script>
</body>
</html>

Upvotes: 0

Views: 3462

Answers (4)

Tejas
Tejas

Reputation: 711

You can accomplish your goal two ways:

  • CSS Media Queries: CSS detects the size of the viewport (window, for lack of a better way of explaining it), and applies certain rules if the viewport matches the @media query. Below are some examples. Also, have a look at this CodePen for a better idea of how it works.

    /* If the browser width is anything less than 100px, */
@media (max-width: 100px){

    /* Set the height of an element */
    #my_element{
        height: 200px;
    }

}

/* If the browser width is 1000px or more, */
@media (min-width: 1000px){

    /* Set the height of an element */
    #my_element{
        height: 2000px;
    }

}

/* 

You can also do widths in ranges. 
If the width is between 600px and 800px,

*/
@media (min-width: 600px) and (max-width: 800px){

    /* Styles here */

}

/* This applies to height as well */
@media (max-height: 500px){

    /* Styles here */

}

  • Another way you can get it done is using percentage units: set the width of your buttons to 50%, and resize the browser window. They should now be flexible. Play around with percentages until your satisfied. Personally, I prefer media queries as they allow for more precision, but take your pick! Hope this was helpful!

Upvotes: 0

Saravanan
Saravanan

Reputation: 293

I agree with other answers in adjusting size, width and height etc. But after reading your question, i think responsive UI is what something you are looking for. Why not you try frameworks like BootStrap to help you. Instead of reinventing the wheel we can use some thing existing that is very easy to use. getbootstrap.com is the url and easy to implement. (I couldn't post it as comment as i have less reputation :))

Upvotes: 0

Bittu Shah
Bittu Shah

Reputation: 191

You can set this all by CSS but you can go with JavaScript also.

  • What you need is to set properties in Percentage(%); Such as:

    width: 90% (You can replace value as you need to show on screen)

  • For preventing to not go more than specified width then you can set max-width(Again in percentage)

  • You can set height as auto.

Upvotes: 1

Ivan Kuzmuk
Ivan Kuzmuk

Reputation: 1

    $(document).resize(function(){
        if(document.innerHeight > 350) {
            do something
        }
    });

Upvotes: 0

Related Questions