Working with Iframes

Iframes are essentially a way to put a window in your web page to another website or a different part of your website.

They can be a very helpful way to embed content from other locations in your website.

The rich text editor, CKEditor, used by FreeToastHost supports the incorporation of iframes in content. However, it is helpful to keep a few things in mind to get the best results:

---

1. The iframe dialog in the editor is pretty basic. Sometimes you can get better results by tinkering directly with the HTML source code (via clicking the Source button), if you are comfortable doing that.

2. Keep in mind that one of the biggest challenges in working effectively with iframes is that the contents can get shifted way out of view of the frame leaving your users very confused about how to access the content in the iframe. Alternatively, you may want what is initially shown to be content further down in the page you are showing in the iframe.

• One approach to deal with this is enabling scroll bars on the iframe so that your users have an intuitive way to reposition the iframe contents.
• Another, more technical approach to dealing with the problem, is to identify the ID of an element in your HTML content that you want to be located in the upper left corner of the iframe, and use that ID as a "bookmark" on the URL for the iframe.

For example, http://www.mycontent.com#top-left-id
If you do not know how to find the ID, then ask us here. Sometimes you can just use the Inspect Element option on the right click menu to get the ID for an element, if an ID exists for it. Also, a good element ID usually can be determined by examining the page HTML.

ID's are used extensively in FreeToastHost to identify page elements. Even though I am trying to cut down on their use in favor of better approaches, all the major page elements will continue to have IDs in the future. Typically IDs are used as bookmarks with links. However, this is a good example of how they can be used as bookmarks in other situations.

3. If you want to center your iframe, sometimes treating it as a text element and using the text centering icon works better than the middle attribute in the iframe dialog.

4. You may have to guess on the dimensions a bit. You can use percentages as a reasonable starting place. For example, setting the width as 100% should make the iframe width 100% of the available width in the content area of the page.

5. I recommend putting some explanatory text above the iframe to help users understand how to interact with it properly.

---

If anyone else has some good tips and tricks on how to effectively use iframes, feel free to reply to this thread.