Goodies

Gadgets

Timespotting has been developed as a collection of Gadgets. A Gadget is a web-page HTML fragment that you can include on your own web-pages. This makes it possible to display information from Timespotting live on your team web pages. A live example can currently be viewed on the web pages of Tromsø Swimclub

Login Gadget

Makes it easy for your users to login to Timespotting

Parameters

theme:
The theme of the gadget
width:
width of gadget in pixels

HTML Code

Here is the HTML code you need to include on your web-pages.

<iframe src="http://timespotting.net/widgets/login" width="200" height="50" scrolling="no" frameborder="0" style="border:none;overflow:hidden;"></iframe>

Team Gadget

The Team Gadget shows information about a given team and its current members.

Example

Parameters

team:
name of the team to display
show_header:
Set to true or false if you want to show team header information or not.
width:
width of gadget in pixels

HTML Code

Here is the HTML code you need to include on your web-pages. You probably want to change the team parameter.

<iframe id="ts-team" src="http://timespotting.net/widgets/team?team=obexcode&width=670&show_header=false&elem=ts-team" width="680" height="550" scrolling="no" frameborder="0" style="border:none;overflow:hidden;"></iframe>

Ranking Gadget

The Ranking Gadget shows a sorted list of the training volume of each team member.

Example

Parameters

team:
name of the team to display ranking for
mode:
The mode can be total, season or monthly.
attr:
Can be hours, meters or exercises.

HTML Code

<iframe id="ts-ranking" src="http://timespotting.net/widgets/ranking?team=tsk-b&width=670&domain=www.tsk-swimclub.no&elem=ts-ranking" width="680" height="650" scrolling="no" frameborder="0" style="border:none;overflow:hidden;"></iframe>

Calendar Gadget

The calendar gadget shows a month, week or day view of all the events for a given team.

Example

Parameters

team:
name of the team to display week calendar for
week:
Set to a given week. If not set it will display the current week (optional).
month:
Set to a given month. If not set it will display the current month (optional).
year:
Set to a given year. If not set it will display the current year (optional).
theme:
The theme of the gadget

HTML Code

Here is the HTML code you need to include on your web-pages. You probably want to change the team parameter.

<iframe id="ts-cal" src="http://timespotting.net/widgets/calendar?team=obexcode&width=670&width=680" height="550" scrolling="no" frameborder="0" style="border:none;overflow:hidden;"></iframe>

Auto-resize

Some of the Gadgets may vary in height depending on how much information it needs to display. A team gadget with a lot of members takes more vertical space then a team with few members. Timespotting gadgets may resize themselves vertically. In order to do this you will need to include the following HTML once before the HTML for each gadget. You will also need to install the cross-domain helper file below.

<script type="text/javascript" src="http://timespotting.net/resize.js"></script>

Adding domain and elem parameters

In addition you will need to add the domain and elem parameters to the src attribute of each iframe. You will need to change the domain parameter to match the domain where the gadgets are being rendered. The elem parameter must match the id attribute of the <iframe>.

<iframe id="ts-team" src="http://timespotting.net/widgets/team?team=obexcode&width=670&show_header=false&domain=www.obexcode.com&elem=ts-team" width="680" height="420" scrolling="no" frameborder="0" style="border:none;overflow:hidden;"></iframe>

Cross domain helper file

This file needs to be installed as timespotting-helper.html at the root of your web server. Thus is needs to be available on the same domain as the pages where you want to display the Timespotting gadgets.

<!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">
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      //<![CDATA[

      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         var elem = getParam('elem');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(elem, height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
      //]]>
    </script> 
  </body> 
</html>

Troubleshooting

Some web publishing tools may strip away HTML code in your pages. This is because you don't want user submitted content to include unsafe HTML code such as <script /> tags. You also probably don't want users to display content from other web pages since you don´t know what they are going to display.

But including Timespotting Gadgets in your own web pages is safe if you either edit the HTML of the web-pages your self, of if you don't accept user submitted content. If you don't accept user submitted content, then it's safe to enable output of HTML code within your pages.

Theming

The following themes may be used for the theme parameter for the different gadgets. Go to http://jqueryui.com/themeroller/ to see the different themes in action.

start, blitzer, excite-bike, pepper-grinder, overcast, smoothness cupertino, flick, ui-lightness, south-street, vader, darkness, hot-sneaks, eggplant, black-tie, le-frog, ui-darkness, pepper-grinder, sunny, trontastic, humanity, redmond


Contact Term of Use Privacy Goodies