Changing a frame size on Safari/iPhone

By : Ulli

I like to bring an old intranet application on the iPhone. Included is a function to hide the menu area which is located in a frame:

<frameset id="myFrameSet" cols="150,*">
    <frame id="menuFrame" SRC="menu.aspx" />
    <frame id="mainFrame" SRC="main.aspx" />

The Menu contains an iconing hiding the Menu frame to a minimum. For that I use this JavaScript expression:

top.document.getElementById('myFrameSet').cols = "20,*";

This works in all current desktop browsers very well. But not in Safari on an iPhone or iPad. Debugging this it seems to change the "cols" attribute correctly, but the frame size remains where it was before.

Any suggestions on this? Or any different way to change a frame size client side?

By : Ulli


Frankly, I'd work on a solution that doesn't involve using frames at all. Frames are mostly deprecated in today's web because of accessibility troubles, and on mobile and small devices, these problems become even more prominent.

Consider converting your top frame into a top panel as a <div> on all pages, which can be positioned using the CSS position:fixed; top:0; to stick it to the top of the screen. You can then use JS to adjust the size of the div directly. Ask me if you want a concrete example.

This video can help you solving your question :)
By: admin