iFrames

This one will be short and sweet. I write this post intentionally on the eve of our unveiling of the new TCS websites (next week, yea!).

First of all, I want to credit Mark for passing along some javascript code about three months ago.

<BR COMMENT="Required Element"><BR COMMENT="Required Element"> <SCRIPT language=JavaScript> document.location.href="http://www.YOURURL.html"; </SCRIPT> If this page does not change within a few seconds, please click <A href="http://www.YOURURL.html" target="_self">here</A>

Of course, you would change YOURURL.html with the link to the page where you want the student directed. That code as written will show your url within the window in eCollege. Quick note, if you want the target page to open up in a new window (instead of within the eCollege frame), change target="_self" to target="_blank". If you want it to open in the same browser window, but in a new tab, use target="_new". Unfortunately, this code is now deprecated. This means that the page will not pass W3C XHTML 1.0 Strict validation,  *yawn*   but that is not really important to us.

Again, kudos to Mark for the javascript, but I am going to show you a more universal bit of code that is supported in pretty much all major browsers (IE, FF, Safari, Opera, Chrome) without relying on js. Savvy team members will have heard me talk about iFrames during our retreat as a way to help out Tracy with a page that linked to the POC library.

I like iFrames for showing external web content within eCollege because for one, it is more of a web design standard, and two it has the ability to incorporate a bit of basic html customizable. Here is a basic example of iFrame content:

of course the page does not look great in this blog post as we have very limited real estate to work with. Here is what that code looks like:

<iframe src="http://www.tcsedsystem.org/" width="100%" height="300"> <p>If this page does not change within a few seconds, please click <A href="http://www.tcsedsystem.org/" target="_self">here</A></p> </iframe>

Notice how I specified width and height. In this case, the width is relative to the frame in which the html resides (I coded it to span 100% of the available width). The height I specified in terms of pixels. I could choose to have width and height both be 100% (which is what I would do in eCollege), or I could have more control over the viewing area. Coding both height and width in percentages would mean that the iFrame would change size based on whether the browser is maximized or not. If the iFrame is set to width="100" height="100", then that would be 100x100 pixel box and would probably look the same regardless the monitor size.

By default, viewers are allowed to scroll, if such is necessary. In my example above, the size of the iFrame is very small, so I allowed default scrolling. If you don't want people to scroll, then you can specify that in the <iFrame> tag. You would specify any scrolling abilities in the tag as <iframe scrolling="value">, with the value being either
auto (scrollbars appear if they are needed)
no (scrollbars will never appear, even if they might be needed), or
yes (scrollbars always will appear, even if they are not needed).

Also by default, iFrames put a border around the page. If you would rather not have the border, specify it: <iframe frameborder="0">.

There are a few other things you can do to customize the iFrame, but this much is the gist of it. If you find yourself creating links to other pages, you might just consider putting the url in an iFrame.

<iframe src="link to page">
</iframe>