Kategorie: HTML

Gravatar mit PHP auslesen

Bei Gravatar handelt es sich um einen Dienst, der E-Mail-Adressen mit einem Foto verknüpft. Diese Avatare können dann an einer beliebigen Stelle eingebunden werden. Wie man seinen Gravatar mit PHP auslesen kann, zeigt dieser Code:

function getGravatar($sEmail)
{
    return "<img alt="Gravatar" src="http://www.gravatar.com/avatar/".md5(trim(strtolower($sEmail)))."" />";
}

//Gravatar anzeigen
echo getGravatar("test@sklueh.de");

Versehentlichen Datenverlust in HTML-Formularen verhindern

Dieser jQuery-Code verhindert, dass ein Benutzer versehentlich seine mühsam eingegeben Daten, durch einen unachtsamen Klick auf einen Link oder durch eine falsche Tastenkombination, verliert.
In diesem Beispiel werden nach dem Laden der Seite alle Formular-Werte per Serialisierung in der Variable „serialized_values“ gespeichert. Sobald jetzt ein Unload-Event ausgelöst wird, muss der Benutzer bestätigen, dass er die aktuelle Seite tatsächlich verlassen möchte. Der Dialog wird nur angezeigt, wenn sich auch tatsächlich Daten verändert haben.

var serialized_values = "";

$(document).ready(function()
{  
  serialized_values = $("form").serialize();  
});

window.onbeforeunload = confirmLeave;

function confirmLeave()
{
    if(serialized_values != $("form").serialize())
    {
        return unescape("Nicht gespeicherte Informationen gehen m%F6glicherweise verloren.");
    }      
}

Um die Bestätigung für einzelne Elemente (z.B. Submit-Buttons) zu deaktivieren, reicht es den Event-Handler auf null zu setzten.

<button type="submit" onclick="window.onbeforeunload = null">Formular speichern</button>

Cross-Domain Requests (XDR) mit JavaScript / jQuery

Folgende Problematik: Möchte man bestimmte Informationen einer fremden Webseite mit JavaScript auslesen, dann ist man gezwungen Workarrounds anzuwenden. Eine Möglichkeit ist, ein kleines PHP-Skript als Proxy einzusetzen, um an die gewünschten Daten zu kommen.
Cross-Domain Requests (XDR) mit JavaScript / jQuery weiterlesen

PHP: Simple Table Builder

Simple Table Builder ist eine PHP Klasse, mit der sich HTML-Tabellen auf Grundlage eines mehrdimensionalen Arrays erzeugen lassen. Um die Usability zu verbessern wurde das jQuery-Plugin „Flexigrid“ (http://flexigrid.info) verwendet.

Features:

  • Titel-Text
  • Definition der Spaltenüberschriften
  • Höhe und Breite der Tabelle festlegen
  • Spaltensortierung
  • Definition der Spaltenbreite
  • Festlegen einer Standard-Spaltenbreite

    • Screenshot:

    Anwendungsbeispiel:

    require_once('SimpleTableBuilder.php');

    $aTableData = array_fill(0, 15, array('Vorname' => 'Max', 'Nachname' => 'Mustermann', 'Straße' => utf8_decode('Musterstraße 10')));
    $oSimpleTableBuilder = new SimpleTableBuilder();
    $oSimpleTableBuilder->setHeader('Vorname', array('Nachname' => '150'), utf8_decode('Straße')); //Die Breite einer Spalte kann über ein Array definiert werden (In diesem Fall: 150 Pixel). Ansonsten wird der Standardwert verwendet.
    $oSimpleTableBuilder->setTitle('Mein Array');       //Festlegen der Tabellen-Überschrift (optional)
    $oSimpleTableBuilder->setTableData($aTableData);    //Hier wird das Array übergeben, aus dem eine Tabelle erzeugt wird.
    $oSimpleTableBuilder->setHeight('300');             //Festlegen der Höhe (optional)
    $oSimpleTableBuilder->setWidth('600');              //Festlegen der Breite (optional)
    echo $oSimpleTableBuilder->buildTable();            //Tabelle erzeugen

    PHP: Simple Table Builder weiterlesen

    Responsive Design: Media Query

    Unter Responsive Design versteht man die dynamische Anpassung des Webseiten-Layouts an das Darstellungsmedium. Beispielsweise wird das GitHub-Ribbon in der oberen rechten Ecke erst ab einer Breite von 500 Pixeln angezeigt. Dafür ist dieser Code verantwortlich:

    Style-Angabe

    <style type="text/css"> @media all and (max-width: 500px) { #github_ribbon { display:none; } } </style>

    HTML

    <a href="https://github.com/sklueh"><img id="github_ribbon" style="z-index:2; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

    50 hilfreiche Werkzeuge zum Thema Responsive Design:
    50 fantastic tools for responsive web design