Auto-Sizing the IFRAME

If you're including Connect Daily in a page using an IFRAME, you may want to auto-size the IFRAME so that the height of the IFRAME adjusts to the content.

These instructions assume you're using the hosted service. If you're self-hosting the software, skip the steps for creating a virtual host name and remove the lines for "document.domain" from the Javascript code.

Create a virtual host name in your domain.

For example, if your web site is www.yourdomain.org and your calendar is yourdomain.mhsoftware.com, create a CNAME entry for "calendar.yourdomain.org" that points to yourdomain.mhsoftware.com. This is critical.

After you create the virtual host name, go to System | Configuration | System and edit the value for URL base to be "calendar.yourdomain.org".

Test the web page by opening the URL: "calendar.yourdomain.org" in a browser.

If it doesn't work, contact MH Software, Inc.

See Also: Creating a CNAME or Alias for Your Calendar

Generate the IFRAME Tag

Generate the IFRAME tag and insert it into your containing page. The simplest way to do this is to use the Web Site Integration Wizard. Once the IFRAME tag is generated, copy and paste it into the containing page.

Edit userHeader.html

Edit the custom header used by your calendar. Normally, this is /custom/en/userHeader.html. Add the following script to your page. Change the domain name from "yourdomain.org" to the name of your domain.

<script SRC="/scripts/formchange.js" type="text/javascript"></script>

<script>

document.domain="yourdomain.org";

attachEventListener(document.body,"load",loadfunc,true);

function loadfunc(){

	parent.alertsize(document.body.scrollHeight);

}

</script>

Add Javascript to Containing Page

Directly above the IFRAME tags in the containing page, insert the following Javascript. Change the domain name from "yourdomain.org" to the name of your domain.

<script>

document.domain="yourdomain.org";

function alertsize(pixels){

    pixels+=32;

    document.getElementById('calendarframe').style.height=pixels+"px";

}

</script>

Troubleshooting

If it doesn't work, check the following:

1. Check the document.domain line for the correct domain name in userHeader.html.
2. Check the document.domain line for the correct domain name in the containing page.
3. Check the ID attribute of the IFRAME tag. If it's not "calendarframe", edit the Javascript in the containing page and change "calendarframe" to the correct ID of the IFRAME tag. If there is no ID attribute on the IFRAME tag, add one.
4. Check the source of the IFRAME. Ensure that it's your virtual host name. E.G. "calendar.yourdomain.org".