Using iframes

You may want to include Universalis content directly in your web pages without making your users click on a link. This requires you to edit the HTML code of your web page, but it's not desperately complicated.

Here is an example. The explanation continues here.

Readings at Mass · Morning Prayer · Office of Readings · About Today

What you should be seeing

You should see a Universalis page inside a box. It will have a scroll bar on the right to let you scroll it up and down. If you are using an old version of Internet Explorer then you may also see a scroll bar at the bottom as well, which is a really irritating bug.

The page will start by showing the Office of Readings, but the links strung out above the top of the box show how you can get it to display different parts of Universalis.

Anyone who uses a really old or eccentric browser that doesn't support iframes, will see a message asking him to click to visit the Universalis site.

The HTML code that did this

You can use View > Page Source or View > Source in your browser to see the HTML code for this page, but here is the relevant part:

<a href="http://universalis.com">Please visit the Universalis web site</a>. </iframe>

You can read about the options on the iframe tag in any good HTML reference.

src identifies the page to be loaded into the frame. If you are making a site for a parish, remember to specify its local calendar: see How to Link to Us for details.

name gives this frame a name. It is only needed if you plan to use links on your page to change what the frame is displaying.

width="100%" tells the frame to take the whole of the available space horizontally.

height="100%" defines the frame's height. You'll have to refer to the documentation to see what "100%" actually means in this context, because the details are complicated.

scrolling="auto" tells the browser to decide for itself when scroll bars are needed: in practice, this means that they are put in if the Universalis content is bigger than the frame.

frameborder="3" was used to make a black line round the frame. You may well prefer to use frameborder="0".

<a>...</a>: The content inside the <iframe></iframe> tags is only displayed by browsers that can't understand iframes. We'd be surprised if there were still some around, but including a meaningful link here will do no harm.

Scroll bars in old versions of Internet Explorer

If you view this page in Internet Explorer 6 then you'll see that the frame has a horizontal as well as a vertical scroll bar. This is a bug. If you expect to get a number of visitors who are using this browser (which is now long out of date) then the only way to avoid this annoyance is to turn scrolling off and make the frame infinitely high: height=20000 scrolling="no".

Using links to change the contents of the frame

As we've shown in the example, you can put links in your page that the user can click to change what is seen inside the frame. These are ordinary links, but with the target attribute set to "universalis" - which was the name we gave to the iframe when we defined it. For more detail, view the source code of this page in your browser.

https:// sites

If your web site is accessed through https:// rather than http:// then web browsers will have trouble displaying the text inside the Universalis frame. This is because they consider your site to be a "secure site" (it may be a banking site, for all they know) and they consider the inclusion of "non-secure" material from another site to be hazardous.

The simple cure is to use https:// rather than http:// in your reference to universalis.com.

Problems with layout

The Universalis web page adapts itself to the width of the window it is in: the menu appears on the left if there is enough room for it and at the top otherwise. So if the layout isn’t the way you want, try adjusting the width of the iframe.