Schlagwort: html

Unschärfeeffekt mit CSS

Unschärfeeffekte lassen sich in CSS über die Filter-Property realisieren. Sobald die Style-Klasse festgelegt wurde, kann man diese auf ein DIV oder beliebiges Element anwenden.

Screenshot

Code:

.blurout {
            /* Transparenz festlegen */
            opacity: 0.85;
           
            /* Postition festlegen */
            position: absolute;
            top: 0;
            left: 0;    
            right: 0;
            bottom: 0;    
           
            /* Unschärfe festlegen */
            filter: blur(5px;);
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
}

Unschärfeeffekt mit CSS weiterlesen

htmlentities in JavaScript

Diese JavaScript-Methode gibt einen String mit HTML-Entities zurück. Über das Objekt „oEntities“ können bei Bedarf weitere Entities ergänzt werden.

Code:

function htmlentities(sInput)
{
    var oEntities = {'&': '&amp;', '<': '&lt;', '>': '&gt;'};
    return sInput.replace(/[&<>]/g, function(sString){return oEntities[sString] || sString});
}

jQuery: Summen in einer Tabelle spaltenweise ausrechnen

Diese JavaScript-Funktion rechnet die Summen für alle Spalten einer Tabelle aus. Es können beliebig viele Spalten und Zeilen hinzugefügt werden.

JavaScript:

function calcSum(sTableID)
{
    $('#'+sTableID+' thead th').each(function(iIndex)
    {
        var iSum = 0;
        $('#'+sTableID+' tbody tr').each(function()
        {
            var iValue = parseInt($('td', this).eq(iIndex).text());
            if (!isNaN(iValue))
            iSum += iValue;
        });
        $('#'+sTableID+' tfoot td').eq(iIndex).append(iSum)
    });
}

jQuery: Summen in einer Tabelle spaltenweise ausrechnen weiterlesen

High-speed HTML-Coding mit Emmet

Mit dem Aptana-Plugin Emmet kann die Produktivität deutlich gesteigert werden. Dank des Plugins müssen die HTML Tags nicht mehr vollständig ausgeschrieben werden. Stattdessen verwendet man einen schlanken CSS-artigen Ausdruck.
Um beispielsweise fünf DIV-Elemente innerhalb eines DIVS zu erzeugen und gleichzeitig die CSS-Klasse festzulegen, kann die folgende Abkürzung benutzt werden:

Abkürzung:

div>div.test*5

Ergebnis:

<div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>

Link: https://github.com/emmetio/emmet-eclipse

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