Your Pages - Setup PHP Site
Sample PHP 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.php", then view this page in your browser: http://(YourSite)/SampleIframeLeagueSelect.php
Working sample:
http://php.divebarsussex.com/SampleIframeLeagueSelect.php
(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 .php page.
// Sample League Select file, using inline-frame, for PHP
// ------------- These top 3 settings will propogate to the other pages
$xES = 3; // Master define EstablishmentNo
$xSP = 1; // Master define this SportNo
$xDM = 1; // Master define the DisplayMode (0=InlineServerFetch,1=iframe)
$URLStr = htmlspecialchars('http://www.easyleagues.biz/Content/SelectLeague.asp?'
. 'rES=' . $xES . '&rSP=' . $xSP . '&rDM=' . $xDM); ?>
<?php
$calcFrameStr = 'http://www.easyleagues.biz/Content/CalcParentFrame.asp?' . 'rES=' . $xES
. '&rSP=' . $xSP . '&rPG=1&rTH=28&rCH=30&rFF=10'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>iframe Sample - League Select</title>
<style type="text/css"><!--
.easyLeaguesFrame {width: 90%; height: 200px; margin: 5px 5%;
border: 1px solid #c0c0c0; overflow: hidden;} --></style>
<link href="<?php echo $calcFrameStr; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width: 800px; height: 100px; border: 1px solid #000000;">
Your page header/banner here.
</div>
<div style="width: 800px; border: 1px solid #000000;">
<p>Your personalized page-body content here, before the League Select content.</p>
<!-- The first part of your page programming before here -->
<!-- Begin needed programming -->
<iframe src="<?php echo $URLStr; ?>" frameborder="0" class="easyLeaguesFrame">
Your browser does not support iframes.<br />
View <a href="<?php echo $URLStr; ?>" target="_blank">Simple Page</a>
in a new window.
</iframe>
<!-- End needed programming -->
<!-- The remainder of your page programming after here -->
</div>
<div style="width: 800px; height: 100px; border: 1px solid #000000;">
Your page footer here.
</div>
</body>
</html>
The above sample demonstrates a method for assigning the values needed further down in the page. For those site designers desiring a more condensed version of required code, visit the Schedule information page for an iframe example.
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.
