Browse Widgets

Guidance Event Calendar (Career Clusters) Event Calendar (Illinois workNet LWIA) Illinois workNet Article Viewer Illinois workNet Job Finder Illinois workNet Pathways Career Explorer Illinois workNet Related Resources Illinois workNet Service Finder Illinois workNet Success Stories Illinois workNet WIOA Training Program Search WIOA ePolicy IOER Basic Search IOER Full Search IOER Learning List Explorer IOER Library/Collections IOER Standards Browser

Guidance

This is the page for embeddable widgets shared by both Illinois workNet and Illinois Open Education Resources. Use the menu to the left to navigate between widgets. Each page will provide you with an overview and either a code generator, or a link to the code generator page. If you need any assistance please use the Contact Us link in the footer of this website.

Styling Tips

This widget is embedded on your page as an iframe. Iframes typically default to 300 pixels wide by 200 pixels high. This is quite small. In addition, the content shown by the widget is not of a fixed height. The following tips will help you work through these problems. Don't worry, it's not a difficult, scary problem. It's really easy.

Fixed Size Widgets

As mentioned above, iframes typically default to 300 pixels wide by 200 pixels high, which is pretty small. Fortunately, some CSS styles, whether inline, in a style sheet on the page, or as an inline style, will enable you to have a fixed size widget.

Suppose you want to embed the widget in the same column on your page that your main content is normally in, have it be 100% of the width of the column, and 500 pixels high. You can do that as an inline style on your iframe tag: Add width:100%; height:500px; to the existing style attribute on your iframe tag. If you don't already have a style attribute on your iframe, add one. It will look like this: style="width:100%; height=500px;"

Borders

Most iframes have a default border. If you'd like a 1 pixel wide black border around the iframe, you can also do that as an inline style on your iframe tag: Add border:1px solid black; to your existing style attribute on your iframe tag. If you don't already have a style attribute on your iframe, add one. It will look like this: style="border:1px solid black;".

For no borders, change the above styles to read border:none; instead of border:1px solid black;.

Variable Height Widgets (Getting rid of Scroll Bars on the Right Side of an iframe)

If you're reading this, you've probably noticed that there's a scroll bar on the right hand side of the widget, and you don't want it there. You can make the height of the iframe variable by including one or two <script></script> tags on your page. Note that this will not get rid of scroll bars on the bottom of your iframe, but will get rid of the ones on the right side. To get rid of scroll bars on the bottom of your iframe, you'll have to make your iframe wider.

Step 1: Include the jQuery library

Resizing the iframe using our code requires the use of the jQuery library. If you're already using jQuery, you can skip this step and proceed with step 2.

We recommend always using the latest version of jQuery, either from the Official jQuery site or from Google's hosted libraries. For example, to include the jQuery 1.12.0 library, add this script tag to your page:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Step 2: Include the IOER iframe resizing code on your page

To enable resizing, add the following above or below the widget's iframe tags:
<script type="text/javascript" src="//ioer.ilsharedlearning.org/scripts/widgets/postmessagereceiver.js"></script>

Content Management Systems

Some content management systems, such as Joomla! and WordPress, do not allow iframe or script tags in the editor. Both Joomla! and WordPress prohibit iframe and script tags by default. There are ways around this, however.

You can allow the use of these prohibited tags in Joomla! by altering the settings on your default editor. This is doable for both TinyMCE and JCE, but is beyond the scope of this article. For assistance with your Joomla! site, please contact your webmaster or website administrator. If you're the administrator, this thread on permitting use of iframes in Joomla! will get you started.

You can allow the use of the prohibited iframe and script tags in WordPress by installing a couple shortcode plugins, one for iframe and the other for script. Again, doing so is beyond the scope of this article. For assistance with your WordPress site, please contact your webmaster or website administrator. If you're the administrator, we recommend searching the WordPress Plugin Directory for appropriate plugins.

If you're using another content management system, and cannot use iframe or script tags on your site, please contact your webmaster or website administrator for assistance.