Browse Widgets

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

Illinois workNet Service Finder

The Illinois workNet Service Finder provides users with a search to locate offices where staff are able to assist them in finding resources for their job search, career preparation, and referrals for work support such as financial aid, child care, and much more. These partner locations include Illinois workNet Centers, Community Based Organizations, State Agencies, etc.

Use the link below to access the Service Finder Code Generator page. From here you can identify which types of locations you want to show on your website as well as the width and height.

Here are definitions of each partner type so you know which to select:

  • Partners Serving Individuals: These partners provide customers with employment and job training assistance.
  • Partner Serving Employers: These locations have a Business Services Team that assists local businesses and entrepreneurs.
  • All Disability Resources (WIPAs):Work Incentives Planning and Assistance (WIPA) Programs – These locations help individuals who receive SSI or SSDI and are interested in obtaining a job and can explain how working will affect their benefits.
  • Referrals and Special Programs: These locations provide users with referrals for work support services (like child care, food and nutrition assistance, housing and shelter, etc.) or provides a special program.

Sample:

Configure your own:

To configure this widget, please use the Service Finder Code Generator Page.

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. 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 difficult. 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: 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 Illinois workNet 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="//www.illinoisworknet.com/_layouts/15/1033/workNetV3/Scripts/frameResize.js?V1.1"></script>
<script type="text/javascript" src="//www.illinoisworknet.com/_layouts/15/1033/workNetV3/Scripts/postMessageHandler.js?V1.1"></script>

Step 3: Assign a resize class and id to your iframe

The resizing javascript requires that you do two things:

  1. Assign an id to your iframe that is unique on the page
  2. Add a CSS class so that the javascript knows this is an iframe that is allowed to be resized

Both of these items are really easy to do. To assign an id to your iframe, if it doesn't already have one, just add id="foo" to your opening iframe tag (don't really use "foo" for your id, that's just a placeholder name; use something meaningful). Thus:

<iframe src="https://apps.il-work-net.com/Rest/Of/Widget/Url" style="width:100%"></iframe>

becomes:

<iframe id="foo" src="https://apps.il-work-net.com/Rest/Of/Widget/Url" style="width:100%"></iframe>

If you already have a class attribute on your iframe, just add a space before its closing quote followed by resizeFrame. If you don't already have a class attribute, add one. Thus:

<iframe id="foo" src="https://apps.il-work-net.com/Rest/Of/Widget/Url" style="width:100%"></iframe>

becomes:

<iframe id="foo" class="resizeFrame" src="https://apps.il-work-net.com/Rest/Of/Widget/Url" style="width:100%"></iframe>