Sie können die Seiten von my.raceresult.com mit einfachem Javascript in Ihre eigene Website einbinden. Um den Quellcode dafür zu finden, öffnen Sie eine Ihrer Veranstaltungsdateien und navigieren Sie zu my.raceresult.com > Abschnitt Website-Integration.
Sie können entweder den HTML-Code verwenden, der Javascript nutzt, oder das Wordpress-Plugin, das allerdings sehr viel eingeschränkter ist.
Dynamische Listen
Da jede eingebettete Seite zwei Schlüsselvariablen (Ereignis-ID und Seite) verwendet, ist es möglich, eine einzige Seite zu erstellen, um mehrere Ereignisse oder verschiedene Seiten zu behandeln. Sie können dies tun, indem Sie eine Variable über die URL der Webseite an das eingebettete Javascript übergeben.
Hier sehen Sie, dass die Variable eventid von der URL an die Funktion übergeben wird, um die in der URL angegebene Ereignis-ID zu laden.
<div id="divRRPublish" class="RRPublish"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=en"></script>
<script type="text/javascript">
<!--
var rrp=new RRPublish(document.getElementById("divRRPublish"), eventid, "results");
rrp.ShowTimerLogo=true;
rrp.ShowInfoText=false;
-->
</script>
<style>
/* Add custom CSS here or elsewhere to change the design */
</style>
Verschiedene Sprachen einbetten
Standardmäßig enthält der Quellcode den Sprachparameter der aktuell verwendeten Sprache. Sie können die Sprache für Listen und Anmeldeformulare nach Ihren Bedürfnissen anpassen.
Standard-Browsersprache
Wenn Sie den lang Parameter aus der URL entfernen, wird standardmäßig die Browsersprache verwendet. Dieses Verhalten entspricht dem Verhalten auf my.raceresult.com.
Fest hinterlegte Sprache
Sie können für jede Sprache eine eigene Webseite erstellen. Hier sehen Sie, dass die Sprache als Englisch definiert ist, indem Sie die Variable lang auf en setzen.
<div id="divRRPublish" class="RRPublish"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=en"></script>
<script type="text/javascript">
<!--
var rrp=new RRPublish(document.getElementById("divRRPublish"), 123456, "results");
rrp.ShowTimerLogo=true;
rrp.ShowInfoText=false;
-->
</script>
<style>
/* Add custom CSS here or elsewhere to change the design */
</style>
Alternativ kann die Sprachvariable dynamisch über einen Parameter abgefragt werden, das erfordert allerdings zusätzliche Javascript- oder PHP-Programmierung.
Weitere Informationen darüber, wie mehrere Sprachen in RACE RESULT 12 funktionieren, und eine Liste aller unterstützten Sprachcodes finden Sie im Artikel Mehrsprachige Online-Registrierung.
Mehrere Listen auf der gleichen Seite eingliedern
Wenn Sie mehrere Listen auf einer einzigen Seite einbetten, müssen Sie für jede einzelne Liste eine eindeutige div-id definieren. Standardmäßig verwendet der Quellcode für die Einbettung von Teilnehmer-, Ergebnis- und Live-Seiten die gleiche div id.
Dieser Teil des Codes zeigt das div an, das die geladene Seite enthält. Die id divRRPublish wird für alle drei Listen gleich sein.
<div id="divRRPublish" class="RRPublish"></div>
In der HTML-Sprache müssen die IDs eindeutig sein. Wenn Sie mehrere Listen auf einer einzigen Seite einbetten wollen, muss diese ID geändert werden. Sie könnten zum Beispiel eine Erweiterung an den Namen anhängen, etwa so
<div id="divRRPublish_results" class="RRPublish"></div> <script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=en"></script> <script type="text/javascript"> <!-- var rrp=new RRPublish(document.getElementById("divRRPublish_results"), 123456, "results"); rrp.ShowTimerLogo=true; rrp.ShowInfoText=false; --> </script> <style> /* Add custom CSS here or elsewhere to change the design */ </style>
In diesem Beispiel wird divRRPublish in divRRPublish_results geändert. Dadurch wird eine eindeutige ID erstellt, die von den anderen Listen nicht verwendet wird. Beachten Sie, dass die Variable an zwei Stellen geändert wird, wie im Beispiel fett dargestellt.
Liste der Events eingliedern
Wenn Sie eine Liste aller Veranstaltungen in Ihrem RACE RESULT-Konto einbetten möchten, können Sie dies tun, indem Sie den Quellcode der Veranstaltungsliste in Ihre Website einbetten.
<link rel="stylesheet" type="text/css" href="https://my.raceresult.com/RREvents/style.css">
<div class="EventTable" id="tEventTable">
<div><div> </div><div> </div><div>City</div><div>Event</div><div>Date</div></div>
</div>
<script type="text/javascript" src="https://my.raceresult.com/RREvents/RREvents.js"></script>
<script type="text/javascript">
<!--
var options= { dateFormat : 'mm/dd/yyyy' };
var rre=new RREvents(document.getElementById("tEventTable"), null, 'en', options);
rre.server="https://my.raceresult.com";
rre.user=11111;
//rre.year=2017;
//rre.group=1234;
//rre.eventlink="http://your.webseite.com/events/show?eventid=[eventid]";
//rre.openInNewWindow=false;
rre.loadEvents(function(resultSize) { return true; });
-->
</script>
Dieser Quellcode enthält mehrere Variablen, mit denen Sie die angezeigten Ereignisse anpassen können.
- rre.user - Hier wird das RACE RESULT-Benutzerkonto angegeben, von dem die Ereignisse bezogen werden sollen
- rre.year - Damit werden die Ereignisse gefiltert, so dass nur Ereignisse aus dem angegebenen Jahr angezeigt werden
- rre.group - Damit wird die Liste so gefiltert, dass nur Ereignisse der angegebenen Gruppe angezeigt werden.
- rre.eventlink - Wenn Sie Ergebnisse auf Ihrer eigenen Website eingebettet haben, können Sie diese Variable verwenden, um direkt auf diese Seite zu verlinken. Beachten Sie den URL-Parameter eventid am Ende der URL. Sie können dies mit einer dynamischen Ergebniss-Liste verwenden, um Ergebnisse von jeder beliebigen Ereignis-ID abzurufen.
- rre.openInNewWindow - Wenn diese Option auf true gesetzt ist, wird ein Ereignis in einem neuen Fenster geöffnet, wenn es ausgewählt wird.
Alle Variablen, die das Zeichen // vor sich haben, werden auskommentiert. Das bedeutet, dass sie nicht geladen werden.
Anpassen mit CSS
Sie können Ihre eingebetteten Ergebnisse mit CSS anpassen. So können Sie von der Schriftgröße bis zur Farbe der Schaltflächen alles ändern. Hier gibt es eine Vielzahl von Optionen. In diesem Abschnitt wird ein Beispiel für eine grundlegende Änderung gegeben und erklärt, wie Sie ein Element finden, um eine kleine Änderung vorzunehmen. Beachten Sie, dass jeder CSS-Code, der im Abschnitt Online-Registrierung > Grundeinstellungen hinzugefügt wird, auch hier angewendet wird.
Grundlegende CSS-Bearbeitung
Ein einfaches Beispiel für eine CSS-Änderung wäre die Änderung der Schriftfarbe für die gesamte Seite. Dazu fügen wir dem <html>-Tag einen Stil hinzu.
<div id="divRRPublish_results2" class="RRPublish"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=en"></script>
<script type="text/javascript">
<!--
var rrp=new RRPublish(document.getElementById("divRRPublish_results2"), 123456, "results");
rrp.ShowTimerLogo=true;
rrp.ShowInfoText=false;
-->
</script>
<style>
html {
color: red;
}
</style>
Hier verwenden wir das CSS-Feld color, um eine rote Farbe zuzuweisen. Dadurch wird die Farbe des gesamten Textes auf der Seite in Rot geändert. Wenn es jedoch Text auf der Seite gibt, der einen eigenen Stil hat, wird dieser Text nicht überschrieben. Sie sehen dies bei dem Textlink zum Anzeigen aller Teilnehmer.