If you're using the Strathspey SCD Database, you may have found that »dance lists« are a pretty nifty feature. They can take much of the hassle out of planning lessons or devising and publishing programmes for social functions. And they're really easy to add to your web page as long as that web page is hosted on my.strathspey: A simple
(where »My Dancelist« is the name of your dance list in the database) will do the trick.
If your web site isn't on my.strathspey, however, things are a little bit more difficult. On your dance list's page in the database there is a tab that lets you copy HTML code for the dance list to paste into your own web site, but this is inconvenient. In particular, if the dance list changes after the fact, you need to manually fix your own site by re-copying the HTML code from the database.
In this post we present a new approach that lets you add a dance list to your own web site such that it will be fetched from the database when required. This means that any changes or updates to the dance list in the database will automatically be reflected on your own site. Bliss!
A complete sample document is available from the Strathspey site. You can use this to try the various steps shown here.
To add a dance list to your web page, first put an HTML »div« tag in the place where you would like the dance list to show up later. (The dance list will probably turn out to be a biggish HTML table, just so you know what you're getting yourself into.) Something like
(the first two lines will fetch jQuery from the official jQuery distribution network).
In case you're wondering why we don't offer a »minified« version of the jquery.danceList.js plugin: It's only 25 lines and so far we haven't bothered. If there is strong demand for it we'd be happy to sort this out.
If you've tried this with a simple HTML page you will probably have noticed that the dance list looks rather ugly. This is simple to fix using CSS, and we make available a sample style sheet for your convenience. You can use this by adding
<link rel="stylesheet" type="text/css" href="https://media-dev.strathspey.org/scddb/css/danceList.css" media="screen">
to the »head« section of your HTML file (where the other CSS files are mentioned), or feel free to copy it from our machine to yours and tweak it until you like the way the dance list looks.
The dance list is a fairly simple HTML table. The nesting of HTML elements looks like
div.dlist [Enclosing element] table.table.danceList thead tr th.danceNumber th.danceName th.danceType th.danceShape th.dancePublication tbody td td.danceNumber td.danceName td.danceType td.danceShape td.dancePublication tfoot
(the table footer is used for a link to the dance list's page in the Strathspey SCD database, and for the shortcut links to the crib and diagram sheets and the video page).
You can use the classes mentioned in this overview to re-style the dance list to your liking by making appropriate CSS definitions in a place where the browser can see them.
At this point this facility is still fairly experimental. If you use it, feel free to let me know how you get on, report bugs, or make suggestions for enhancements. Enjoy!