jQuery Alternative zu “return false”

Posted on : 11-08-2010 | By : DKl3in | In : Entwicklung

Schlagwörter: , ,

0

jQuery bietet eine gute Alternative zu einem "return false;"
und zwar die Methode "event.preventDefault()".

Jetzt stellt sich die Fragen,
welche Vorteile bringt die Verwendung dieser Methode gegenüber einem
normalen "return false;"?

Um diese Frage zu beantworten muss ich hier erstmal erklären,
was "return false;" eigentlich bewirkt.
Im Prinzip macht es nichts weiter, als zu verhindern,
dass ein bestimmtes Ereignis ausgeführt wird.
Z.B. kann es ein"click event" sein, welches ein Popup öffnet oder einfach nur eine Klasse ändert. In den meisten Fällen wird hierfür ein "a-Tag" (Anker/Link) verwendet.
Der Aufruf von "return false;" verhindert, dass die Standard Eigenschaft, in diesem Fall der Aufruf der URL im "href"-Attribut, ausgeführt wird.

So weit, so gut, genau das gleiche macht auch der Aufruf von "event.reventDefault()", jedoch mit einem kleinen Unterschied. Normalerweise wird ein "Event" durch den DOM einer Seite nach oben gereicht, was heisst, dass z.B. ein "click event" auf einen Link in einer Tabelle auch gleichzeitig ein "click event" auf die Tabelle selbst ist.
Ein "return false;" jedoch, verhindert auch dieses durchreichen,
was vielleicht nicht immer gewollt ist.

Wem dieses durchreichen von "Events" im DOM völlig unbekannt ist,
sollte sich einen wirklich guten Artikel auf Quirksmode.org durchlesen.

Möchte man jetzt jedoch auch dieses "Durchreichen der Events" verhindern, könnte man natürlich auf "return false;" zurückgreifen, oder den etwas eleganteren Weg mit einer weiteren jQuery Methode einschlagen, und zwar mit "event.stopPropagation();".

Zusammenfassen kann man also sagen:

1
2
3
function() {
  return false;
}

entspricht in jQuery:

1
2
3
4
function(event) {
  event.preventDefault();
  event.stopPropagation();
}

Meiner Meinung nach, erhält man ein wenig mehr Kontrolle über das gewünschte Ergebnis, als nur ein einfaches "return false;" zu verwenden.

 

Klicks ausserhalb von Elementen abfangen

Posted on : 23-07-2010 | By : DKl3in | In : Entwicklung

Schlagwörter: , ,

0

Jeder steht sicherlich irgendwann einmal vor dem Problem, dass er eine Layer, ein Menu oder sonsst etwas schließen muß, wenn man irgendwo anders hinklickt als auf das geöffnete Element.
jQuery bietet da eine sehr schöne Lösung an.

Angenommen man hat einen Layer mit der ID #Layer, und m&oul;chte darin klicken und machen was man will, jedoch wenn man ausserhalb des Layers klickt, soll dieses verschwinden.

Eine einfache Version würde wie folgende aussehen:

1
2
3
4
5
6
7
$('body').click(function() {
  $('#Layer').hide();
});
 
$('#Layer').click(function(event){
     event.stopPropagation();
});

Ich verwende sehr gerne den "bind" Befehl von jQuery, da würde das ganze in etwa so aussehen:

1
2
3
4
5
6
7
8
9
10
11
$('body').bind({
	click: function() {
		$('#Layer').hide();
	}
});
 
$('#Layer')bind({
	click: function(event){
     		event.stopPropagation();
	}
});

Auf den ersten Blick macht das ganze nicht viel mehr Sinn, doch, bietet der "bind" Befehl die Möglichkeit gleich mehrere EventHandler zu definieren und des Weiteren kann man mit der "unbind" Funktion die Handler ganz leicht wieder entfernen, falls man diese nicht mehr benötigt.

jQuery bind Problem

Posted on : 20-07-2010 | By : DKl3in | In : Entwicklung

0

Heute habe ich einige Zeit, mit einem jQuery Problem verbracht. Als einfaches Beispiel soll folgenden Aufgabe dienen:

Es sollen alle Links in einer Seite mit einem "onclick" versehen werden, der den Index des Links per "alert" ausgibt.

Barrierefreiheit und Flash

Posted on : 14-04-2010 | By : DKl3in | In : Entwicklung

0

Mit dem Thema Barrierefreiheit, der Anwendung und Umsetzung der BITV bzw. WCAG beschäftige ich mich schon seit einigen Jahren, doch bei Seiten mit Flash, ob Filme, Navigationen oder ähnlichem gilt eigentlich immer die Regel, dass man eine Alternative in HTML anbieten sollte, was sicherlich immer noch gilt, jedoch was ist, wenn jemand den Flashplayer installiert hat, aber z.B. Gehörlos ist, oder einfach nur keine Maus bedienen kann und auf die Bedienung per Tastatur angewiesen ist ?

Drupal entschlacken und nur benötigte CSS Dateien laden

Posted on : 28-01-2010 | By : DKl3in | In : Entwicklung

0

Ich beschäftige mich noch nicht lange mit Drupal, doch was mir gleich als erstes aufgefallen ist, dass jedes Modul und auch Drupal selber, eigene CSS Dateien in den Header hinzufügt, auch wenn man diese gar nicht benötigt, bzw. diese wieder mühselig überschreiben muss.

Also habe ich mich auf die Suche gemacht eine Lösung für dieses Problem zu finden, und habe sie auch gefunden.

Drupal Variablen in Nodes

Posted on : 27-01-2010 | By : DKl3in | In : Entwicklung

0

Die Ausgabe von verfügbaren Variablen in einer *.tpl.php Datei (in Nodes), erreicht mit:

1
<pre><?php print_r($node)?></pre>

Hat man die Variable gefunden welche man benötigt, kann man diese wie folgend ausgeben:

1
2
 
<?php print $node->title ?>

Nützlich ist auch :

1
2
 
<?php print $content ?>

Dieser Aufruf gibt alle Content Informationen aus, diese Ausgabe verhält sich jedoch nicht immer gleich, so kann z.B. der Titel mal enthalten sein und ein anderes mal fehlt er. Oder auch:

1
2
 
<?php print $submitted ?>

Hiermit erhält man z.B. Informationen über den Eintrag, wann und von wem wurde der Eintrag verfasst. Oder:

1
2
 
<?php print $links ?>

Zeigt z.B. Links zum Kommentiere an.

Zen Coding

Posted on : 24-11-2009 | By : DKl3in | In : Entwicklung

0

Durch Eric A. Meyer bin ich auf einen Artikel von Smashing Magazine aufmerksam geworden,
er heisst “Zen Coding: A Speedy Way To Write HTML/CSS Code”
Dieser Artikel ist ein MUSS, für jeden der HTML/CSS schreibt,
es erleichtert wirklich einiges, habe es jetzt zwar nur einen kurzen
Moment getestet, aber ich denke ich werde nicht mehr ohne leben können.

Was ist Zen Coding ?
Ganz einfach, man verwendet eine CSS Syntax mit dem man den HTML Code erstellen
kann. Das sieht wie folgend aus:

div#content>h1+p

und erhält:

<div id="content">
	<h1></h1>
	<p></p>
</div>

Neugierig geworden ? Dann einfach in den Artikel sehen:

Zen Coding: A Speedy Way To Write HTML/CSS Code

Digging into WordPress

Posted on : 12-11-2009 | By : DKl3in | In : Entwicklung

0

Digging into WordPress Seit gestern ist es nun zu haben, das Buch: "Digging Into WordPress". Nach fast einem Jahr sind über 400 Seiten voll mit allem, was man über WordPress wissen muss. Vielleicht nicht mit allem, denn dieses Buch fängt da an, wo die normalen WordPress Anleitungen aufhören. Es wird erklärt, wie man WordPress als CMS benutzen kann, es Absichert, oder SEO optimiert.Aber es geht noch tiefer, man bekommt auch vermittelt, wie WordPress funktionert und mann es so anpassen kann, wie man es benötigt. Jeder Euro hat sich gelohnt, und es ist ein wirklicher Geheimtip. Momentan ist nur die PDF Version verfügbar, die Print Version lässt noch etwas auf sich warten,aber es lohnt sich, den mit dem Coupon Code DIWCSS kann man in den nächsten 9 Tagen 5$ sparen. Desweiteren soll das Buch kein "totes" Buch sein, und ständig erweitert werden und uptodate gehalten werden, diese Updates bekommt man als "Lifetime Subscription" kostenlos dazu. Werft einen Blick darauf, es lohnt sich. Digging into WordPress

 

Free Image Caousels for Webdevelopers

Posted on : 10-11-2009 | By : DKl3in | In : Entwicklung

0

I found a great summary of image carousels, maybe its usefull, some day.
Free Image Caousels for Webdevelopers

SQLite AdminstrationsTool Adobe AIR

Posted on : 02-11-2009 | By : DKl3in | In : Entwicklung

0

Es ist gar nicht so lange her, da habe ich ein Tool gesucht mit dem ich eine SQLite Datenbank bearbeiten kann, und habe nur ein Plugin für den Firefox gefunden, es funktioniert, ist aber sicherlich nicht die beste Lösung.
Nun ist mit Lita in die Hände gefallen, ein sehr schönes kleines Tool welches mit Adobe Flex programmiert wurde, und selbständig als Adobe AIR Programm läuft.
Die ersten Test waren zwar nur Oberflächlich, aber das Programm hat erstmal keinen schlechten Eindruck hinterlassen, und daher kann ich nur den Tipp geben,
es einfach mal auszuprobieren.