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

Labbett button set

By
Hi again, So the first thing that I am sharing here is a button set that Mark uses in his courses. These buttons are currently found on the shared drive, but additionally I uploaded them onto a photo sharing site (picasa). I created a document with the image code and will walk you through inserting the buttons/icons into the course and week headers. The google doc with the code is found on the shared drive: Z:\Icons & Logos\buttons\img style.doc. Click on the images below to enlarge them Here is the main screen. What we would like to do is put an icon by Week 1. Make sure you are in the Author window and in the HTML editor. Find the icon that you would like to include and copy the code associated with it (underneath the icon) Paste the code into the html where you would like the icon. Normally this will be in the header. Put the img code between the brackets (it could also be depending on the header style). If done right, The image will appear beside the header. ...
3 comments
Read more

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: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 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 definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: &nbsp;. That...
2 comments
Read more

Storytelling from SMEs

By
So I'm sure you've seen the recent emails about the upcoming CAE "Storytelling in Psychology" event given by Dr. Sandy Siegel. Sandy is one of our best SMEs (she’s in the MACC program) and she is a force in the classroom because of her storytelling skills. I think instructors’ personal/professional stories and vignettes have a lot of power to give a course relevance and heart, especially in a blended or online format with limited or no F2F interaction, and so I’ve been thinking about getting Sandy to audiorecord some brief stories for the courses she SMEs, either as an introductory “tone-setter” or as a springboard for a ‘what would you do?’-type assignment. Thing is, SMEs are rarely the sole instructors on their courses, and I’m thinking that whoever the other section instructors are may not want someone else’s voice (or video) built in, as for that term it is “their” course, not the SME’s. (In a past corporate job of mine we created situation-specific ‘Expert Vi...
1 comment
Read more