Your Pages - Setup IIS Site

Sample ASP Page, Inline-Frame League Select, VBScript

Return - Your Pages Setup

In this sample, you only need the programming in blue, optional lines are in green
(see more information about optional programming below).

For a quick-start, you can copy and paste this entire code to a file in your website named "SampleIframeLeagueSelect.asp", then view this page in your browser: http://(YourSite)/SampleIframeLeagueSelect.asp

Working sample: http://www.divebarsussex.com/SampleIframeLeagueSelect.asp
(displaying the sample code below)

If you would rather skip the sample page, just copy and paste the blue, and optionally green lines into your .asp page.

How it works, required programming.

The inline-frame will load content from the EasyLeagues.biz site using a simple URL (address) based on "http://www.easyleagues.biz/Content/SelectLeague.asp". To load the specific information for your site from the EasyLeagues.biz database, you will also need the information after the "?" (question mark) which are known as "Query String Parameters".

Query String Parameters.

The EasyLeagues.biz site needs to know what "EstablishmentNumber" to lookup in the database, so you will need "rES=3" (change number 3 to your EstablishmentNumber). You may be using EasyLeagues.biz for multiple sports at your site, so set the "SportNumber" with "rSP=1" (for SportNumber 1, which will be your first sport setup in EasyLeagues.biz). Set the "DisplayMode" with "rDM=1" (this will generate the XHTML 1.0 TRANSITIONAL compliant code for <iframe> content).

Remember to seperate each parameter with an "&" (ampersand).

You will note in the example that the method of setting the "EstablishmentNumber" and "SportNumber" values to a variable was used. Then the variable URLStr was constructed using these variables. If you wanted to skip the variable setup at the top of the page, you could hard-code the src attribute of the <iframe> element and alternative <a href= element to the required URL.

Optional programming, calculate <iframe> height.

Make sure the inline-frame is tall enough to display the EasyLeagues.biz content!

The EasyLeagues.biz information can vary greatly in height. The content height depends on: quantity of leagues, quantity of teams in each league, and quantity of weeks in each league. Unfortunately, most browsers do not allow the <iframe> to automatically change it's size to fit the content. There is a possible work-around to this problem detailed in: Cross Domain iframe Resizing. As the author notes, this method has several caveats and problems.

The optional coding in green is a fairly elegant solution to the challenge of calculating <iframe> height. Simply stated, you can have your site load a calculated style-sheet file from the EasyLeagues.biz size that has calculated an approximate correct height for the <iframe>. This becomes an easy solution by specifying in the style-sheet URL which page is being loaded, and how much vertical "space" to allow for each type of row in the table.

Looking at the example above, you will see the URL for the style-sheet was constructed and assigned to a variable named CalcFrameStr. In the "Query String Parameter" part of the URL, the "EstablishmentNumber" and "SportNumber" were assigned the same as in the URLStr variable. There are four additional parameters for specifying how the <iframe> height should be calculated:

• rPG=1, which page to calculate for (1=LeagueSelect, 2=LeagueSchedule, 3=LeagueStandings).
• rTH=28, how tall the TitleHeight rows are. (all heights are in pixels).
• rCH=30, the CellHeight rows in the rest of the table.
• rFF=10, a FudgeFactor value to be added.

If you don't care about dynamically calculating the height of the <iframe>, then you could alternatively hard-code the height in the <style> declaration. In the example above, you could change height: 200px; to a value large enough to never chop the bottom of the EasyLeagues.biz content.

If scroll-bars in the <iframe> element are acceptable, then in the example above in the <style> declaration, you can change overflow: hidden; to: overflow: scroll;.

Of course, the style definition can be placed in a style-sheet file of your choosing.

QuirksMode Note:

Most current programming recommendations discourage the use of attributes in the element tag, but if you don't include the frameborder="0" in the <iframe> tag then IE6+ seems to render the <iframe> with "sunken" border effect.

Sample Page Styles and Links

The styles and links in the sample pages will not work properly until you have copied the sample CSS files to your site and configured "Settings" in EasyLeagues.biz, but the content will display without problem.