Untitled

I dynamically generate MediaQueries from Zurb Foundation breakpoints for a grid with the following Sass code:

$i: 2;
@each $s,
$breakpoint in $breakpoints {
    @media (min-width: $breakpoint) {
        div.grid {
            .element {
                width: calc(100%/#{$i});
            }
        }
    }
    $i: $i+1;
}

In my case, it generates the media queries for all breakpoints defined for the Zurb Foundation Framework in the Sass array $breakpoints. For each breakpoint, it increases the number of elements displayed in a row of the grid by adjusting its width, starting with two elements for the smallest screen width. Of course, for the .element, the display property must be set to inline-block.

Loading Likes...

Ist ein Objekt mit einer Eigenschaft in meinem Array?

Mit folgendem Code können Sie testen, ob ein Objekt in einem Array ‘array’ eine Eigenschaft ‘property’ mit dem Wert ‘value’ hat.

// test if a object located in 'arrray' has a 'property' which equals 'value'
var isInArray = function (array, property, value) {
for (var i=0; i < array.length; i++) { if (array[i][property] === value) return true; } return false; };
Loading Likes...

Angular & Onsen.io

Nahezu drei Tage brachte ich es einfach nicht hin, dass meine Angular Applikation mit onsen.io macht, was sie sollte. ng-repeat waren im DOM-Baum auskommentiert, ng-click reagierten nicht.
Nun endlich ist mir das Problem aufgefallen und bewusst geworden. Die ng-controller dürfen nicht auf einem angewendet werden, sondern dürfen frühestens bei der als Attribut gesetzt werden. Ich hoffe ich kann mit dieser Beobachtung anderen solch schweres Kopfzerbrechen verhindern.

Loading Likes...

JavaScript: Windows Phone Hardware Backbutton abfangen

Bei der Programmierung einer Windows Phone Applikation mit JavaScript kann der “zurück”-Button unten links am Smartphone natürlich auch abgefangen werden, um eine alternative Tätigkeit als zum Beispiel das Beenden der Applikation herbeizuführen. Im folgenden möchte ich die Vorgehensweise erklären.

In der entscheidenden HTML-Seite muss ein WinJS Application Control Element mit den Parameter onbackclick : meineFunktion erstellt werden, wobei meineFunktion der Funktion entspricht, die aufgerufen wird, wenn der Backbutton angeklickt wird. Dies sollte ungefähr folgendermassen aussehen:

<div data-win-control="WinJS.Application." data-win-options="{onbackclick : meineFunktion}" />

Anschliessed kann der EventHandler “backclick” verwendet werden. Zum Beispiel so:

document.addEventListener("backclick", meineFunktion);

Um jedoch das Standardverhalten, das Beenden der Applikation, zu unterdrücken, muss true zurückgegeben werden. Eine empfehlenswerte Verwendung ist folgende, in der Datei default.js:

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><code class="language-javascript">app.onbackclick = function (evt) {
   meineFunktion();
   return true;
}
Loading Likes...

JavaScript – die schlechten Seiten

Haben Sie mal versucht, in JavaScript 1 + 2 mit 3 zu vergleichen? Oder undefined einen Wert zuzuordnen?
Versuchen Sie es jetzt. Sind die Ergebnisse befriedigend?

JavaScript ist eine sehr kontroverse Programmiersprache. Sie bietet zwar Ansätze einer Objektorientierten Programmiersprache, ist schlussendlich aber bloss prototypenbasiert.

Das Problem von JavaScript sind wohl die vielen Köche, die den Brei verderben, um es metaphorisch auszudrücken.

Im folgenden möchte ich nicht JavaScript bashen oder so – Ihre Meinung dürfen Sie sich selber bilden. Ich möchte Ihnen jedoch einige weitere Beispiele von meiner Meinung nach abnormalen Möglichkeiten nennen.

  • Zählen Sie “4” und 4 zusammen.
  • Ziehen Sie 4 von “4” ab.
  • Vergleichen Sie parseInt(“06”) mit parseInt(“09”)
  • Kontrollieren Sie 0 == “”, false == “0”, und Varationen

Ich wünsche Ihnen viel Spass damit – wenn Ihnen weitere Beispiele einfallen, die Ihrer Meinung nach Wert sind, in diese Liste aufgenommen zu werden, so schreiben Sie sie in die Kommentare!

Update:
Weitere unterhaltende Beispiele finden sich auch in folgenden Video: https://www.youtube.com/watch?v=2pL28CcEijU (wobei ich nicht jedes WTF als solches bezeichnen würde)

Loading Likes...

Element mit CSS in der Mitte positionieren

Um ein Element in der Mitte eines anderen Elements mit CSS zu positionieren muss man unter Umständen etwas improvisieren.

Für die horizontale Mitte ist es keine Schwierigkeiten. Folgendermassen mache ich es jeweils:

.container {
  display: block;
  text-align: center;
  width: 100%;
}

.child {
  position: relative;
  margin: auto;
}

Um aber die vertikale Mitte zu erreichen, ist es leider ein wenig schwieriger und vor allem kontextabhängig.

Wenn das Layout aus Tabellen besteht, so reicht vertical-align : middle;. Leider funktioniert dies nicht mit anderen Elementen wie zum Beispiel einem p in einem div.
Diese könnte man per CSS mit

.container {display: table;}

.child {
    display: table-cell;
    vertical-align: middle;
}

zu einer Tabelle machen.

Wenn bloss eine einzelne Zeile Text zentriert werden soll, so kann man dies mit line-height: Irgendwieviele px; erreichen.

Für block Elemente, die man nicht zu einer Tabelle machen möchte, gibt es noch die Möglichkeit von negativem margin und absoluter positionierung. Das sähe zum Beispiel folgendermassen aus:

.container {
  position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Diese Lösungen funktionieren in den meisten Browsern, jedoch leider nicht mit allen HTML Tags. Es gibt ausserdem noch weitere Lösungen, mit denen ich jedoch noch keine Erfahrungen gemacht habe. Was haben Sie für Erfahrungen gemacht? Welche Lösung bevorzugen Sie? Schreiben Sie Ihre Antwort in die Kommentare oder senden Sie sie mir per e-Mail.

Loading Likes...

Logarithmen von Hand ziehen

Wie zieht ein Taschenrechner den Logarithmus? Dieser Frage möchte ich in diesem Beitrag nachgehen und mit HTML und JavaScript den ersten Schritt eines entsprechenden Logarithmus-Zieher programmieren.

Von logb() zu lg()

Zuerst lohnt es sich, die Umrechnungsformel zum Zehnerlogarithmus anzusehen: logb(x) = loga(x) / loga(b)
Somit gilt logb(x) = log10(x) / log10(b) und den einzigen Logarithmus, der noch zu ziehen ist, ist der dekadische, auch geschrieben als lg().

Was soll das denn bringen? Den Logarithmus von 10 zu ziehen ist um Welten einfacher, als von den meisten anderen Zahlen. Ausserdem muss man so nur eine Weise einprogrammieren, wie der Logarithmus gezogen werden soll, und nicht für jeden anderen Logarithmus wieder einen eigenen Weg.

Den Logarithmus von 10 ziehen

Soweit so gut. Damit können wir uns ganz darauf konzentrieren, den Logarithmus von 10 zu ziehen. Beginnen wir zuerst mit dem einfachen Teil: wir erstellen ein Formular, in das der Nutzer seine Zahl eingibt, von der er den 10. Logarithmus gezogen haben will. Da wir nicht auf Math.log() oder ähnliches zurückgreifen möchten, werden wir auch auf Math.pow() und jQuery verzichten. Dass der Code dadurch nicht mehr so elegant wirkt ist Nebensache – er muss bloss den Zweck erfüllen.
Das könnte folgendermassen aussehen:

<form> 
<-- Ein Input Feld für die Zahl, --> 
<input type="text" id="zahl" size="40" placeholder="Zehnerlogarithmus von..." /> 
<-- ein Button um die Berechnung zu starten (der losHandler() wird gestartet) da wir das Programm ohne jQuery schreiben, ist es vertretbar, dass wir ein wenig Script im HTML Code verstecken (onclick) und die Trennung von Model, View und Controller missachten --> 
<input type="button" id="los" value="Los!" onClick="losHandler(); return false;" /> 
</form>
<-- und ein Output Paragraph für das Ergebnis. --> 
<p id="ergebnis"></p>

Danach schreiben wir den losHandler(). Dieser soll die Nutzereingaben lesen und verwerten können, sowie die wahre Logarithmusfunktion starten.
So kann man das lösen:

function ausweg(eingabe) {
/* Wenn der Nutzer eine Zahl kleine als 1 eintippt, sind wir machtlos mit unserer Methode */
return Math.log(eingabe) / Math.LN10;
}
function losHandler() {
/* für mögliche spätere Versionen die Basis variabel halten */
var basis = 10;
/* die Eingabe auslesen */
var eingabe = document.getElementById("zahl");
/* den Output Paragraphen vorbereiten */
var ergebnis = document.getElementById("ergebnis");
ergebnis.innerHTML = "";
eingabe = parseFloat(eingabe.value);
/* Eingaben valieren */
if (eingabe === null) {
alert("Keine Eingabe erhalten!");
}
/* für verschiedene Browser... (und zur bestimmten Absicherung) */
else if (eingabe === "") {
alert("Keine Eingabe erhalten!");
} else if (eingabe === undefined) {
alert("Keine Eingabe erhalten!");
} else if (isNaN(parseInt(eingabe))) {
alert("Bitte geben Sie nur Zahlen ein!");
} else if (eingabe < 0) {
alert("Bitte geben Sie nur Zahlen grösser als Null ein!");
/* und sonst Resultat ausgeben */
} else if (eingabe < 1) {
ergebnis.innerHTML = "log" + basis + "" + eingabe + " = " + ausweg(eingabe);
} else {
ergebnis.innerHTML = "log" + basis + "" + eingabe + " = " + log(eingabe, basis);
}
}

Der Ausweg ist nötig, da die von uns geschrieben werdende Funktion nicht imstande sein wird, Eingaben kleiner als 1 zu verarbeiten.
Kommen wir nun also zur Funktion log(), dem Herzstück unseres Kunstwerks, die den Logarithmus zur Basis zehn berechnet:

function log(wert, basis) {
var zahl = wert;
var gesucht = "";
/* eigentliche Rechnung. Gibt den Logarithmus mit 15 Stellen aus */
for (var i = 0; i < 15; i++) {
var a; c = 0;
for (a = 0; zahl >= power(basis, a); a++) {
c++;
}
c = c - 1;
zahl = zahl / (power(basis, c));
zahl = power(zahl, basis);
gesucht += c;
if (i === 0) {
gesucht += ".";
}
}
return gesucht.replace("0000000000", "0");
}

Wir beschränken uns immer nur auf eine Ziffer, genauer: auf die i-te Ziffer. Wir zählen dann die temporäre Zahl c in Einerschritten rauf, bis sie grösser ist oder entspricht dem eingegebenen Wert beim ersten Mal, die anderen Male die Eingabe ohne die vordersten i Ziffern. Die hinteren Ziffern werden jeweils mit zahl = power(zahl, basis) nach vorne geschoben.

Und für was steht power()? Das ist unser Ersatz für Math.pow(). Ja, zugegeben, diese Namenswahl ist nicht sehr einfallsreich. Dafür zwecksmässig. Die Funktion power() ist nicht sehr schwer und ziemlich selbsterklärend:

function power(basis, exponent) {
/* damit Potenzgesetze eingehalten werden */
if (exponent === 0) {
return 1;
}
/* Potenzfunktion */
else {
var k = basis;
for (var u = 1; u < exponent; u++) {
k = k * basis;
}
return k;
}
}

Damit ist unser Code komplett. Wenn Unser Code nicht einleuchtend ist, so schreib Deine Frage in die Kommentare.

Teste den Code hier aus:

Loading Likes...