xDee » admin

Suggestion Vorschlags Script – Javascript Tutorial

admin — Wed, 04 Nov 2009 17:47:31 +0000

das Vorschlagsscript bei Google

Hallo und herzlich Willkommen zu einem weiteren Tutorial.
In diesem Tutorial wollen wir zusammen ein “Suggestion-Script” schreiben. Ein Script welches also Vorschläge (engl. suggestions) macht. Kennen sollte das jeder, da die Suchmaschine Google nämlich genau so eine Funktion eingebaut hat. Gibt man in einem Textfeld einen Teil eines Wortes ein, erscheint sofort das Wort oder Wörter die gleich beginnen. Dies ist sehr nützlich und macht es so für den User einfacher zu suchen.

Voraussetzungen:

Basis HTML & CSS Kenntnisse
Basis Javascript Kenntnisse

Lernziele:

Javascript Funktionen mit Parameter
Verwenden von for Schleifen
Verwenden der substring Funktion

Vorschau

Das Javascript sieht eigentlich ziemlich simpel aus:

1	Hier etwas eingeben, damit die Vorschläge erscheinen:

1	<input id="suggestion" onkeyup="suggestion(this.value)" type="text" />Hier weiterer Text... Lorem Ipsum Dolor und so.

Zuerst erstellen wir einen neuen Array und füllen diesen anschliessend mit Werten. In dem Array können so gut wie unendlich viele Begriffe stehen, jedoch empfiehlt es sich, es damit nicht zu übertreiben da dann das Script langsam werden könnte.

Danach haben wir die eigentliche Funktion. function suggestion(txt) das “txt” in den Klammern bedeutet dass alles was der Funktion als Parameter so übergeben wird, für die Funktion in der Variable “txt” gespeichert wird. Nun können wir auch schon mit der Auswertung beginnen. Man such dabei in Erinnerung behalten, dass wir später immer das was aktuell gerade im Textfeld steht übergeben werden.

Mit einer if-Abfrage überprüfen wir zuerst ob überhaupt etwas übergeben wurde, also ob überhaupt etwas im Textfeld steht.

if(txt == “” || txt == null || !txt) bedeutet nichts anderes wie das. Die || stehen für “oder”. Dies braucht es, da wie immer nicht alle Browser alles unterstützen. Nun greifen wir auf unseren Div-Container zu. Wir werden ihm später den Namen “white” geben, darum rufen wir ihn mit folgendem Code auf, verstecken ihn an und löschen seinen Inhalt, wir erinnern uns: Dieser Code wird nur ausgeführt wenn das Textfeld leer ist.

document.getElementById(‘white’).style.display = “none”;
document.getElementById(‘white’).innerHTML = “”;

Schlussendlich geben wir noch 0 zurück mit return 0. Dies macht nichts anderes wie die Funktion zu beenden.

Dann kommt der else Teil der Abfrage, wenn das Textfeld also nicht leer ist machen wir folgendes:
Wir löschen wieder den Inhalt des Containers und dann kommt der wichtige Teil, wir starten eine for-Schleife die solange läuft wie es Elemente in dem Array mit den Wörtern hat.

for(i=0;i < wlist.length; i++)

Der erste Teil ist dabei die Bedingung die erfüllt werden muss, damit die Schleife gestartet wird, i brauchen wir hier als Zählvariable, existiert diese nicht wird sie automatisch erstellt. Danach kommt die Bedingung unter der die Schleife laufen soll, also solange i kleiner ist wie die Anzahl Wörter in der Liste. Nun kommt der letzte Teil, hier wird nur unsere Zählvariable i jedesmal wenn die Schleife von vorne durchgelaufen wird um 1 erhöht. Enthält die Wörterliste also 23 Wörter, wird die Schleife 23 mal durchlaufen.

Nun können wir mit dem “Herz” des Scripts beginnen:

clen = txt.length;
ctxt = wlist[i].substring(0,clen);

Wir speichern zuerst die Länge des Texts in dem Textfeld (der ja per Parameter übergeben wurde) in einer Variable. Danach machen wir von der substring Funktion gebraucht. Zur Information, die substring Funktion kürzt bzw. teilt einen String, in diesem Fall unser Wort und gibt anschliessend das “rausgeschnittene” Stück aus. Wir holen also ein Wort aus der Wortliste, in dem wir auf den Array zugreifen und mit Hilfe der Zählvariable i das Wort “auswählen”. Nun teilen wir das Wort ein. Der substring Funktion übergeben wir 2 Parameter. Der erste gibt an wo gestartet werden soll, da wir von Anfang an die beiden Werte (der Text im Textfeld und das Wort) vergleichen wollen, ist dieser Wert hier gleich 0. Danach kommt der Endpunkt. Dieser soll in unserem Fall natürlich genau so hoch sein wie die Anzahl Zeichen in dem Textfeld.

Ein kleines Erklärungsbeispiel:

Steht im Textfeld “Baum”, ist clen gleich 4, da das Wort “Baum” vier Zeichen erhält. Haben wir nun in unserer Wortliste irgendwo das Wort “Baumschule” wird es nun mit substring gekürzt und zwar vom 0ten bis zum 4ten Zeichen. Das heisst ctxt entspricht nun auch “Baum”. Wir haben einen Treffer und das ganze Wort “Baumschule” soll nun bei den Vorschlägen erscheinen.

Wie oben erwähnt prüfen wir zuerst mit einer einfachen if Abfrage ob die beiden Werte gleich sind und schreiben dann in den Div-Container:

document.getElementById(‘white’).style.display = “block”;
document.getElementById(‘white’).innerHTML = document.getElementById(‘white’).innerHTML + wlist[i] + “
”;

Zuerst müssen wir angeben, dass unser Container angezeigt werden soll, danach addieren wir quasi das Wort aus der Wortliste hinzu. Wenn wir eine einfache Zuweisung mit einem Gleichheitszeichen machen würden, würde das bedeuten, dass alle anderen Wörter immer wieder aus dem Div-Container gelösch werden würden, das wollen wir ja nicht.

So, unser Script ist nun eigentlich fertig.

Der Schönheit halber hier noch etwas CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Eigentlich vergleichsweise kurz, nicht? Nun die Erklärung dazu:

Die Funktion um unsere Top Bar zu platzieren nennen wir “placeIt”. Zuerst brauchen wir eine sogenannte Browserweiche. Da der Internet Explorer bekanntlich oft rumzickt und sich nicht an die Standarts hält, müssen wir eine kleine Unterscheidung durchführen:

if (!document.all) {: Wenn document.all = false ist, wird das Script nicht im Internet Explorer ausgeführt.

Nun aber zum eigentlichen Teil:

Mit “document.getElementById(“top_bar”).style.top” greifen wir auf die Style Eigenschaft unseres Top Bar Div Containers zu. Das “top” bedeutet, dass wir hiermit die Position oberhalb angeben können. Eigentlich könnten wir den Wert einfach auf 0 setzen, dies würde schon reichen, wenn wir da nicht das kleine Problem hätten, dass sich die Top Bar ja mitbewegen soll, wenn der User scrollt.
Die Anzahl Pixel die der User nach unten gescrollt hat lässt sich mit “window.pageYOffset” und mit “document.documentElement.scrollTop” (im IE) ermitteln. So bewirken wir, dass sich unsere Top Bar mitbewegt.

Aber halt, etwas fehlt doch noch! Damit unsere Funktion immer wieder aufgerufen wird, müssen wir noch folgendes hinzufügen:

window.setTimeout(“placeIt()”, 1) Dies bewirkt einfach, dass die Funktion immer und immer wieder aufgerufen wird. Die Zahl 1 steht dabei für die Anzahl Millisekunden die zwischen den Aufrufen vergehen sollen. Falls Peformance oder sonstige Probleme auftreten sollte man diesen Wert einfach etwas erhöhen…

Nun noch unser HTML Code:

1
2
3
4
5
6
7
8

<body onload="placeIt()">

      <div id="top_bar">

        <p class="infotext"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit

        </p>

        <a class="close" href="#" onclick="document.getElementById('top_bar').style.display ='none'">Schliessen</a>

      </div>

      <img src="http://xdee.net/wp-content/uploads/2009/02/lonesome-day-1280x1024.jpg" />

    </body>

Als Beispiel lade ich hier einfach ein Bild, welches ich einmal erstellt habe.

Wichtig sind hier zwei Dinge:

Unsere Funktion wird dann zum ersten Mal aufgerufen, wenn das Dokument fertig geladen ist mit “”.
Der User sollte die Möglichkeit haben die Top Bar zu schliessen, dies bewirken wir indem wir einen Link platzieren und folgenden Code hinzufügen: onclick=”document.getElementById(‘top_bar’).style.display =’none’” Damit verstecken wir die Top Bar wieder.

Testet nun das Script und experimentiert wie immer ein bisschen damit rum.

Fragen und Kritik einfach in die Comments.

MFG
Michael

Flash FLV Stream Player – Flash Tutorial

admin — Sun, 17 May 2009 11:38:13 +0000

Es wird wieder einmal Zeit für ein Flash Tutorial. Dieses mal wollen wir uns mit den immer populärer werdenden Flash Stream Playern beschäftigen. Wir werden einen kleinen sehr simpel gehaltenen FLV Player programmieren, der die FLV Datei von einem anderen Server streamt.

Voraussetzungen:

Umgehen mit den Flash Werkzeugen

Lernziele:

Verwenden der NetStream Klasse
Anzeigen von Variablen in Textfeldern

Hier eine Vorschau von dem, was wir erstellen werden:

Ausnahmsweise steht hier einmal der Inhalt und nicht das Design im Vordergrund. Der Player ist sehr einfach aufgebaut. Er lädt ein FLV File von www.mediacollege.com (Copyright by Mediacollege.com) und spielt es dann ab. Dazu kommen ein paar einfache Steuerbuttons und einige Textfelder mit Informationen über das FLV-File.

Als erstes benötigen wir ein neues Video Objekt. Dazu müsst ihr die Bibliothek öffnen [Ctrl+L] oder über Fenster -> Bibliothek. Dann klickt ihr dort rechts in das weisse Feld und ihm Kontextmenü wählt ihr darauf “Neues Video” aus.

In dem Menü gebt ihr nun einen Namen ein (dieser Spielt für die spätere Benutzung keine Rolle) und achtet darauf, dass “Video von Actionscript gesteuert) angewählt ist.

Nun zieht ihr das Objekt von der Biliothek auf die Bühne und gebt ihm den Instanznamen “my_video“. Mit dem “Frei Transformieren” Werkzeug [Q] könnt ihr zusätzlich noch die Grösse ändern.

Nun erstellt ihr folgende 6 Elemente auf der Bühne:

dynamisches Textfeld mit der Variable “loaded”
dynamisches Textfeld mit der Variable “fps“
dynamisches Textfeld mit der Variable “time“
Play Button mit dem Instanznamen “play_btn“
Pause Button mit dem Instanznamen “pause_btn“
Stop Button mit dem Instanznamen “stop_btn“

Schlussendlich kommt noch der Actionscript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var connection = new NetConnection();

connection.connect(null);

var stream = new NetStream(connection);

my_video.attachVideo(stream);

stream.setBufferTime(5);

url = "http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv";

stream.play(url);

is_paused = false;

_root.onEnterFrame = function() {

kbTotal = Math.round(stream.bytesTotal * 0.0009765625);

kbLoaded = Math.round(stream.bytesLoaded * 0.0009765625);

loaded = kbLoaded + " KB of " + kbTotal + " KB";

fps = Math.round(stream.currentFps) + " FPS";

time = Math.round(stream.time) + " sec";

}

_root.play_btn.onRelease = function() {

if(is_paused) {

stream.pause();

is_paused = false;

} else {

stream.play(url);

}

}

_root.pause_btn.onRelease = function() {

if(!is_paused) {

stream.pause();

is_paused = true;

}

}

_root.stop_btn.onRelease = function() {

stream.close();

}

Nun die Erklärung dazu Schritt für Schritt:

Mit “var connection = new NetConnection()” erstellen wir eine neues NetConnection Objekt. Dieses soll dann erst einmal eine Verbindung aufbauen mit “connection.connect(null)”. Danach erstellen wir ein Stream Objekt dazu: “var stream = new NetStream(connection)“. Nun weisen wir unserem Video Objekt auf der Bühne den Stream zu : “my_video.attachVideo(stream)”. Schlussendlich bestimmen wir noch vieviel in den Zwischenspeicher geladen werden soll, in diesem Fall sind das 5 Sekunden, das heisst erst wenn 5 Sekunden des Videos geladen sind, fängt Flash an das Video abzuspielen. Bei grossen Videos empfiehlt es sich, hier einen grösseren Wert zu nehmen.

Nun bestimmen wir mit “url = “http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv”” von wo das FLV File geladen werden soll. Jetzt können wir es mit “stream.play(url)” abspielen lassen.

Für die Play/Pause Buttons brauchen wir später noch die Variable “is_paused” die wir jetzt erst einmal auf “false” setzen: ” is_paused = false”.

Den wichtigen Teil haben wir jetzt, das Video wird geladen und abgespielt. Der Benutzer sollte jedoch auch noch einige Informationen über das Video erhalten und es pausieren können.

Die Informationen müssen wir während des Abspielens auslesen darum rufen wir sie auch in einer “onEnterFrame” Prozedur ab.

“kbTotal = Math.round(stream.bytesTotal * 0.0009765625)” liest aus wieviele Bytes das Video total umfasst. Wir multiplizieren es mit 0.0009765625 damit wir aus den Bytes, Kilobytes erhalten. Schlussendlich runden wir es mit “Math.round()” noch auf eine Ganzzahl.

Genau gleich gehen wir mit ”kbLoaded = Math.round(stream.bytesLoaded * 0.0009765625)” vor, nur dass wir hier die Anzahl der geladenen Kilobytes bestimmen.

Jetzt weisen wir der Variable “loaded” die vorher ausgelesenen Werte zu: “loaded = kbLoaded + ” KB of ” + kbTotal + ” KB”“.
Zur Erinnerung: Die Variable “loaded” wir in einem Textfeld ausgegeben!

Nun lesen wir mit ”fps = Math.round(stream.currentFps) + ” FPS”" die Anzahl der Frames pro Sekunde aus. Wieder wird der Wert auf eine Ganzzahl gerundet. Auch die Variable “fps” wir in einem unserer Textfelder ausgegeben.

Schlussendlich wollen wir noch wissen, wieviele Sekunden schon abgespielt wurden, dazu lesen wir mit folgendem Code die Zeit aus und weisen sie der Variable “time” zu: “time = Math.round(stream.time) + ” sec”“.

Nun kommen noch die Buttons. Wichtig dabei sind eigentlich nur folgende drei Befehle:

stream.play(url) – lädt das Video nochmal und spielt es von vorne ab.
stream.pause() – pausiert das Video b.z.w spielt es wieder ab.
stream.close() - schliesst den Stream, sodass das Video anschliessen wieder neu geladen werden muss.

Wichtig ist auch noch, dass beim Play Button, je nachdem welchen Wert die Variable “is_paused” hat, entweder das Video neu lädt oder wieder abspielt.

Nun sind wir auch schon fertig mit unserem simplen FLV Player. Experimentiert ein bisschen damit herum, wie wäre es zum Beispiel wenn der User selbst eine URL eingeben könnte und dann würde der FLV Player das Video laden?

Fragen und Kritik einfach in die Comments.
MFG

Michael

Tooltips in Javascript – Tutorial

admin — Mon, 11 May 2009 14:15:55 +0000

Wie man merkt, finde ich immer mehr Gefallen an Javascript. Darum hier auch ein Tutorial zum Thema “Tooltips in Javascript”. Tooltips sind kleine Boxen die erscheinen wenn der User mit der Maus über ein Objekt fährt. In ihnen kann man zum Beispiel den Linkzielort oder sonstige Infos angeben.

Voraussetzungen:

Basis HTML & CSS Kenntnisse
Basis Javascript Kenntnisse

Lernziele:

Browserweiche
Mausposition abfragen
Div-Container dynamisch mit Text füllen

Vorschau

In Grundaufbau funktioniert das Script folgendermassen:

Wenn der Benutzer über einen Link oder ein Bild fährt wird ein Javascript aufgerufen, welches den Div Container an die richtige Position setzt und mit Text füllt.

Zuerst brauchen wir etwas CSS:

Wir haben vier Funktionen. Nun aber jede Funktion für sich erklärt:

function tagTip(text):
Mit dieser Funktion rufen wir unser Tooltip Script auf. Nun greifen wir mit document.getElementById(‘block’) auf unseren Div-Container zu und ändern die CSS Eigenschaft “display” zu “block”. Das heisst der Div-Container wird nun angezeigt. Mit innerHTML können wir Text in den Container schreiben. Dazu brauchen wir unsere Variable text die als Parameter übergeben wird.. Zusätzlich setzen wir die Variable “drag” auf true. Diese Variable brauchen wir später um zu bestimmen ob sich der Div Container zur Mausposition bewegen soll oder nicht. Nun kommt die Browserweiche. Da der Internet Explorer sich wieder einmal nicht an die Regeln hält müssen wir zuerst feststellen, ob es sich um den Internetexplorer handelt oder nicht. Mit if (!document.all) erreichen wir das, denn wenn das Script im Internet Explorer ausgeführt wird, liefert diese Anweisung true zurück, wenn nicht false. Das Ausrufezeichen sagt, dass das Script in der If-Anweisung nur ausgeführt wird wenn der Wert = false ist also das Script nicht im Internet Explorer ausgeführt wird.

Mit window.onmousemove=showitMOZ bewirken wir, dass immer wenn der onmousemove-Event eintrifft unsere Funktion showitMOZ ausgeführt wird. Schlussendlich das Ganze noch für den IE: document.onmousmove=showit nur das eben da die andere Funktion aufgerufen wird.

function showit():
Zuerst prüfen wir ob die Variable drag gleich true ist. Diese Abfrage brauchen wir, damit der Tooltip nicht immer angezeigt wird. Dann wird über die Style Eigenschaft und event.x bzw. event.x die x- und y-Position gesetzt. Hier addieren wir noch zusätzlich 5 Pixel hinzu für eine schönere Anzeige des Toolips. Diese Funktion wird über unsere Browserweiche nur im Internet Explorer ausgeführt!

function showitMOZ(e):
Nun kommt noch unsere Funktion für alle anderen Browser. Hierbei wird noch der Parameter “e” übermittelt. Ihn ihm wird der Event gespeichert, den brauchen wir um die x- und y-Position zu ermitteln. Dies machen wir dann auch mit “e.pageX” und “e.pageY“. Zusätzlich fügen wir für eine schönere Darstellung noch 5 Pixel hinzu (sonst flackert der Tooltip) da wir dies ja dann über CSS zuweisen brauchen wir noch das “px” damit das auch CSS konform wird. Dies fügen wir einfach mit einem Additionszeichen hinzu.

function unTip():
Schliesslich noch eine Funktion, die die Variable drag auf false setzt und so verhindert, dass der Tooltip weiter angezeigt wird.

Das wärs auch schon! Nun müssen wir nur noch in HTML einen Link, ein Bild oder sonst ein HTML Element erstellen und dort folgendes kleine Stück Code hinzufügen: onmouseover=”tagTip(‘Hier kommt der Tooltip Text’)” onmouseout=”unTip()”

Damit bewirken wir, dass wenn der Benutzer mit der Maus darüber fährt, der Tooltip aufgerufen wird und beim Verlassen wieder verschwindet.

Nun muss nur noch der Div-Container irgendwo im Code verankert werden.

1	<div id="block"></div>

Hier noch einige Anwendungsbeispiele:

1
2
3

<a onmouseover="tagTip('Write something in here...')" onmouseout="unTip()" href="#">TagTip Here</a>

<img onmouseover="tagTip('Es funktioniert auch bei Bildern...')" onmouseout="unTip()" src="sample.jpg" alt="" />

<a onmouseover="tagTip('<img src="></a>')" onmouseout="unTip()" href="#">TagTip Here

Experimentiert ein bisschen damit rum, es ist zum Beispiel auch möglich mit diesem Prinzip auch ganze Bilder als Tooltip anzuzeigen. Dabei einfach den Tag in den Tooltip Funktionsaufruf schreiben.

Zusatz:

Fügen wir dem CSS Code des Tooltips noch folgende Zeilen hinzu, können wir den Tooltip sogar transparent anzeigen:

1
2
3

filter:alpha(opacity=50); /* IE */

-moz-opacity: 0.50; /* Gecko */

opacity: 0.50; /* Opera */

Vielen Dank fürs Lesen und Fragen, Kritk und Wünsche bitte in die Comments

MFG
Michael

Browser/Client Informationen abfragen – Javascript Tutorial

admin — Tue, 21 Apr 2009 22:00:40 +0000

Habt ihr euch auch schon einmal gefragt, warum Google immer in der richtigen Sprache erscheint? Oder wieso bestimmte Seiten euer Betriebssystem “erraten”? All das ist ganz einfach per Javascript abfragbar.

In diesem Tutorial will ich euch zeigen, wie ihr mit Javascript verschiedene Informationen über den Benutzer abfragen könnt.

Vorraussetzungen:

Basis HTML Kenntnisse

Lernziele:

Arbeiten mit Variablen in Javascript
Ausgeben von Werten mit Javascript

Hier könnt ihr euch ein Beispiel anschauen, von dem was wir erstellen werden.

Über vordefinierte Werte können wir per Javascript ganz einfach Informationen wie Bildschirmauflösung, Sprache, Betriebssystem etc. auslesen. So könnte man zum Beispiel die Seite automatisch in die richtige Sprache umwandeln lassen oder je nach Auflösung die Seite anders darstellen lassen.

In unserem Beispiel wollen wir die Werte aber einfach nur auslesen und ausgeben. Ausgeben tun wir sie indem wir vorher ein Textfeld erstellen und darein dann die Werte schreiben.

Das Auslesen der Werte habe ich in eine Funktion mit dem Namen “getInfo” geschrieben, die ich dann beim Laden des Dokuments aufrufe.

Hier der Code dazu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">

So nun aber in aller Ruhe die Erkärung dazu:

var res = screen.width + “x” + screen.height Damit lesen wir die Bildschirmauflösung aus und speichern sie in der Variable “res”.

var jetzt = new Date();var zeit = jetzt.getHours() +”:”+jetzt.getMinutes()+”:”+jetzt.getSeconds();

Für die Zeit braucht es, wie ihr seht, etwas mehr Code. Zuerst erstellen wir quasi ein neues Datum mit “new Date()”. Danach lesen wir mit den Funktionen “getHours()”, “getMinutes()” und “getSeconds()” die Zeit aus. Das ganze speichern wir zusammen mit den Doppelpunkten in einer Variable.

Der Rest verläuft ähnlich:

navigator.appName steht für den Namen des Browsers.
navigator.appVersion steht für die Version des Browsers. Wobei wir diese mit substring(0, 4) auf 4 Zeichen beschränken.
navigator.language steht für die Sprache die der Benutzer im Browser benutzt.
navigator.browserLanguage steht im Internet Explorer für die Sprache die der Benutzer verwendet.
navigator.platform steht für das Betriebssystem auf dem der Browser ausgeführt wird.

In unserem HTML Code werden wir später für jeden Wert ein Textfeld erstellen. In Javascript füllen wir diese dann mit:

document.getElementById(‘resolution’).value = res

Mit “.value” können wir den Inhalt des Textfeldes bestimmen. So verfahren wir dann auch mit den anderen Textfeldern. Mit “document.getElementById(‘ID DES ELEMENTS’)” greifen wir auf unsere Textfelder zu, die natürlich die richtige ID haben müssen!

Hier nun unser HTML Code:

1
2
3
4
5
6
7
8
9

<form> Aufloesung:

<input id="resolution" size="10" type="text" />Zeit: <input id="time" size="10" type="text" />Browser:

<input id="browser" size="10" type="text" />Sprache:

<input id="sprache" size="10" type="text" />Betriebssystem:

<input id="platform" size="10" type="text" /> </form>

Der Code sollte eigentlich klar sein. Es werden verschiedene Textfelder erstellt mit den jeweiligen IDs. Interessant ist das “readonly” welches wir zusätzlich hinzuschreiben. Damit bewirken wir, dass der User nicht in die Textfelder schreiben kann.

Experimentiert ein bisschen mit dem Code rum, wie wär’s zum Beispiel mit einer Zeit Anzeige auf der Website oder einer kleinen Box die den User in seiner Sprache begrüsst?
Fragen und Kommentare einfach in die Comments

MFG
Michael Ziörjen

Div Container bewegen – Javascript Tutorial

admin — Tue, 31 Mar 2009 15:25:06 +0000

Einigen wird es bereits augefallen sein, ich beschäftige mich im Moment ausgiebig mit Javascript. Die Möglichkeiten sind beinahe unbegrenzt und dur Javascript lässt sich vieles auf Websites für den Benutzer einfacher gestalten.

Ein vielleicht weinger nützliches aber trotzdem interessantes Beipiel ist dieses hier, ein Div-Container wird auf Knopfdruck per Javascript bewegt. Und wie das geht könnt ihr in diesem Tutorial lesen.

Voraussetzungen:

Basis HTML Kenntnisse (Div Container, Buttons)

Lernziele:

Div Container per Javascript bewegen
Button Abfrage per Javascript
Javascript Funktionen aufrufen

Und wie immer, schwer ist es eigentlich nicht, wenn man weiss wie. Wir haben einen Div-Container und zwei Buttons. Sobald auf auf den Start Button geklickt wird, bewegt sich der Div Container, haltet jedoch wieder an wenn man auf den Stop Button drückt.

Hier ein Beispiel des Scripts.

Erstelle ganz normal ein HTML Dokument und füge dann folgenden Code in den Bereich ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">

Zuerst definieren wir die Variable “pos” welche die Startposition angibt. Diese kann jeden beliebigen Wert haben.

Dann kommt unsere erste Funktion mit dem Namen “startIt” zusätzlich wird noch der Parameter “anweisung” übergeben, denn mit dieser Funktion wollen wir die Bewegung nicht nur starten sondern auch stoppen. Hierzu haben wir auch die If-Anweisung, wenn der Parameter gleich “start” ist, wird das Interval gestartet:

Mit “move = window.setInterval(“moveIt()”, 40)” bewirken wir, dass eine Funktion regelmässig alle 40 Millisekunden aufgerufen wird. Dabei wird das Interval quasi in der Variable “move” gespeichert, damit wir es später dann wieder beenden können.

Danach kommt noch die Gegenteilige Anweisung, wenn der Parameter gleich “stop” ist, wird mit “clearInterval(move)” das aktuelle Interval gestoppt. Darum haben wir auch die Variable “move” denn in ihr wird quasi die ID des Intervals gespeichert.

Nun kommen wir zu der zweiten Funktion die wir “moveIt” sie bewirkt, dass sich unser Div-Container bewegt. In der Variable “pos” wird ja die Startposition gespeichert alles was wir tun müssen, ist diese schrittweise erhöhen und und dann dem Div Container sagen, dass er die Position wechseln soll.

Dies geht mit: ”document.getElementById(“block”).style.left = (pos + “px”)” dem Div Container “block” (kann übrigens auch ein Bild oder sonst ein HTML Objekt sein) wird per Javascript eine neue Position zugewiesen. Schlussendlich müssen wir noch ein “px” anhängen, da in CSS nur der reine Zahlenwert nicht reicht.

Das wär’s auch schon was Javascript angeht. Nun brauchen wir noch etwas CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

body {

font-family: "Century Gothic";

background-color: #6A6A6A;

}

#block {

background-color: #99CC33;

width: 43px;

border: 1px solid #009933;

color: #006633;

top: 20px;

left: 20px;

padding: 5px;

position: absolute;

}

Dies braucht eigentlich keine grosse Erklärung. Wichtig ist nur das “position: absolute;” denn ohne das funktioniert das Script nicht oder nur eingeschränkt.

Nun zum Schluss noch den HTML Code:

1 2	<form> <input id="start" onclick="startIt('start')" type="button" value="Start" /> <input id="stop" onclick="startIt('stop')" type="button" value="Stop" /> </form> <div id="block">Jayy!</div>

Auch das ist eigentlich ganz simpel, wir haben den Div Container mit der ID “block” und zwei Buttons. Wichtig dabei ist, dass beim Klick die Funktion “startIt(’start’)” oder analog dazu “startIt(’stop’)” aufgerufen wird.

Probiert euer Script nun aus und spielt ein bisschen damit rum, zum Beispiel probiert den Div-Container von oben nach unten bewegen zu lassen oder probiert das ganze mit einem Bild aus.

UPDATE: Vielen Dank für den Hinweis mit Firefox, ich habe das Script nun so geändert, dass es auch im FF funktioniert.

MFG

Michael Ziörjen