Automatic Resizing

The PHP and JavaScript code of the image display component of this site has been modified to adapt itself automatically to the screen size. This can be seen on the main page where the very latest public captured image is shown: the image display part is using an IFRAME, and the size of this IFRAME is controlled by the size of the browser window. This IFRAME has a minimum width and a maximum width. The IFRAME is nested within a floating DIV; this allows the IFRAME to float under the sidebar in case the available browser space becomes too small for a horizontal display.

Within the IFRAME, a PHP script is launched which displays an image, filling the complete available width. This means, it is not necessary to specify this width anymore; the image will automatically be shown properly within the IFRAME.

The height of the IFRAME is partially controlled automatically: it is set by the enclosing parent which writes the IFRAME code, also based on the width. However, it is currently not adapting itself to the actual height of the IFRAME content; this means that the content (mostly determined by the image caption and description) may be further down, requiring the automatic display of a scrollbar in case the IFRAME is set too short.

Several elements on this main page are arranged as floating DIVs, allowing an automatic vertical stacking in case of a small display, for example on a mobile phone. I have tried this out on the MS Mobile Internet Explorer on Windows Mobile 6, and it works fine.