Responsive IFrame

Summary

OIS apps that are used by the public can be put in an iframe so they are branded and each app doesn't have it's own copy of the template that needs to be maintained. The simplest implementation is to use a static iframe, like the Sick Leave Estimator. However, if the application is interactive and the height changes as you use it, the responsive iframe is probably a better option.Insert an iframe using pym.js which allows the iframe to be dynamically sized and change size as the user interacts with the application. Students Statistics is using this method.

To be loaded in the HTTPS website, the application must also be HTTPS.

Zuse Implementation

In Zuse, add the [iframe] shortcode to the page on which you would like to embed the application. This will load the pym.min.js library onto the page, and add a <div> in which the pym-enabled iframe is dynamically loaded.

Required Attribute

src

Specify the URL of the application (child page).

Example

[iframe scr="https://pollux.uwsa.edu/PRODUCTION/ssbreports/"]

Application (Child) Implementation

Initialize

The application must include pym.min.js, and initialize pym. This needs to go at the bottom of your page.

<script src="assets/pym.min.js"></script>
<script>
    var pymChild = null;
    var pymChild = new pym.Child();
</script>

Adjust Height

Whenever the height might adjust due to JavaScript, you can add pymChild.sendHeight();

See the quiz example on the pym.js site.

Styling Application

To maintain consistency, it is important that the applications are styled similarly to the rest of the UWSA website.

A good place to start is using the Production css file from the UI Toolkit. You may need to add some markup so that the correct styles are applied to the application's elements. See more details on the Content page of the UI Toolkit. If the application has unique elements, the Web Team is happy to work with you to design the approriate styles.

Troubleshooting

Can't see anything

The float:left causes problems when pym is trying to calculate the height of the page. Try adding the following to your container div: