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: 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

Canvas Conference: InstructureCon 2013

By
This last week I had the opportunity to attend Instructure's annual conference which focuses on it's flagship product, Canvas.  Founded in 2008, Instructure launched Canvas in 2011, and in that same year hosted its first annual conference.  The attendance at the first conference was meager, but in 2012 the attendance numbers grew to 600 attendees.  This year marked the third annual conference, with 1,200 attendees and a giant inflatable panda mascot flocking to the resorts of Park City.  Including staff and volunteers, some 1,500 people gathered to present and attend sessions.  After-hour festivities were themed based on the 1980's and included a conference carnival, visits from the Ghostbusters, a DeLorean (yes I had to google the spelling), and concerts from an 80's cover band and MC Hammer himself. The festivities were grand (and the 80's florescence was blinding), but the real value of the conference was obviously in the sessions.  Here are a few ...
Post a Comment
Read more

<hr> styling with CSS

By
Yea, I know that it has been a while since the last post. I've been busy lately! Anyway, this one will be very short and sweet and perhaps moderately useful every once in a while. We will discuss how to modify the properties of a horizontal rule <hr>. <hr>'s have been revered as rogue html elements for many years now. They don't behave well and often when styled they appear differently based on which browser you are using. So why bother even learning this, you ask? And I answer: I don't know. So let's get into it, shall we? In days past, you could actually style <hr>'s using pure html. You could type something like <hr size="5px" width="90%" align="center"> and it would actually render. But that is all deprecated now. As is becoming the trend with everything web-design related in terms of formatting, you'll want to switch over to CSS for that stuff. Let's begin exploring the possibiliti...
Post a Comment
Read more