CODEWITHSUNDEEP
javascript
lynvie
lynvie

Reputation: 1038

Javascript window.onresize doesn't seem to provide more than one update?

How can I get window.onresize to follow the user's multiple window resizes? I have the following Javascript code that prints out the window size. It only provides one update:

var someStuff = ['<p id="page"></p>'];
document.write(someStuff);
var widthWin = $(window).width();
document.write('<p>'+widthWin+'</p>');

window.onresize = function() {
    var element = document.getElementById("page");
    element.parentNode.removeChild(element);
    document.write(someStuff);
    widthWin = $(window).width();
    //widthWin = window.innerWidth;  //I tried this too
    document.write('<p>'+widthWin+'</p>');
}

Or perhaps I'm approaching this completely the wrong way?

Upvotes: 1

Views: 702

Answers (2)

John
John

Reputation: 13739

Save this as example.xhtml. If you don't learn to get away from innerHTML and document.write you will never be able to do application-level scripting.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>window.onresize event Test</title>
<script type="application/javascript">
//<![CDATA[
function example()
{
 //Screen Resolution
 var v1 = screen.width+'x'+screen.height;
 var s1 = document.getElementsByTagName('p')[0].getElementsByTagName('span')[0];

 if (s1.firstChild) {s1.firstChild.nodeValue = v1;}
 else
 {
  var t1 = document.createTextNode(v1);
  s1.appendChild(t1);
 }

 //Screen Available
 var v2 = screen.availWidth+'x'+screen.availHeight;
 var s2 = document.getElementsByTagName('p')[1].getElementsByTagName('span')[0];
 if (s2.firstChild) {s2.firstChild.nodeValue = v2;}
 else
 {
  var t2 = document.createTextNode(v2);
  s2.appendChild(t2);
 }

 //The body element using clientWidth
 var v3 = document.getElementsByTagName('body')[0].clientWidth+'x'+document.getElementsByTagName('body')[0].clientHeight;
 var s3 = document.getElementsByTagName('p')[2].getElementsByTagName('span')[0];
 if (s3.firstChild) {s3.firstChild.nodeValue = v3;}
 else
 {
  var t3 = document.createTextNode(v3);
  s3.appendChild(t3);
 }

 //The body element using .getClientRects()[0].width
 var v4 = document.getElementsByTagName('body')[0].getClientRects()[0].width+'x'+document.getElementsByTagName('body')[0].getClientRects()[0].height;
 var s4 = document.getElementsByTagName('p')[3].getElementsByTagName('span')[0];
 if (s4.firstChild) {s4.firstChild.nodeValue = v4;}
 else
 {
  var t4 = document.createTextNode(v4);
  s4.appendChild(t4);
 }
}

window.onresize = function()
{
 example();
}

window.onload = function()
{
 example();
}
//]]>
</script>
<style type="text/css">
body {background-color: #ddd; font-size: 20px; min-height: 100%; width: 100%;}
code {color: #22f;}
span {color: #f22; font-weight: bold;}
</style>
</head>
<body>

<h1>window.onresize event Test</h1>
<div>
 <p>Screen Resolution (screen.width / screen.height): <span> </span></p>
 <p>Screen Available (screen.availWidth / screen.availHeight): <span> </span></p>
 <p>The body Element (clientWidth / clientHeight): <span> </span></p>
 <p>The body Element (getClientRects()[0].width / getClientRects()[0].height): <span> </span></p>
</div>

<h2>Explenation</h2>
<div>
 <p>The <code>screen.width</code> and <code>screen.height</code> objects represent the <em>full screen resolution</em> of the monitor itself, this should not change.</p>

 <p>The <code>screen.availWidth</code> and <code>screen.availHeight</code> objects represent the <em>maximum browser window size</em> of the monitor itself, this should not change.</p>

 <p>The <code>clientWidth</code> and <code>clientHeight</code> objects represent the <em>dimentions of the body element</em> of the monitor itself.</p>

 <p>The <code>getClientRects()[0].width</code> and <code>getClientRects()[0].height</code> objects represent the <em>indicate the bounding rectangles</em> for the body element.</p>
</div>
</body>
</html>

Upvotes: 1

fmodos
fmodos

Reputation: 4568

The code document.write('<p>'+widthWin+'</p>'); replace the content of the html, it means that the window.onresize function is also removed.

If you want to replace the content of the page, you can do something like: document.body.innerHTML = ""

Anyway here is a code example removing this document.write, to test it just resize the window and you can see that it shows the new size:

 <body>
    this is my page test<br/>
    size: <span id="page"></span>

    <script>

    showWindowSize();

    window.onresize = function() {    
        showWindowSize();//show window size everytime window change          
    }

    function showWindowSize(){
        var element = document.getElementById("page");
        //get width size of the body
        var widthWin = window.document.body.clientWidth;
        page.innerHTML=widthWin;
    }
    </script>
</body>

Upvotes: 1

Related Questions