Information

Embedded Content

The notes, and link (URL) generator below, will help you to choose which are the most suitable pages to include in club and hockey association websites. Whilst any page can be used some pages are specifically designed for the purpose. The reader is assumed to have some knowledge of website design, including use of javascript.

The pages are designed to be lightweight and contain only minimal content and images - no background images, no menus, no footers and no additional navigation links. They are embedded into your own website through the use of an iframe - this maintains browser security controls between your web content and SHL content.

Content includes the familiar fixtures, results and scorers, and an additional table only format. The content will automatically adapt to the available iframe width - single column for fixtures and reduced number of columns for tables.

The content can be selected by League, by Team and by Club, and for narrow columns an 'Aside Format' can be specified reducing the content shown. Secure HTTP is available for all content to avoid browser security warnings when embedding non secure content in a secure page.

Once the content is loaded in the iframe and the size (depth) is known the content will communicate with the parent of the iframe using the window.postMessage function. The postMessage (JSON.parse), or another method (window.onload), can be used to trigger a resize of the iframe to that of its content.

Implementation

A minimal implementation is to just include an iframe, either pre-sized to accomodate the desired content or with scroll bars enabled. A more integrated and seamless approach is to use a borderless iframe and resize the iframe on receipt of the window.postMessage. This provides a safe cross domain method that most modern browsers support.

The following is an example of the javascript required to handle a window.postMessage event, the iframe markup and the contents of the postMessage object using JSON.parse.

Javascript window.postMessage Event Handler
if (window.addEventListener) {
	window.addEventListener('message', function(e) {
        SHL.Iframe.resize(event);
	}, false);
}
else if (window.attachEvent) {
	window.attachEvent('onmessage', function(e) {
        SHL.Iframe.resize(event);
	});
}
(function (window, undefined) {
    window.SHL = window.SHL || {};
    SHL.Iframe = {
        resize: function(event) {
			if (event.origin === 'http://www.south-league.com') {
				var data = JSON.parse(event.data), id = data['iframe'] || data['id'];
				var ifr = document.getElementById(id);
				if (ifr && data['height']) {
					ifr.style.height = data['height'] + 'px';
				}
            }
		}
    }
})(this);
                    
HTML iframe Tag
<iframe src="http://www.south-league.com/reports/result/team/omta1"
        id="result-team-omta1" allowtransparency="true" frameborder="0" frameborder="no"
        marginheight="0" marginwidth="0" scrolling="no" width="100%"></iframe>
                    
window.postMessage JSON.parse(event.data)
Object {
        iframe: "result-team-omta1", id: "result-team-omta1", team: 412, wapid: "omta1",
        height: 798, width: 600, season: "2016-2017"
}
                    

By League

The default content is Results by League, select the required League ID (6-8 character alphanumeric) from the drop down list in the Link Generator below. The list is the current season's League IDs - most will be the same for previous seasons, but for a comprehensive list of IDs by season refer to the League Structure page.

The choice of Content is as follows:

  • Fixtures - full list of fixtures (past & future) for League
  • Scorers - full list of goal scorers (if applicable) for League
  • Table - current League table
  • Results - combination of above, League table, top goal scorers and 1 or 2 weeks of latest fixtures with Results.

By Team

Select by Team to restrict fixtures, goal scorers and results to one team. Team IDs are available on the Contacts page.

The choice of Content is as follows:

  • Fixtures - full list of fixtures (past & future) for Team
  • Scorers - full list of goal scorers (if applicable) for Team
  • Table - current League table
  • Results - combination of above, League table, top goal scorers and up to 5 weeks of latest fixtures with Results.

By Club

Select by Club to combine fixtures, goal scorers and results for all teams. Club IDs are any valid Team ID (or the first 4 characters) or the club name in full from the Contacts page.

The choice of Content is as follows:

  • Fixtures - full list of fixtures (past & future) for Club
  • Scorers - full list of goal scorers (if applicable) for Club
  • Table - League table statistics for each Club Team
  • Results - combination of above, table, top goal scorers and 1 or 2 weeks of latest fixtures with Results.

Aside Format

The Aside option is a reduced content output that is suitable for narrow columns or placemment where abbreviated information using less page space is required.

This option can be combined with all the above with the follow effects on Content:

  • Fixtures - abbreviated to 1 week of open fixtures for League or Club, or up to 5 weeks for Team
  • Scorers - top goal scorers (if applicable) for League, Team or Club
  • Table - current League table for League or Team or League table statistics for each Club Team
  • Results - 1 week of latest fixtures with Results for League or Club, or up to 5 weeks for Team.

The example (right) is a combination of 4 links and a single iframe giving the effect of a tabbed menu.

Wordpress

Wordpress

Including an iframe in a Wordpress generated pages requires the installation of a Wordpress plugin - Wordpress restricts the use of HTML tags allowed with text body of posts and pages.

There are many available on the Wordpress Plugins site https://en-gb.wordpress.org/plugins/ along with full instructions to install and operate on your Wordpress site.

These will be generic in nature and use methods, other than the window.postMessage described above, to resize the iframe after loading content - some are more successful than others.

For the more experienced Wordpress developer a plugin is available for download from the South Hockey League - this is in development but is configurable to the specific needs of generating an iframe with the required attributes. It supports window.postMessage events for cross domain messaging.

The iframe postMessage plugin uses a shortcode of "iframe" which may conflict with other Wordpress iframe plugins using the same shortcode. Download and use the Wordpress option to install from your local pc folder.