FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab

Transkript

1 FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab

2 Inhaltsverzeichnis 1 Einleitung Schreibweise Zusätzliche Parameter Hintergrundfarbe Anzeige als Liste Verhinderung Anzeigeumschaltung Tipps zur Einbettung Komplettes Codebeispiel (HTML)... 6 iframe Einbettung 2 Ab Version

3 1 Einleitung Dieses Dokument beschreibt die Vorgehensweise zur Einbettung der Ranglistenanzeige (Pyramide oder ELO) auf in beliebige Webseiten mittels des HTML <iframe> Elements. 2 Schreibweise Das HTML-Element <iframe> ermöglicht innerhalb von Webseiten die Einbettung/Anzeige von anderen Webseiten. Wir stellen für diese Art der eingebetteten Anzeige eine speziell präparierte Version der Ranglistenanzeige zur Verfügung, welche über kein Menü verfügt und ohne persönliche Anmeldung funktioniert. Jede Rangliste erhält bei der Anlage eine 16stellige Zufallskennung, die als Parameter zur Anzeige benötigt wird. Die Kennung ist für die Administratoren im Untermenü Stammdaten Rangliste des Hauptmenüs Admin-Rangliste im Feld iframe-kennung ersichtlich. Die Anzeige der Rangliste ist auch bei der Einbettung mittels iframe voll responsiv und passt sich somit dem zur Verfügung gestellten Platz automatisch in der Breite und dem Layout in verschiedenen Schritten an. Die Schreibweise für die Einbindung ist wie folgend: <iframe src= Kennung ></iframe> Kennung muss dabei durch die 16stellige Kennung der Rangliste ersetzt werden. iframe Einbettung 3 Ab Version

4 3 Zusätzliche Parameter Über zusätzliche Parameter kann man den Aufbau und Inhalt der Ranglisten-Anzeige weiter konfigurieren. Die einzelnen Parameter beginnen mit einem & gefolgt vom Namen des Parameters, einem Gleichheitszeichen und dem oder den kommaseparierten Werten des Parameters. Alle Parameter werden jeweils hinter der Kennung bzw. hinter einem anderen Parameter angefügt. Die Reihenfolge spielt keine Rolle. Alle Parameter sind optional. Möchte man den Parameter nicht nutzen, kann dieser also weggelassen werden. 3.1 Hintergrundfarbe Parameter: &rgb=r,g,b r,g,b stehen hier für dezimale Farbwerte rot, grün und blau jeweils im Bereich von 0 bis 255. Bei schwarz sind alle drei Werte 0, bei weiß sind alle drei Werte Anzeige als Liste Parameter: &liste=1 Wird dieser Parameter genutzt, so erfolgt die Anzeige der Rangliste bei Start als Liste und nicht als Pyramide. (Nur Forderungsrangliste, nicht ELO). Beispiel:...de/index.php?iframe= &liste=1 > 3.3 Verhinderung Anzeigeumschaltung Parameter: &noswitch=1 Wird dieser Parameter genutzt, so kann der Benutzer bei der Rangliste nicht mehr zwischen Pyramiden- und Listenansicht hin und her schalten. Die Schaltfläche wird nicht angezeigt. (Nur Forderungsrangliste, nicht ELO). Beispiele:...de/index.php?iframe= &noswitch=1&rgb=226,0,74 > Wird dieser Parameter angefügt, so kann damit die Hintergrundfarbe (Standard: Blauverlauf) beliebig gesetzt werden, um den Hintergrund der Rangliste optimal den Farben der Vereinsseite anzupassen. Sind alle Farbwerte -1, so wird der Hintergrund transparent und der Hintergrund der Vereinsseite ist sichtbar! Beispiel für ein bekanntes Magenta als Hintergrundfarbe:...de/index.php?iframe= &rgb=226,0,74 > iframe Einbettung 4 Ab Version

5 4 Tipps zur Einbettung In der Regel wird für die Einbettung ein eigener Bereich mittels dem HTML <div> Element auf der Webseite zur Verfügung gestellt. Aufgrund der stufenweisen Breitenanpassung unserer Anzeige empfehlen wir für das umgebende <div> Element folgende Breiten, damit die Ränder möglichst klein bleiben. Etwas Puffer ist hier aufgrund der unterschiedlichen Darstellung in unterschiedlichen Browsern eingerechnet: Auf der nachfolgenden Seite finden Sie ein komplettes HTML- Codebeispiel einer mit <div> Elementen strukturierten Webseite mit eingebetteter Rangliste (Die Kennung ist nicht gültig und muss durch eine Kennung ihrer Rangliste ersetzt werden!). 370 Pixel 530 Pixel 690 Pixel 818 Pixel 1074 Pixel Das <iframe> Element fügt automatisch vertikale Scrollbalken hinzu, sollte die Höhe des umgebenden <div> Elementes nicht ausreichen, um die Rangliste vollständig darzustellen. Das nachfolgende Beispiel zeigt ein <div> Element mit der Breite von 690 Pixel und einer Höhe von 600 Pixel: <div style= width: 690px; height: 600px; > <iframe style= width: 100%; height: 100% > </iframe> Bei ihrer Webseite sollten die Style-Angaben natürlich in der externen *.css Datei als Klassen- oder ID-Selektor gespeichert werden. iframe Einbettung 5 Ab Version

6 5 Komplettes Codebeispiel (HTML) Im nachfolgenden Code-Beispiel ist die rot markierte iframe-kennung durch die iframe-kennung der von ihnen gewünschten Rangliste zu ersetzen. <!DOCTYPE html> <head> <title>html Basic Structure</title> <style> * { padding: 0px; margin: 0px; border: 0px; div { box-sizing: border-box; text-align: center;.container { width: 980px; margin: auto; background: orange;.header { height: 90px;.wrapper { text-align: center;.content { float: left; height: 360px; width: 690px;.side { float: right; width: 190px; height: 360px; iframe Einbettung 6 Ab Version

7 .footer { height: 60px; </style> </head> <body> <div> <div class="container"> <h2>container</h2> <div class="header"> <h2>header</h2> <div class="wrapper"> <h2>wrapper</h2> <div class="content"> <iframe src=" witch=1" style="width:100%; height: 100%;"> </iframe> <div class="side"> <h2>side</h2> <div style="clear: both;"> <div class="footer"> <h2>footer</h2> </body> </html> iframe Einbettung 7 Ab Version