 Scroller-Box 02
Ein Cross-Browser Text-Scroller der Text, HTML-Code und Grafiken zulässt. Größe und Geschwindigkeit können angepasst werden. Scrolling wird angehalten, wenn der Mauszeiger über das Scroll-Fenster bewegt wird.
|
|
Scroller-Box 02 für Text und Grafiken
UPDATE 06.10.2010 Script überarbeitet, Browseranpassung, Formatierung
Im Scrollbereich sind HTML-Tags und CSS-Inlineanweisungen erlaubt. Das bedeutet Inhalte der Scroll-Box können leicht angepasst werden und die Darstellung von Verweisen und Grafiken ist möglich.
Scroller Box Version 02
Geeignet für
- Netscape 4
- Netscape 6
- Internet Explorer
- FireFox
|
|
Nachteil dieses Scrollers: Er ist in einigen Browsern (FF) nur für relativ kurze Texte geeignet und schaltet bei längeren Texten frühzeitig auf eine erneute Anzeige um!
Aufwand beim Einbau in die eigene Seite:
- Script im Head-Bereich kopieren
- CSS-Angaben im den Head-Bereich kopieren
- Code im Body-Bereich notieren
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
Nachdem ich eine Weile experimentiert hatte, um die Inhalte mit Padding-Angaben vom äußeren Rand der Box einzurücken stellte ich fest, dass der FF mir die Box-Breite wieder einmal 'zerschießt', weil er padding-Angaben (im Gegensatz zum IE) zur Breite hinzu rechnet. Nun lasse ich im Script die Breite (BoxBreiteInnen) berechnen. Falls ein Innenabstand eingetragen wurde wird die Einrückung entsprechend angepasst.
Sie können nun außerdem die Box mit einem Rand versehen, den Sie frei formatieren können.
Voreingestellte Angaben im Script:
var FarbeBG = "#FFFFFF" // Hintergrundfarbe
var FarbeRand = "#92AFEC" // Randfarbe
var BreiteRand = "1" // Randbreite (kann man auf 0 setzen = ohne Rand)
var BoxBreite = 300; // scroller Breite
var BoxHoehe = 200; // Anzeigehöhe
var Innenabstand = 10; // entspricht Padding (kann man auf 0 setzen)
var ScrollSpeed = 2; // Scroller Geschwindigkeit
// weil FF Padding-Angaben zur BoxBreite hinzuzählt
// vermeide ich Padding-Angaben für die InnenBox und
// lasse stattdessen die BoxBreiteInnen berechnen
var BoxBreiteInnen = BoxBreite - (2 * Innenabstand);
|
Home • Verweise • DHTML • Scroller-Box 02
Beispiel