Frontend

Sprungmarken in HTML Newslettern (insb. Simplenews Content Selection)

Nach meiner Recherche zum Thema kann ich sagen: Das Thema geistert nicht selten durchs Netz, ich hoffe dieser Artikel hilft Anderen etwas weiter.

Das Problem: Outlook akzeptiert die aktuelle Form, sprich IDs, von Sprungmarken nicht, obwohl (angeblich) der Internet Explorer als Renderer zum Einsatz kommt (was hier Version 9 entsprechen würde, welcher es definitiv kann). Folgende Grundsätzliche Tipps kann man also geben:

  1. name UND ID verwenden
  2. Der Zielanker sollte Inhalt haben

Unsere Lösung sieht also folgendermaßen aus:



Ueberschrift Text

Ueberschrift Text

    Platzsparendes Captcha (in kleinst-Formularen)

    Bei einem Drupal Kunden bestand vor kurzem die Notwendigkeit ein kleines Kontaktformular im Footer mit einem Captcha zu versehen. Captchas sind naturgemäß nun meist eher unschön anzusehen und nehmen relativ viel Platz in Anspruch. Die Idee war nun das Captcha bei Klick auf den Submit-Button über dem Formular einblenden zu lassen, so bleibt die ursprüngliche Optik erhalten und es muss kein zusätzlicher Platz geschaffen werden.

    Das ganze wurde nun per jQuery umgesetzt, welches natürlich ein Fallback für nicht-JavaScript-User notwendig machte. Hier passiert dann ganz einfach folgendes: Das Captcha ist standardmäßig per CSS ausgeblendet, jQuery blendet dieses erst ein. Erfolgt keine Captcha Angabe wird man auf eine Formularseite weitergeleitet (die Eingaben bleiben selbstverständlich erhalten), auf welcher man das Captcha dann eingeben muss.

    Unterhalb ist der entsprechende jQuery Code zu finden mit dem die Lösung umgesetzt wurde. Das hinzufügen eines Fake-Captcha-Buttons war leider notwendig, da sich herausgestellt hat, dass einige Browser keine Click-Events auf deaktivierte Buttons akzeptieren (Ziel war, den Button zu deaktivieren um das Absenden des Formulars zu verhinder, bis das Captcha eingegeben wurde).

    (function ($) {
    	Drupal.behaviors.captchaRequest = {
    		attach: function(context, settings) {
    			$('#footer #webform-client-form-4 .captcha').append($('#webform-client-form-4 #edit-submit--2'));
    			$('#footer #webform-client-form-4').append('<span id="captcha-request">Absenden</span>');
    			$('#footer #webform-client-form-4 #captcha-request').click(function() {
    					$('#footer #captcha-request').remove();
    					$('#footer #webform-client-form-4 .webform-component').hide();
    					$('#footer #webform-client-form-4 .captcha').show();
    			});
    		}
    	};
    })(jQuery);
    

      Silbentrennung per JavaScript

      Für ein aktuelles Projekt bestand die Notwendigkeit Absätze als Blocksatz zu formatieren. Das Problem hierbei ist hinreichend bekannt, besonders bei schmalen Spalten kann man sich dem Thema Silbentrennung nicht erwehren. Um also ansprechenden Blocksatz erzeugen zu können, müssen wir den Browsern etwas auf die Sprünge helfen. Dieses muss zum jetzigem Zeitpunkt per JavaScript passieren.

      Warum per JavaScript? Zum einen weil eine Serverseitige Lösung sich wahrscheinlich auf Suchmaschinen auswirken würde, möglicherweise ließe sich mit einfügen von &shy; (Sollbruchstellen) eine solche Lösung umsetzen, allerdings scheint die JavaScript-Lösung doch praktikabler.

      Ich bin mir selbstverständlich bewusst darüber, dass CSS3 theoretisch per „text-justify“ die Möglichkeit bietet Blocksatz ansehnlicher zu formatieren. Praktisch jedoch wird diese Funktion bisher leider nicht unterstützt.

      Nach einigen untauglichen versuchen per jQuery, landete ich auf der Seite eines Schweizer Kollegen (1). Dieser hat sich dem Thema ausführlich gewidmet und das ganz wunderbare Hyphenator.js zusammengestellt. Inzwischen wird das Projekt bei Google Code (2) weitergeführt. Der Link zur Autorenseite hängt trotzdem an, die Funktionsweise ist durchaus interessant nachzuvollziehen.