Example 11c: Automatic (dynamic) resizing

Click here to see the first example
(And don't forget to re-size the window!)

For this example, we modify Example 11 to provide an external function that computes the desired size of the HAniS window whenever the user re-sizes the browser window.

In this example, as you will see, the HAniS "window" is configured to be to the right of a "navigation" panel, and vertically placed between a "header" and a "footer".

The JavaScript code sets an event listener on the "window resize event" that simply calls the function named "setwin" that is also part of this script and computes how much space is now available for HAniS.

Once this computation is done, it then calls HAniS.setWindowSize() to tell HAniS to resize its display.

The "setwin" function is defined separately so that HAniS can also call it after HAniS initializes (see the "setup" call below).

This script is defined in the <head> element as follows:

<script> function setwin() { var head = document.getElementById("head"); var nav = document.getElementById("nav"); var foot = document.getElementById("foot"); var newW = window.innerWidth - (nav.offsetLeft + nav.offsetWidth); var newH = window.innerHeight - foot.offsetHeight - head.offsetHeight; HAniS.setWindowSize(newW, newH); } window.addEventListener("resize", function() { setwin(); },false); </script>

In addition, the HAniS.setup() function call adds the optional 3rd parameter that is a callback to the setwin() method, defined above. This causes the initial window to be sized appropriately. The <body> element looks like this

<body style="overflow:hidden;" onload="HAniS.setup('hanist11t.txt','handiv', setwin)">

Click here to see the first example
..or click here to see the second example that uses the window_size=div parameter

Go To Front Page
Next Example
This webapp Copyright© 2014- by Tom Whittaker