Posts in: Januar, 2015

WordPress Childtheme leicht gemacht

Das individualiseren von Themes ist immer so eine Sache. Einerseits möchte man die Themes Updaten können, um Versionenkonflikte zu vermeiden und neue Features zu nutzen, anderseits möchte man gewisse im Code enthaltene Elemente jedoch ändern oder gar ganz entfernen. Diese im Code des Templates vorgenommenen Änderungen möchte man dann bei einem Update des Themes natürlich nicht verlieren. Glücklicherweise bietet WordPress dafür eine einfache und schnelle Lösung: das Childtheme. Nachfolgend erkläre ich in drei einfachen Schritten, wie Du an Dein eigenes Childtheme kommst.

(mehr …)

Google Maps (JS API V3): Personalisierte Karte einbinden

Es gehört schon beinahe zum heutigen Standard personalisierte Google Maps Karten bei den jeweiligen Kontaktsektionen der Pagebetreiber einzubinden. Schliesslich soll die Karte an das restliche Design der Seite angepasst sein und der Marker, der den genauen Standort auf der Karte markiert, soll das Firmenlogo beinhalten. Nur wie kriegt man dies nun bei der eigenen Webseite hin?

(mehr …)

Parse HTML as PHP

Meist wird es als eher unschön angesehen, wenn sich in den Weblinks PHP Dateiendungen befinden. Dieses ist jedoch ganz schnell behoben, einfach in der htaccess Datei folgende Codezeilen einfügen.

AddHandler application/x-httpd-php5 .html .htm

Das Gute an dieser Methode ist, dass Ihr beim Erstellen euerer Seiten wie bisher den PHP-Code in den Files verwenden könnt, jedoch von nun an die Dateiendung HTML statt PHP verwendet.

Overflow in Fieldset Problem im Firefox

Normalerweise ist es ja bekanntlich der Internet Explorer, welcher den Webentwicklern kummer bereitet. Diesmal bin ich aber auf ein Problem im Firefox gestossen. Bei Elementen mit overflow Definitionen in einem Fieldset streikt Firefox und zeigt die Elemente in voller Breite an. Die Lösung dafür ist eine einfaches

display: table-cell;

für das Fieldset Element. Da nun aber die anderen Browser das Fieldset Element mit dieser Definition sehr unterschiedlich rendern, müssen wir zu einem Firefox Browser Hack greifen:

@-moz-document url-prefix() {
  display: table-cell;
}

Nun greift die table-cell Definition nur bei Firefox und zeigt bei allen Browsern das gleiche Ergebnis an.

HTML5 placeholder Attribut jQuery Fix

Gerade eben habe ich festgestellt, dass das Verhalten bei Verwendung der HTML5 Placeholder Attribute nicht wie gewünscht bzw. gewohnt ist. Wenn man in das Input Feld klickt, bleibt der Text bestehen. Dies ist empfinde ich als unschön. Deshalb habe ich kurzerhand ein kleines jQuery Script geschrieben:

$('[placeholder]').focus(function() {
    var placeholder = $(this).attr('placeholder');
    $(this).attr('placeholder','');
    $(this).blur(function() {
        if ($(this).val() == '' ) {
            $(this).attr('placeholder',placeholder);
        }
    })
});

Natürlich könnte man das nun noch ein wenig kompakter gestalten, für das Verständnis habe ich es aber in dieser Form gepostet.

Update
Hier noch die komprimierte Version:

$("[placeholder]").focus(function(){var e=$(this).attr("placeholder");$(this).attr("placeholder","").blur(function(){if($(this).val()==""){$(this).attr("placeholder",e)}})})

Let’s go!

Wir starten unseren Blog und freuen uns auf viele, spannende Beiträge und Diskussionen.

Die Themen erstrecken sich über die Umfangreiche Webwelt und zeigen Einblicke in unsere Programmierung.

Wir teilen unsere Erfahrungen und zeigen Tipps und Tricks auf.

Aber seht doch einfach selbst 😉