Starting again isn't always a bad thing

Since I (stupidly) wiped out the entire www.scoreresults.co.uk website last night, I've been coding like a monkey to get something back up and running.
The most important thing to do was get the league table widget working again. Not just working, but working across domains.

I'd already done this once, so knew it was possible.
I remembered having to do some half-arsed url hack to get the javascript to work across domains. I also remembered having a conversation with a few web-devs who said that iframes are often killed by modern browsers and/or ad-blocker add-ins, so my iframe approach wasn't ideal.
But until last night, at least it worked.

Starting again was quite daunting, particularly since I'd decided to leave iframes out of the widget and to rely solely on ajax for data transfer. Ajax suffers the same security restrictions and so, after asking Mr G for some help, I was pointed towards JSON.

This fantastic technology is also a bit of a hack, but at the very least, it allows cross-domain scripting, with very little effort.

By adapting an existing JSON script I found, I was also able to add in support for css/stylesheets. Not just any old sheets, but consider this:

You want to display a league table of results.
You use the fantastic widget and the results appear on your page.
But where is the style sheet? Should it be on your server, or the scoreresults.co.uk server? (since the actual table is hosting on the www.scoreresults.co.uk website).

Using JSON, the answer is - BOTH!
You can upload your own style sheet to your website/blog and give it any name you like. Below are a list of styles applied to the league table and clickable links (player profile/histories etc). So long as your style sheet includes these, the league table will be rendered exactly how you want it to so it blends in beautifully with your own website/blog. If you don't include css styles, the JSON script will find and replace the class tags with some default inline styling, so that the league table, by default, looks nice even if you can't be bothered with your own custom styling.

Here are some styles used by the widget, which turn the default black/grey tables red and, erm, pale red (ok, pink!) Have a play and try them out on your own site, to see what they do:

body,tr,td,input,select,textarea{font-family:arial,sans-serif;font-size:9pt;}

.results_table{border:1px solid black;width:600px;}
.results_header{background-color:red;color:white;text-align:center;}
.results_subheader{background-color:white;color:black;}
.results_line1{background-color:#FDDBDB;}
.results_line2{background-color:#E6BCBC;}
.results_player{width:360px;}
.results_played{text-align:right;width:30px;padding-right:8px;}

a.results_playerlink{text-decoration:none;color:red;}
a.results_playerlink:hover{text-decoration:underline;}
a.results_historylink{text-decoration:none;color:red;}
a.results_historylink:hover{text-decoration:underline;}

.results_profile{border:1px solid black;width:600px;}
.results_profileheader{background-color:red;color:white;text-align:center;}
.results_profilesubheader{background-color:white;color:black;}
.results_profilesummary_table{border:1px solid black;width:350px;}
.results_profilesummary_header{background-color:red;color:white;text-align:center;}
.results_profilesummary_subheader{background-color:white;color:black;}
.results_profilesummary_value{background-color:#E6BCBC;color:black;text-align:right;}

.results_history_table{border:1px solid black;width:600px;}
.results_history_header{background-color:red;color:white;text-align:center;}
.results_history_subheader{background-color:white;color:black;text-align:right;}

.results_score_won{text-align:right;font-weight:bold;padding-right:10px;}
.results_score_lost{text-align:right;font-weight:normal;padding-right:10px;}
.results_score_drawn{text-align:right;font-weight:normal;padding-right:10px;}