Manchmal entscheiden UI oder UX Designer, dass die gesamte Website unscharf gemacht wird, wenn eine Dialog Box geöffnet wird. Ich habe heute ein Script dafür geschrieben.

CSS

.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}

Man erstellt zunächst eine CSS Klasse mit dem CSS3 filter Argument und dem Wert blur() (Referenzen zu CSS3 Filtern gibt es hier und hier). Diese Klasse wird dann mit jQuery dem alles umfassenden Element zugewiesen. (Achtung! Die Dialog Box an sich darf nicht in diesem Element liegen!)

Die Dialog Box kann in etwa so aussehen:

.dialog-box {
      width: 300px;
      height: 350px;
      background: #fff;
      padding: 25px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -175px;
}

HTML

Das HTML Markup ist sehr einfach, es wird nur ein Trigger (a-Element) benötigt sowie die Dialog Box selbst.

<!-- trigger element -->
<a href="#" id="dialog-trigger" class="your-class">Trigger Dialog!</a>

<!-- dialog box -->
<div id="dialog-box" class="dialog-box">
  <h3>Dialog Box!</h3> <a href="#" id="close" class="close">Close</a>
   <p> Your content goes here</p>
    <!-- Forms oder andere Dinge hier -->
</div>

Da nun Trigger und Box vorhanden sind fehlt nur noch eins: Das jQuery Script.

$(document).ready(function() {
  $('#dialog-box').hide();
  $('#dialog-trigger').click(function() {
    $('.wrapper').addClass('blur');
    $('#dialog-box').show(); 
  });

$('#close').click(function() {
    $('#dialog-box').hide();
    $('.wrapper').removeClass('blur');
    });
});

Das Script arbeitet die folgenden Schritte ab:

• Dialog Box ausblenden
• wenn der Trigger geklickt wird
• wird dem wrapper die Klasse blur hinzugefügt
• und die Dialog Box wird eingeblenden
• wenn der Close Button geklickt wird
• wird die Dialog Box wieder ausgeblendet
• und die Klasse wird vom wrapper entfernt

Das dürfte sehr git erklären was dieses kleine Script macht.

Warum wrapper und nicht body?

Zuerst habe ich versucht das ganze mit dem Body zu machen, aber das endete in einem Chaos (siehe Bild unten).

Live Example

Check out this Pen!

Ich habe mich kürzlich dazu entschieden AJAX zu lernen und bereue es jetzt schon ein bisschen. Mein Talent im JavaScript Bereich ist sehr beschränkt, aber da ich gern irgendwann in der Zukunft mal Front-End-Developer werden möchte komme ich wohl kaum drum herum mich mit der ein oder anderen JavaScript Technik auseinanderzusetzen.

Leider hält das Internet sich mit guten AJAX Tutorials zurück und deswegen dachte ich mir ich dokumentiere nun einfach mal meinen Lernerfolg (oder meine Niederlage) mit AJAX. Angefangen habe ich heute mit einem kleinen Script, dass Inhalte aus verschiedenen Text-Dateien in eine Website läd, ohne diese bei jedem Klick neuzuladen.

Zuerst definiert man hierzu eine neue Funktion und registriert ein XMLHttpRequest.

function loadContent() {
c = new XMLHttpRequest();
}

Als nächstes definiert man was diese Funktion tun soll, in meinem Fall eine Datei öffnen.

function loadContent() {
c = new XMLHttpRequest();
c.open("GET","test.txt",false);
}

mit c.open werden Requests zum öffnen einer Datei an den Server gesendet und von AJAX verarbeitet, die Grundstrucktur ist: x.open(method,path_and_file,asynch

• method: GET oder POST
• path_to_file: Der Pfad zur Datei und die Datei selbst (z.B. daten/bilder/lorem.txt)
• asynch: Asynchron oder Synchrone? Bei true wird die Funktion asynchrone ausgeführt, bei false synchrone

Wird die Funktion nun ausgeführt lädt sie die Daten zwar, weiß aber nicht was sie damit anfangen soll. Deswegen werden die Daten nun gesendet und in ein HTML Element geschrieben.

function loadContent() {
c = new XMLHttpRequest();
c.open("GET","test.txt",false);
c.send();
document.getElementById('content').innerHTML=c.responseText;
}

Im Prinzip wäre die Funktion nun fertig, aber mit statischer Text-Datei macht sie nicht viel Sinn. Deshalb kommt nun noch eine Variable ins Spiel

function loadContent($file) {
c = new XMLHttpRequest();
c.open("GET","" + $file + ".txt",false);
c.send();
document.getElementById('content').innerHTML=c.responseText;
}

Nun lädt die Funktion immer die Datei, die ihr zugewiesen wurde.

<a href="#lorem" onclick="loadContent('lorem');">Lorem</a>

Das war es im Prinzip für’s erste schon. Da ich bei den Links mit Hash-Werten arbeiten wollte, sodass alle Inhalte ohne Refresh der Seite geladen werden können und aber auch einzelne “Unterseiten” (www.example.com/#about,www.example.com/#work, etc) direkt erreichbar sind habe ich noch eine Funktion, die beim laden der Seite überprüft ob ein Hash gesetzt ist.

window.onload=function getCurrentHash() {
 var hash = window.location.hash.replace('#',''); // entfernt # des Hashs

 ol = new XMLHttpRequest(); // neues AJAX Model
 ol.open("GET", ""+ hash +".txt",false); // Dateien laden
 ol.send(); // Request absenden
 if(!hash) {
    document.getElementById('content').innerHTML = "No hash there."; // ohne Hash statischer Text
 } else {
 document.getElementById('content').innerHTML = ol.responseText; // mit Hash Inhalt aus Text Datei laden
 }
};

Das war’s, eine Live-Demo gibt es hier.

Als nächstes werde ich mir anschauen, wie man eine Loading Animation mit AJAX umsetzt. Bei inhaltlichen Fehlern freue ich mich über Kritik und Hilfe (und einen schnellen Tweet)

Endlich Herrenmagazin! Ich kenne Herrenmagazin nun schon seit etwa 2010-2011 und wollte sie immer Live sehen, dann machten Sie eine Pause und als dieses Jahr ihr neues Album “Das Ergebnis wäre Stille” erschien war mir klar, dass eine Tour folgen wird.

Das Konzert in der Kreativfabrik Wiesbaden, in der ich vorher noch nie war, fand im kleinen Kreis mit etwa 100+ Personen statt und war wunderschön. Herrenmagazin verbinden auf eine unbeschreiblich schöne Art schnelle, Alternative-Indie Musik mit Balladen gleichen, ruhigen Songs und das aufgeteilt auf 1 Stunde 30 Minuten mit viel Liebe und einem lockeren Umgang mit dem Publikum. Bei Herrenmagazin hat man das Gefühl die Band macht Musik für die Menschen und die Konzerte und nicht nur für’s Geld wie es bei einigen großen Künstlern rüber kommt. Herrenmagazin spielten sowohl alte wie auch neue Lieder und mir persönlich fehlte nur ein Lied: Formlos & Frei.

Herrenmagazin sind noch bis 18.08.2013 auf “Das Ergebnis wäre Stille” Tour, tut euch und euren Ohren den gefallen und besucht ein Konzert, es lohnt sich!

Supported wird die Tour von EAIS oder Albrecht Schrader. Gestern war EAIS dabei und ebenfalls wunderbar. EAIS bietet eine sehr emotionale, schöne Live Performance als Ein-Mann-Band mit Gitarre und Keyboard (mit dem er Loops abspielt). Sein 45 Minuten langer Auftritt war ein perfektes Warm-Up für Herrenmagazin und für seinen Song “Richtung Süden hält der Blick” spielte er Live mit Deniz von Herrenmagazin.

Grandios! Für gerade mal 10€ bekam ich einen der schönsten Konzerte überhaupt. Jeder Zeit wieder!

Ich mag Musikvideos die Geschichten erzählen und dieses erzählt eine Action Geschichte aus der Ego-Perspektive. Super geil!

Endlich habe ich mir mal Zeit genommen und meinen Blog redesigned und das gesamte CSS in SCSS umgeschrieben, was auf jegliche Art und Weise besser/praktischer als normales CSS ist.

Allein die Tatsache Variablen wie $baseFont, $accent oder $fontSize, also ganz einfache Definitionen, nutzen zu können die jederzeit geändert werden können und man sich das ändern der Farben oder Größen im gesamten CSS einzeln spart spricht für SASS/SCSS. Bei diesem Theme benutze ich folgende Variablen

$fontFamily :   'Roboto Condensed', sans-serif;
$fontSize   :   1.2em;
$lineHeight :   $fontSize+0.5;

$large  :   3em;
$middle :   $fontSize;
$small  :   0.7em;

// '- Colors
$accent :   #AB3E5B;
$dark   :   #222222;
$light  :   #f9fafc;

$link   :   $accent;
$linkHover  :   $dark;

$pageBg     :   $light;
$fontColor  :   $dark;

// '- Sizes
$pageWidth  :   800px;

Außerdem benutze ich zum ersten mal Compass von dem ich mehr als begeistert bin. Compass kommt mit einer riesigen Sammlung vorgefertigter Mixins und Helper die – im Gegensatz zu anderen Frameworks – überwiegend ohne vordefinierte Style Elemente auskommt.

Ich möchte kein Web-Projekt mehr ohne SCSS und Compass umsetzen und werde von jetzt an auch öfter über meine Erfahrungen, Tricks und andere Dinge rund um CSS schreiben.

Eigentlich benutze ich ja die SCSS Syntax, aber keep it SCSSy klingt einfach blöd.

Bomb It ist die beste und umfangreichste Dokumentation über Graffiti die ich bisher gesehen habe. Von den Anfängen 1967 bis zur heutigen Zeit und einmal um den Globus zeigt diese Dokumentation die verschiedensten Einflüsse, Stile und Beweggründe für Graffiti.

Außerdem sehr schön: Sie geht nicht auf Weltbekannte Sprayer wie Banksy ein. Obwohl London erwähnt wird sieht man kein Banksy Graffiti. Andere Größen wie Marc Ecko (Gründer von Ecko Unltd.) oder Shepard Fairey (Gründer von OBEY Clothing) kommen auch zu Wort und erzählen neben eher Lokal bekannten Sprayern von ihren Anfängen und der Graffiti Kultur.

Der ein oder andere wird vielleicht bemerkt haben, dass ich nicht der größte Befürworte verschiedenster aber besonders der katholischen Religionsgemeinschaft bin. Nun hat jemand in hübscher Pixelgrafik ein altbekanntes und gern vergessenes Thema umgesetzt: zynisch, direkt und mit einer riesen Portion schwarzem Humor behandelt Vatican Quest den sexuellen Missbrauch durch die christliche Kirche.

Als Papst Benedikt XVI “rettet” man kleine Kinder und bringt sie zu Kardinälen – wird man mit einem Kind zusammen von Reportern gesehen verliert man ein Leben.

Lustig ist das Spiel in keiner Weise, aber auf seine eigene Art und Weise verdammt Gesellschaftskritisch. (via superlevel.de)

Übrigens: Wer sich intensiv (und auf direkte, philosophische Weise) mit der christlichen Kirche und ihrer Moral auseinandersetzen möchte dem sei Friedrich Nietzsche – Der Antichrist ans Herz gelegt. Dieses mittlerweile über 100 Jahre alte Werk gibt es für Amazons Kindle kostenlos.

Check out this Pen!

Ich liebe CSS3, gerade wegen so kleinen Spielereien.

Manchmal frage ich mich, ob ich der einzige Mensch bin dem Zensur dermaßen gegen den Strich geht? Ich meine damit Zensur in jeglicher Beziehung, vor allem aber in alltäglichen Dingen. Ich bin 19 Jahre alt, rechtlich gesehen also Erwachsen und damit vollkommen im Stande Entscheidungen zu treffen. Wenn ich Pornographie sehen möchte, dann sehe ich Pornographie, wenn ich einen widerlichen Film mit viel Blut sehen möchte, dann sehe ich einen widerlichen Film mit viel Blut, wenn ich Musik mit Kraftausdrücken hören möchte, dann höre ich Musik mit Kraftausdrücken. So sollte es sein, aber kann ich all das Legal? Nein. Legal gibt mir der Staat vor, was ich sehen darf und was nicht. Spiele werden zensiert, Filme werden zensiert, Schriften werden zensiert oder kommen auf den Index und sind damit nicht mehr frei und Problemlos zugänglich.

Verschaffe ich mir über Umwege Zugang zu zensierten Inhalten bewege ich mich immer zwischen Legal und Illegal, meistens aber mehr auf der Illegalen Seite. Und generell: Was ist alles Illegal? Ist es Illegal, wenn ich mir über einen Proxy Zugang zu einer Website oder Informationen verschaffe, die nicht in meinem Land verfügbar sind? Ist mein Wunsch nach mehr Freiheit also schon ein Grund mich anzuklagen?

Mich stört das extrem. Kategorisierungen à la FSK verstehe ich aber ein geschnittenes FSK 18 Spiel oder einen geschnittenen FSK 18 Film verstehe ich nicht. Darf ich nicht selbst entscheiden was ich sehen möchte? Kann ich nicht selbst entscheiden, was ich sehen/hören/lesen/spielen möchte? Muss der Staat wirklich so sehr in mein Privatleben eingreifen? (Ich sehe Zensur als massiven Eingriff in mein Privatleben)

Meiner Meinung nach muss sich eine Menge ändern. Zensur ist vergleichbar mit der Unterdrückung der Meinungsfreiheit und ich möchte nicht in einer Welt leben, in der mir vorgeschrieben wird welche Inhalte ich wie sehen darf.
Ich möchte Dinge so sehen, wie sie der Ersteller vorgesehen hat. Ich möchte Filme in ganzer Länge sehen können, wenn ich einen Film kaufe. Ich möchte Spiele in voller Länge spielen, so wie die Firma sie erstellt hat. Ich möchte Musik so hören, wie sie geschrieben wurde. Ich möchte keine Zensur in meinem Leben und möchte selbst entscheiden, was ich sehen möchte.