Tuesday, January 4, 2011

Dynamically changing Frameset dimensions

There may be a need to dynamically change the dimensions of an HTML Frameset in the DigitalSignage system.

If we have a frameset defined:


<frameset id="mainFrame" border="0" rows="25%,70%,*">
<frame border="0" noresize="noresize" src="header.html" />
<frame src="" scrolling="no" frameborder="0" />
<frameset border="0" cols="25%,50%,*">
<frame src="footer1.html" scrolling="no" frameborder="0" />
<frame src="footer2.html" scrolling="no" frameborder="0" />
<frame src="weather.aspx" scrolling="no" frameborder="0" />
</frameset>
</frameset>

Below is an example of javascript that varies the dimensions of the rows:

parent.document.getElementById('mainFrame').rows='0%,95%,*';

With this code we're hiding the top row by setting the height to 0%.