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

What's all this talk about APIs?

By
These application programming interfaces (APIs) are all the rage these days.  We hear about them in online commerce, social media, and now they are flooding the world of education and online learning.  So what are they exactly? An API is a way for websites, programmers, and applications to communicate with each other, exchanging information.  If I have a database with information that I would like to disseminate then I can develop an API and make that accessible to the world.  External developers can then create APIs with the purpose of communicating with my  API, and thus extract the information that I am making public.  It's similar to the notion of "my people will contact your people and we'll make this happen".  Only the people in mention is actually a software-to-software exchange. Why APIs are important APIs are a way to access information or databases which would otherwise be inaccessible.  For example, my database might be protected ...
Post a Comment
Read more

CSS Buttons (part 1)

By
This is part 1 of what I wanted to get through during the Lunch and Learn this week. I decided to start from scratch so that everyone can follow along from the beginning, and I tried to be as thorough and as brief as possible. This is really kind of an intermediate tutorial, but you should be able to follow along without any problems and do the steps to come up with a good product. *note: you'll want to blow this up to full screen and watch in 720p HD
Post a Comment
Read more