Kategorie: JavaScript

Java-Scripte und HTML/CSS wiederaufbereiten mit jsbeautifier.org

Oft findet man im Internet diverse Java-Scripte, HTML- und CSS-Dateien, welche aus Speicherplatzgründen (oder als Kopierschutz für Arme) von unnötigem Ballast befreit sind. Sprich, keine Zeilenumbrüche mehr, unnötige Leerzeichen und Tabs entfernt. 

Während diese im Browser und auf der Webseite weiterhin funktionieren, wird es schwierig, falls man doch mal reinschauen muss um einen Fehler zu heben oder etwas zu erweitern. Manuell alles wieder hinzubiegen ist schwierig bis unmöglich. 

Hier hilft der Webdienst “http://jsbeautifier.org/“ weiter. Einfach den Quelltext des Scripts  hinein kopieren und schon bereitet der Dienst den Quelltext in lesbarer Form wieder auf. Das Ganze kann natürlich auch konfiguriert werden, wie man es gerne hätte. Plugins für diverse Browser und Texteditoren sind ebenfalls auf der Seite verlinkt. 


jsbeautifier.org


Linktipp: Alternative zu jQuery

JQuery die Universalwaffe in Sachen Webanwendungsentwicklung. Schnell eingebunden und einfach zu benutzen werden Browser-Inkompatibilitäten ganz gut weg abstrahiert. Dies erkauft man sich mit ein paar Nachteilen,  jQuery muss geladen werden. Für den DSL-Anschluss kein Problem, mobile Anwender sehen das gerne anders.
 
Auch wenn nur wenig Funktionalität von jQuery benötigt wird, kann man sich überlegen, ob man nicht auch ohne auskommt statt mit Kanonen auf Spatzen zu schießen.
 
Daher folgender Linktipp: http://youmightnotneedjquery.com/
 
Der Autor beschreibt (in Englisch)  verschiedene Standard jQuery-Lösungen und dessen Alternative in reinem Java-Script, inklusive der Info ab welchem Browser das Ganze funktioniert.
 
Auf jeden Fall einen Blick wert. 
YouMightNotNeedjQuery


Syntax Highlighting mit highlight.js

Wer ab und zu mal Codesnippets auf seiner Homepage einbinden will, kann sich mal highlight.js anschauen. Die Kombination aus JavaScript- und CSS-Bibliothek erlaubt ein sehr einfaches Syntaxhighlighting von Code in Webseiten.

63 verschiedene Sprachen werden laut Webseite derzeit unterstützt.

Im Gegensatz zu anderen Tools, wie z.B. www.toHTML.com, wird der eigentliche Quelltext nicht verändert und hart mit HTML formatiert.


Um highlight.js zu verwenden, lädt man es entweder von der Homepage herunter und bindet die Dateien in die Homepage ein oder verwendet die gehostete Version. In diesem Fall ist es mit dem Einfügen von folgendem HTML-Code in den “head” der HTML-Datei getan:

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.4/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.4/highlight.min.js"></script>

Der eigentliche Quelltext wird nun mittels “pre” und “code” Tag eingebunden:

Code

Wie man sieht wird der Quelltext nicht mit HTML-Tags verändert. Dies erleichtert spätere Änderungen ungemein und das Design kann jederzeit gewechselt werden.

Das Ergebnis sieht dann z.B. so aus:

Highlight

Wer etwas mehr Farben haben will, verschiedene Themes stehen auf der highlight.js Webseite zur Verfügung. Einfach einbinden, fertig:

Highlight2


HTML-Formulare mit abhängigen Auswahlfelder

Da des öfteren Anfragen von DA-FormMaker Kunden kamen, habe ich ein neues Tutorial auf eKiwi.de geschrieben: Erstellen von abhängigen Combo-Boxen, bzw. Auswahlfeldern in HTML. 

Worum geht es? Der Benutzer wählt in einem Auswahlfeld etwas aus und passend dazu werden in einem zweiten Auswahlfeld die Elemente angepasst:

ComboDas ganze funktioniert natürlich nicht nur in DA-FormMaker Formularen, sondern auch in ganz normalen selbst erstellten HTML-Formularen. 

Hier geht es zum Tutorial.


Acko.net–3d Webdesign

Heute nur ein kleiner Linktipp, der zeigt, was mit modernen Browsern und Webdesign (und ordentlich Know-How) alles so möglich ist. Ohne Flash wohlgemerkt: http://acko.net

Einfach die Seite besuchen und nach unten scrollen, dann sieht man den 3D Effekt. Ich habe das Ganze mit Google Chrome getestet. Ob es auf anderen Browsern auch funktioniert, müsst ihr ausprobieren.

image

Die technischen Hintergründe werden hier etwas genauer erklärt. Das ganze geht sogar so weit, dass der Programmierer der Webseite gleich noch einen Editor zusammengehackt hat, mit dem ihr das Aussehen der Webseite in einem 3d Editor bearbeiten könnt:

image


Mit JavaScipt Element in Auswahlliste definieren

Die letzten Tage kam eine Anfrage rein, kann mittels Klick auf einen Link ein bestimmtes Element in einer Formularauswahlliste auswählen?

Natürlich geht dies, mit etwas Java-Script.

Nehmen wir an, wir haben die folgende Liste:

<select name="top5" size="1">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
</select>

Zuerst legen wir den Link an:

<a href="#" onclick="selectSomething(3);">Nina Hagen auswählen</a><br>


Das “#” bewirkt, dass wir die Seite nicht verlassen. Ansonsten wird die Seite neu geladen und die Einstellungen sind gleich wieder weg. Mittels onclick rufen wir die Methode selectSomething auf, 3 ist das auszuwählende Element. Hinweis: Die Zählung fängt bei 0 an. Das erste Element ist also Element 0.

Nun müssen wir noch die Methode selectSomething programmieren. Also zum Beispiel in den Head-Bereich der HTML-Seite den folgenden Code eingefügt:

    <script type="text/javascript">
    /* <![CDATA[ */
 
      function selectSomething(value) {
        //Referenz auf Auswahlbox holen:
        var myDropdownList = document.DAFORM.top5;
 
        //Index setzen
        myDropdownList.selectedIndex = value;
        return false;
      }
 
    /* ]]> */
    </script>

Was machen wir hier? Wir holen uns zuerst die Referenz auf unser Dropdownfeld. DAFORM ist der Name vom Formular, top5 der Name des Auswahlfeldes. Anschließend können wir über “selectedIndex” den gewünschte Auswahl im Auswahlfeld festlegen.

Das wars auch schon.

Hier ist der gesamte Quelltext der Beispieldatei:

<html>
  <head>
    <title>Beispiel Formular Link Auswahl</title>
 
    <script type="text/javascript">
    /* <![CDATA[ */
 
      function selectSomething(value) {
        //Referenz auf Auswahlbox holen:
        var myDropdownList = document.DAFORM.top5;
 
        //Index setzen
        myDropdownList.selectedIndex = value;
        return false;
      }
 
    /* ]]> */
    </script>
  </head>
 
  <body>
    <a href="#" onclick="selectSomething(3);">Nina Hagen auswählen</a><br>
    <a href="#" onclick="selectSomething(1);">Michael Jackson auswählen</a>
 
    <form action="http://www.example.org/cgi-bin/feedback.pl" method="get" name="DAFORM">
      <select name="top5" size="1">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
    </form> 
  </body>
</html>


Animationen mit animate.css

Mit CSS und Java-Script sind ja mittlerweile coole Sachen möglich, für die man früher Flash brauchte. Wegen mir kann Flash komplett aus dem Internet verschwinden.

Am Besten nutzt man eine fertig programmierte Komponente. Wie zum Beispiel animate.css. Demo und Download unter daneden.me/animate/

Hier eine Demonstration als Video:


Fokus auf Formularfeld setzen

Wer es seinen Benutzern etwas einfach machen will das Formular auszufüllen, sollte gleich zum ersten Feld springen. Der Benutzer kann so direkt lostippen und muss nicht mit der Maus arbeiten.

Dies geht mit ein paar Zeilen Java-Script Code:

<script type="text/javascript">
<!--
	function init()
	{
		document.DAFORM.Name.focus();
	}
//-->
</script>

Dieser wird in den Head-Bereich der HTML-Datei eingefügt.

“Name” ist hierbei der Name des Formularfeldes und DAFORM der Name des Formulars. Verkürzt sieht der HTML-Code des Formulars so aus:

<form action="formmail.php" method="POST" name="DAFORM" >
	<input type="text" name="Name" value="" size="25" maxlength="200">
</form>

Damit das ganze noch beim Laden aufgerufen wird, müssen wir die Methode in den Body-Tag einfügen:

<body onLoad="init();">


Fotos und Bilder als Polaroid darstellen

Mit Hilfe von CSS3 und jQuery können Sie Ihre Fotosammlung in effektvoller Weise als Polaroid darstellen lassen. Das hier vorgestellte Beispiel mischt die einzelnen Polaroids beim Start der Seite nach einem Zufallsprinzip und stellt diese ungeordnet auf dem Bildschirm dar. Zum Anschauen der Bilder holt man sich diese durch Anklicken in den Vordergrund. Außerdem lassen sich alle Bilder zu einer anderen Position verschieben. Einfach das nachfolgende Video anschauen, um die beschrieben Funktionen zu sehen.

Video zur Polaroid-Darstellung

Nutzen Sie die folgenden Buttons um das Beispiel genauer anzusehen und zu testen oder um das Beispiel herunterzuladen. Mit dem in Download enthalten Dateien können Sie Ihre eigene Polaroid-Seite erstellen.

btnBsp btnDownload

Nun noch ein paar Innereien zu diesem Script zum besseren Verständnis und zur Variation bestimmter Parameter:

HTML-Datei (index.html)

Innerhalb des body-Tags werden die einzelnen Bilder über das <img>-Tag eingefügt, wobei src den Pfad zum Bild enthält. Innerhalb von <p> schreiben wir den Text, der auf dem Polaroid stehen soll. Das Ganze wird dann von einem <div>-Container eingeschlossen, welcher der Klasse polaroid zugeordnet wird. Es können beliebig viele Bilder in dieser Form hinzugefügt werden.

<body>
<div class="polaroid">
  <img src="pics/Schwan_Wald_See.png" alt="Schwan im Waldsee" />
  <p>Schwan im Waldsee</p>
</div>
<!-- Mehr Bilder hier -->
</body>

CSS-Datei (style.css)

Unserem <div>-Container hatten wir oben die Klasse polaroid zugeordnet. Hier werden nun die einzelnen Attribute festgelegt, die das Erscheinungsbild bestimmen.

In der ersten Zeile legen Sie Höhe und Breite des Container als absolute Werte fest sowie den Pfad zu dem Hintergrundbild. Das Hintergrundbild ist in diesem Fall die “Polaroid-Maske”.  Deshalb müssen Höhe und Breite der Größe der Polaroid-Maske entsprechen. Sie können das Polaroid-Bild auch beliebig austauschen gegen z.B. ein andersfarbiges Polaroid oder wenn eine andere Größe benötigt wird.  Erstellen lässt sich eine neue Polaroid-Maske unter anderem mit DA-WebImage.

.polaroid { width:368px; height:376px; background-image:url(../pics/polaroid-bg.png); 
position:absolute; }

In der zweiten Zeile ist die Größe der einzelnen Fotos definiert. Es ist zu beachten, dass alle Fotos dieselbe Größe habe. Weiterhin wird mit margin der Abstand von den Rändern so festgelegt, dass das Bild genau in die Polaroid-Maske passt.

.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }

In der dritten Zeile legen wir die Eigenschaften, wie Ausrichtung, Schriftfarbe, Schriftart, etc. zum Schriftzug unterhalb des Polaroids fest.

.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E;

margin-top:15px; }

jQuery (script.js)

Die Script-Datei stammt von Marco Kuiper und kann dem Download entnommen werden. Hier sind die einzelnen Funktionen enthalten, welche die Animationen, wie das Rotieren und Verschieben der Polaroids bewerkstelligen. Auf eine ausführliche Beschreibung der einzelnen Funktionen verzichte ich an dieser Stelle. Der interessierte  Programmierer kann sich die Funktionen in einem entsprechenden Editor; Texteditor ist ausreichend; anschauen.

Zusammenfassung

Es sei noch gesagt, dass CSS3 und HTML5 derzeit noch nicht in allen Browsern vollständig implementiert sind. So kann es beim Beispiel zu unterschiedlichen Darstellungen bei unterschiedlichen Browsern kommen. Das aufgenommene Video zeigt die Anwendung in Chrome. Dort funktioniert alles super. Aber im Mozilla Firefox funktionierte zum Beispiel die Rotation der Bilder nicht.

btnBsp btnDownload