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.
Subscribe to:
Post Comments (Atom)
The onResize event in the HTML body work fine, but is actually not a standard HTML feature. In order for the page to validate properly, I had to remove this event and replace it by windows.onresize. This appears not to work dynamically while the page is actually being resized - I have to find the bug. But it works for the very first size setting, so if the whole page is shown on different system with different screens (including a mobile phone), it works.
ReplyDeleteFigured out why the window.onresize did not work: it must be set in this way:
ReplyDeletewindow.onresize = function(){OnResize()};
where OnResize() is a function which takes care of resizing the image poperly.