JavaScript - Section Text Scroller

Mit diesem JavaScript ist es möglich Text in einem Textfeld zu scrollen. Der Text ist vollständig vohanden, der sichtbare Teil ist jedoch a die Div Box begrentzt. So ist es möglich viel Text auf kleiner Fläche übersichtlich darzustellen.
Autor: unbekannt

Demo (mit der Maus auf Section eins, zwei oder drei klicken oder per Mouseover auf "nach oben" oder "nach unten") :

Section Text Scroller - Eins | Zwei | Drei
nach oben | nach unten

Section eins: JavaScript in HTML einbinden Es gibt zwei Möglichkeiten ein JavaScript in eine HTML einzubinden. Die erste ist direkt in den Code der HTML Datei, so wie es hier auf den Demoseiten gemacht wird und die zweite, über eine externe Datei.
Ein JavaScript über eine externe Datei in HTML einzubinden hat dabei mehrere Vorteile gegenüber der direkten Einbindung. Ein großes JavaScript direkt einzubinden, macht diese meist sehr unübersichtlich. Ein weiterer Vorteil ist, durch eine externe Datei, kann man das JavaScript auf mehreren Seiten verwenden. Das spart Platz und sollte das Script einmal angepasst werden, muss man es nur in der externen Datei und nicht auf jeder Seite ändern.
Section zwei: Ein JavaScript direkt in eine HTML Datei einbinden Ein JavaScript beginnt mit der Anweisung <script type="text/javascript"> oder <script language="javascript" type="text/javascript"> und endet mit </script>. Die language="javascript Version sollte nicht mehr verwendet werden, da sie in einigen Browsern nicht korrekt interpretiert wird. In Zukunft wird es den Typ <script type="application/javascript"> geben. Dieser wird aber noch nicht von allen Browsern unterstützt.
Section drei: Einbinden von JavaScript Code in einer externen Datei die elegantere Art Javascripts einzubinden ist durch eine externe Datei. Dazu müssen Sie in der HTML Datei, dem Browser zeigen, wo er das Script findet. Nehmen wir mal an sie wollen das Script mit dem Namen Test in einer externen Datei einbinden. Dazu müssen Sie im <head> Bereich <script src="Test.js" type="text/javascript"></script> einbinden. Das src steht für source = Quelle. Wichtig ist dabei den kompletten Quellpfad anzugeben. In unserem Fall nehmen wir mal an, beide sind im selben Verzeichnis. Die externe Script Datei muss dabei eine reine ASCII-Datei sein und darf nur JavaScript-Code enthalten. Die Datei muss dabei die Endung .js haben.

JavaScript - Section Text Scroller

Sectionen im Text erzeugen :
<span class="link" onmousedown="slideContent('section-1')">Eins</span> | <span class="link" onmousedown="slideContent('section-2')">Zwei</span> | <span class="link" onmousedown="slideContent('section-3')">Drei</span><br><span class="link" onmouseover="scrollContent('slider',-1)" onmouseout="cancelScroll('slider')">nach oben</span> | <span class="link" onmouseover="scrollContent('slider',1)" onmouseout="cancelScroll('slider')">nach unten</span>

Text einbinden:
<div class="slider">
<div class="slidercontent" id="slider">
<div id="section-1" class="section upper">
<strong>Section eins:</strong> Text
</div>
<div id="section-2" class="section upper">
<strong>Section zwei :</strong> Text
</div>
<div id="section-3" class="section">
<strong>Section drei :</strong>Text
</div>
</div>
</div>

CSS Datei

JavaScript

JavaScript Archiv Bookmark