Skip to main content

iFrames

Image
By

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.

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:

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>

Comments

Post a Comment

Popular posts from this blog

basic html tables

By
Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table
2 comments
Read more

SME Relationship-Building: Tips of the Week

By
A couple of things came to mind during some recent SME conversations that I want to share. You may be already doing these things, but I think it helps to put them down here for all of us to think about and discuss... Given our mandate from Nancy Davis to consult to our SMEs on pedagogical issues related to learning outcomes, FOs, etc., it's likely that we'll run into SMEs who are not used to spelling out their instructional rationales and strategies as specifically as we're asking them to, even if they are at some level "good teachers." I try to motivate them by noting that the coursemap is now viewed as much of a ‘document of record’ as the Prospectus and Syllabus are – so it needs to show the rigor and clarity of outcomes of a 'premier' e-learning experience. And if a SME's LO/FO/assignment connections aren't as Bloom-worthy as they need to be, let's communicate to him or her that "my job is to help your expertise shine through"
Post a Comment
Read more

Encouraging student voice and video comments

By
Hey team, Won and I are at the Sloan-C Emerging Technology conference (#et4online), and I wanted to share some ideas with you all regarding the utilization of audio and video features in our discussion boards.  The presenter who inspired this post is Michelle Pacansky-Brock who wrote an ebook about VoiceThread. Her institution bought a site license so that students could make comments on VT via phone, ensuring that technology wouldn't be a barrier to student participation. My thoughts are that our online and most blended students have both computers with webcams/microphones and smartphones. I think that in Canvas we don't need to rely so much on VT to facilitate an audio/visual discussion, as these features are integrated into the learning platform. Michelle conducted research in her classes via surveys and discovered that when she as an instructor left voice and video comments, 97% of the students appreciated such comments. However, 75% of the students were unwilling
Post a Comment
Read more