HTML5 Webkomponente zur Darstellung von Firmengeschichten/Ereignissen etc.
Anwendung
Markup wie bei den Beispielen im HTML platzieren und Javascript Datei wie folgt im Footer einbinden.
<script src=".../js/ds_history.component.js"></script>
Fertig. Die Komponente reagiert auf Veränderungen der Größe des Viewports oder auch nur des umliegenden Containers automatisch.
Beispiel 1 - Elemente anhand minimaler Breite
Die minimale Breite der Elemente ist vorgegeben (Attribut "data-elementMinWidth") und daraus ergibt sich die Anzahl der sichtbaren Elemente.
HTML Markup
<ds-history data-elementMinWidth="200">
<div data-title="Erstellung des Linux-Kernels" data-year="1991">Linus Torvalds Erstellt den Linux-Kernel</div>
<div data-title="Mosaic Browser" data-year="1993">Der Mosaic Browser wird gestartet</div>
<div data-title="PHP" data-year="1995">PHP wird von Rasmus Lerdorf veröffentlicht</div>
<div data-title="CSS Level 1" data-year="1996">Das W3C hat die CSS Level 1-Empfehlung veröffentlicht</div>
<div data-title="Open Source-Bewegung" data-year="1998">Die Open Source-Bewegung startet offiziell</div>
<div data-title="PayPal wird gegründet" data-year="1998">
PayPal ist zwar oft umstritten, hat aber zweifellos den Weg der Online-Überweisung von Geldern geschaffen. PayPal wurde 1998 gegründet und wurde ursprünglich entwickelt, um auf Auktionsseiten wie eBay sicher Geld zwischen dem Bieter und dem Verkäufer zu senden.
</div>
<div data-title="Firefox" data-year="2003">Firefox ist freigegeben</div>
<div data-title="Ruby on Rails" data-year="2004">Ruby on Rails wird Mainstream</div>
<div data-title="NPL" data-year="2004">37 Signale Geben Sie das Getting Real Ebook frei</div>
<div data-title="Amazon" data-year="2006">Amazon führt Cloud Storage und Serving ein</div>
<style>
.ds_history .element > * { text-align:center; }
</style>
</ds-history>
Ergebnis
Linus Torvalds Erstellt den Linux-Kernel
Der Mosaic Browser wird gestartet
PHP wird von Rasmus Lerdorf veröffentlicht
Das W3C hat die CSS Level 1-Empfehlung veröffentlicht
Die Open Source-Bewegung startet offiziell
PayPal ist zwar oft umstritten, hat aber zweifellos den Weg der Online-Überweisung von Geldern geschaffen. PayPal wurde 1998 gegründet und wurde ursprünglich entwickelt, um auf Auktionsseiten wie eBay sicher Geld zwischen dem Bieter und dem Verkäufer zu senden.
Firefox ist freigegeben
Ruby on Rails wird Mainstream
37 Signale Geben Sie das Getting Real Ebook frei
Amazon führt Cloud Storage und Serving ein
Beispiel 2 - Elemente anhand definierter Anzahl an Elementen
Die Anzahl der Elemente die auf einem Slide sichtbar sind, sind direkt vorgegeben in dem Attribut "data-scrollPager". Hier im Beispiel wird ein Firmenereignis je Seite angezeigt.
HTML Markup
<ds-history style="display:none;" data-scrollPager="1">
<div data-title="Erstellung des Linux-Kernels" data-year="1991">Linus Torvalds Erstellt den Linux-Kernel</div>
<div data-title="Mosaic Browser" data-year="1993">Der Mosaic Browser wird gestartet</div>
<div data-title="PHP" data-year="1995">PHP wird von Rasmus Lerdorf veröffentlicht</div>
<div data-title="CSS Level 1" data-year="1996">Das W3C hat die CSS Level 1-Empfehlung veröffentlicht</div>
<div data-title="Open Source-Bewegung" data-year="1998">Die Open Source-Bewegung startet offiziell</div>
<div data-title="PayPal wird gegründet" data-year="1998">PayPal ist zwar oft umstritten, hat aber zweifellos den Weg der Online-Überweisung von Geldern geschaffen. PayPal wurde 1998 gegründet und wurde ursprünglich entwickelt, um auf Auktionsseiten wie eBay sicher Geld zwischen dem Bieter und dem Verkäufer zu senden.</div>
<div data-title="Firefox" data-year="2003">Firefox ist freigegeben</div>
<div data-title="Ruby on Rails" data-year="2004">Ruby on Rails wird Mainstream</div>
<div data-title="NPL" data-year="2004">37 Signale Geben Sie das Getting Real Ebook frei</div>
<div data-title="Amazon" data-year="2006">Amazon führt Cloud Storage und Serving ein</div>
<style>
.ds_history .element > * { text-align:center; }
</style>
</ds-history>
Ergebnis
Beispiel 3 - Responsive Ansicht
Bis zu einer Breite von 400px wird eine spezielle einfache responsive Ansicht verwendet. Die 400px beziehen sich hier auf das übergeordnete Element und nicht auf die Viewportbreite.
HTML Markup
<div style="width:399px; margin:0 auto;">
<ds-history style="display:none;" data-scrollPager="2">
<div data-title="Erstellung des Linux-Kernels" data-year="1991">Linus Torvalds Erstellt den Linux-Kernel</div>
<div data-title="Mosaic Browser" data-year="1993">Der Mosaic Browser wird gestartet</div>
<div data-title="PHP" data-year="1995">PHP wird von Rasmus Lerdorf veröffentlicht</div>
<div data-title="CSS Level 1" data-year="1996">Das W3C hat die CSS Level 1-Empfehlung veröffentlicht</div>
<div data-title="Open Source-Bewegung" data-year="1998">Die Open Source-Bewegung startet offiziell</div>
<div data-title="PayPal wird gegründet" data-year="1998">PayPal ist zwar oft umstritten, hat aber zweifellos den Weg der Online-Überweisung von Geldern geschaffen. PayPal wurde 1998 gegründet und wurde ursprünglich entwickelt, um auf Auktionsseiten wie eBay sicher Geld zwischen dem Bieter und dem Verkäufer zu senden.</div>
<div data-title="Firefox" data-year="2003">Firefox ist freigegeben</div>
<div data-title="Ruby on Rails" data-year="2004">Ruby on Rails wird Mainstream</div>
<div data-title="NPL" data-year="2004">37 Signale Geben Sie das Getting Real Ebook frei</div>
<div data-title="Amazon" data-year="2006">Amazon führt Cloud Storage und Serving ein</div>
<style>
.ds_history .element > * { text-align:center; }
</style>
</ds-history>
</div>
Ergebnis
Beispiel 4 - Anpassungen
HTML Markup
<ds-history id="example4" style="display:none;" data-elementMinWidth="200">
<div data-title="Erstellung des Linux-Kernels" data-year="1991">Linus Torvalds Erstellt den Linux-Kernel</div>
<div data-title="Mosaic Browser" data-year="1993">Der Mosaic Browser wird gestartet</div>
<div data-title="PHP" data-year="1995">PHP wird von Rasmus Lerdorf veröffentlicht</div>
<div data-title="CSS Level 1" data-year="1996">Das W3C hat die CSS Level 1-Empfehlung veröffentlicht</div>
<div data-title="Open Source-Bewegung" data-year="1998">Die Open Source-Bewegung startet offiziell</div>
<div data-title="PayPal wird gegründet" data-year="1998">PayPal ist zwar oft umstritten, hat aber zweifellos den Weg der Online-Überweisung von Geldern geschaffen. PayPal wurde 1998 gegründet und wurde ursprünglich entwickelt, um auf Auktionsseiten wie eBay sicher Geld zwischen dem Bieter und dem Verkäufer zu senden.</div>
<div data-title="Firefox" data-year="2003">Firefox ist freigegeben</div>
<div data-title="Ruby on Rails" data-year="2004">Ruby on Rails wird Mainstream</div>
<div data-title="NPL" data-year="2004">37 Signale Geben Sie das Getting Real Ebook frei</div>
<div data-title="Amazon" data-year="2006">Amazon führt Cloud Storage und Serving ein</div>
<style>
.ds_history .element > * { text-align:center; }
</style>
</ds-history>
<style>
ds-history#example4 { background-color:orange;
--background-color:orange;
--line-color:black;
--circle-color:#FF3322;
--text-color:black;
--arrow-color:#FF3322;
}
</style>