Add a page size controller

Asked

Viewed 24 times

0

I wonder how I can make this page size controller when resizing it to be dynamic like in this example of w3schools. I want to add this to my site and credit whatever with Javascript I can leave this dynamic information by clicking and dragging more I could not find anything.

javascript html css
  • 1

    What makes this example work is the media query, more specifically the @media only screen and (max-width: 500px) { that receives the css to use when the page is less than 500 pixels wide. Just enter the css for this case. Or change the number to another dimension you want

1 answer

0


Taken directly from W3schools, the event onresize no body runs whenever the screen is increased or decreased by calling the myFunction() that updates the DOM by displaying the width and height of the screen.

<html>
<body onresize="myFunction()">

<p>Try to resize the browser window to display the windows height and width.</p>

<p id="demo"></p>

<p><strong>Note:</strong> this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</p>

<script>

function myFunction() {
    var w = window.outerWidth;
    var h = window.outerHeight;
    var txt = "Window size: width=" + w + ", height=" + h;
    document.getElementById("demo").innerHTML = txt;
}
myFunction();
</script>

</body>
</html>

  • 1

    Perfect!!! was that. Thank you very much

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.