[ Jocelyn Ireson-Paine's Home Page ]

Demonstrating the IFRAME tag

This page demonstrates two uses of the HTML IFRAME tag. I did it as a follow-on from the n-Category Café discussion about applets for nLab. My question is, until we get some applets written, could we include Web-based demos instead by embedding them in an IFRAME on an nLab page?

Both examples enclose versions of my interactive category theory demonstrations. The first one is big, and encloses a version of the form with several paragraphs of instructions. This is at www.j-paine.org/cgi-bin/webcats/product.php. The second is small, and encloses a version of the form with only the input fields and button. This is at www.j-paine.org/cgi-bin/webcats/product2.php. To me, it looks more suitable. We could have the instructions outside the IFRAME, on the nLab page. Pressing the button on the form inside the IFRAME will reload it, now showing a link pointing at the result of the demonstration (diagrams, etc.) Clicking this link opens a new browser tab or window, outside the IFRAME.

One problem is that we probably can't make the IFRAME resize itself so that it's the same size as the form inside it. Apparently, one can do this with JavaScript, but it only works if the page the frame is on is in the same domain as the page inside the frame.

The HTML source for the first looks like this:

<iframe src ="http://www.j-paine.org/cgi-bin/webcats/product.php" 
width="100%" height="300px">
Your browser does not support iframes.

This is the first frame:

This is the second, smaller, IFRAME, embedding the smaller version of my demo, just the input fields and button.