Icon für RSS-Feed Link zum XING-Profil
Wählen Sie eine Hintergrundfarbe:
Schwarzer Hintergrund Blauer Hintergrund Hellblauer Hintergrund Rose Hintergrund Grüner Hintergrund Grüner Hintergrund Olivfarbener Hintergrund Gelber Hintergrund Sandfarbiger Hintergrund Beiger Hintergrund Weisser Hintergrund
Texthintergrund:
Schwarzer Hintergrund Weisser Hintergrund Transparenter Hintergrund


Ladebild
Brick in the Wall

Mit ‘Javascript’ getaggte Artikel

WordPress Kommentare mit Smileys

Dienstag, 23. Juni 2009

Auf vielen WordPress-Blocks befindet sich im Kommentarbereich eine Zeile mit Smileys.

Icon Wink in Icon Neutral in Icon Mad in

Durch Anklicken können diese Smileys dann schnell und einfach in einen Kommentar eingebunden werden. So etwas wollte ich meinen Besuchern natürlich auch bieten und habe für Euch etwas recherchiert. Folgender Javascript-Block, den ich noch XHTML-Strict validiert habe, muss in Eurer comments.php unter (oder über) der <textarea></textarea> eingefügt werden. (mehr…)

Javascript Ajax Ladebild

Freitag, 05. Juni 2009

Wenn viel mit Javasript und Ajax gearbeitet wird, kommt es vor, dass der Benutzer bei der einen oder anderen Anwendung warten muss. Dann erscheint meist ein Ladebild oder Loadpicture, um dies zu symbolisieren. Für den Videomodus* habe ich ein neues gesucht und bin heute auf folgende Seite gestoßen:

Ajaxload-300x225 in

Dort kann man verschiedene Ladebilder, seinen Vorstellungen angepasst, herunterladen. Vielleicht kannte es der eine oder andere noch nicht.
(*Anmerkung: Der Videomodus ist nur im Firefox, Opera und IE8 verfügbar)

AJAX und das XMLHttpRequest-Objekt

Donnerstag, 04. Juni 2009

Keine Sorge, ich möchte hier kein weiteres Tutorial über Ajax und das XMLHttpRequest-Objekt schreiben (es sei denn, es wird danach gefragt). Bestimmt wissen Sie, dass die verschiedenen Browser mit dem XMLHttpRequest-Objekt arbeiten, um Daten zwischen Server und Browser zu übertragen, ohne dass die Seite neu geladen werden muss.
Nur der Internet Explorer arbeitet mit einer MSXML-Komponente, die als ActiveX-Objekt geladen wird. Aus diesem Grund wird in fast allen Ajax-Tutorials eine Browserweiche eingebaut, um an das benötigte Objekt zu gelangen. Hier möchte ich Ihnen einen kürzeren Weg vorstellen. (mehr…)

Scroll Top Link (Teil 3)

Mittwoch, 03. Juni 2009

Im dritten Teil möchte ich Ihnen nun einen Scroll Top Link ohne Verwendung von jquery zeigen. Dies ist vor allem dann wichtig, wenn Sie sich mit der Programmierung beschäftigen und etwas hinter die Kulissen schauen wollen. Oder aber, Sie suchen lediglich eine „schlanke“ Möglichkeit für einen Scroll Top Link.

Natürlich kann ich hier nicht den Komfort bieten, wie dies ein ausgewachsenes Framework wie zum Beispiel jquery mit all seinen Funktionen ermöglicht. Aber das will ich auch gar nicht. Mein Anliegen beschränkt sich auf schlichten, funktionierenden und besonders schlanken Code, mit dem sich ein Scroll Top Link realisieren lässt (309 Byte).
Hierbei gehe ich wieder Schritt für Schritt vor, damit Sie mir auch folgen können, wenn Sie sich noch nicht so gut in der Programmierung auskennen. (mehr…)

Scroll Top Link (Teil 2)

Samstag, 30. Mai 2009

Wie angekündigt nun der Scroll Top Link mit der jQuery.scrollTo-Funktion von Ariel Flesler (… hier noch mal die Demo-Seite) .

Hierzu laden wir uns zunächst die neueste Version (momentan scrollTo-1.4.2) besagter scrollTop-Funktion herunter.
Dann entpacken wir die gezippte Datei in einen beliebigen vorher erstellten Order auf unserem PC und schieben die nun verfügbare Javascript-Datei auf unseren Webspace. Bei lokal installiertem Webserver in das entsprechende Verzeichnis auf unserem Rechner … zum Beispiel beim xampp in “c:/xampp/htdocs/…/scrollto-1.4.2-min.js“. (mehr…)

Scroll Top Link (Teil 1)

Dienstag, 26. Mai 2009

Nachdem wir nun in der Einleitung zu diesem Tutorial das jquery-Framework eingebunden haben, erstellen wir als nächstes eine eigene Scroll Top Funktion, die auf der jquery-Funktion animate aufbaut.

Dazu öffnen wir zunächst eine neue Datei in einem Editor (zum Beispiel Notepad++) und kopieren folgenden Quellcode hinein:

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */

/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(){
        /* ... entferne das href-Attribut ... */
        $(this).removeAttr('href');
        /* ... und scrolle nach oben! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Der Quelltext dürfte sich durch die eingefügten Kommentare selbst erklären. (mehr…)

Scroll Top Link (Einleitung)

Dienstag, 26. Mai 2009

In diesem Tutorial möchte ich erklären, wie ein Scroll Top Link in die Webseite integriert werden kann.

Ein Scroll Top Link ermöglich es den Besuchern, nachdem sie die Seite fertig gelesen haben, bequem an den Seitenanfang zurück zu gelangen, ohne den Scrollbalken (oder die Nach-Oben-Taste) benutzen zu müssen. Dies gehört zum Usability und sollte auf keiner Seite fehlen, die viel Content und somit lange Seiten enthält. Dadurch wird dem Benutzer das Durchforsten der Webseite erleichert.

Dies kann auf 2 Arten realisiert werden. Bei der ersten springt die Seite direkt zum Anfang (Top) der Seite. Bei der zweiten Variante erfolgt dies animiert durch Javascript, dabei scrollt bzw. gleitet die Seite bis nach oben. Letzteres sieht elegant (smooth) aus und wird ihnen gefallen. Es erfordert jedoch aktiviertes Javascript im Browser. (mehr…)

Nach oben