Hinweis auf noch nicht gespeicherte Elemente beim Verlassen der Webseite
Kategorie: web-development
Es gibt Momente, an denen man den User daran hindern möchte versehentlich eine Seite zu schließen.
Ein gutes Beispiel dafür ist das Editor Fenster von WordPress. Wird hier eine Änderung nicht gespeichert und das Fenster geschlossen, warnt WordPress, dass die Änderungen verloren gehen, sobald das Fenster geschlossen wird.
Soetwas nachzubauen ist eigentlich ganz einfach und erfordert nur etwas jQuery Code:
Weiterlesen: Hinweis auf noch nicht gespeicherte Elemente beim Verlassen der Webseite »
checkbox onclick submit – AJAX like submit
Kategorie: web-development
checkbox onclick submit
Wofür brauche ich einen checkbox onclick submit?
Manchmal möchte man in einem Formular einer Checkbox beim Klicken gleich eine Aktion mitgeben. Beispielsweise wenn ich im Warenkorb ein ausgewähltes Produkt aus mehreren löschen möchte und der Shop keine einzelnen Buttons, sondern eben “nur” Checkboxen mit zusätzlichem Löschen Button bietet. Hier ist es meiner Meinung nach durchaus sehr sinnvoll beim Klicken auf die Checkbox gleich die Löschung mit anzustoßen.
JavaScript: defer attribute for scripts
Kategorie: Aus dem Leben...
The defer attribute gives a hint to the browser that the script does not create any content so the browser can optionally defer interpreting the script. This can improve performance by delaying execution of scripts until after the body content is parsed and rendered.
via JavaScript: Defer Execution – with the defer attribute of the script element.
Eigenes Klickverhalten in Heatmaps nicht mit protokollieren
Kategorie: Internet
Eine Klick- und/oder Heatmap ist eine feine Sache. Wenn jedoch bestimmte Leute (bspw. die eigenen Mitarbeiter Mitarbeiter) nicht mitprotokolliert werden sollen und es entweder keine feste IP zum blocken gibt und auch keine Möglichkeit besteht ein individuelles Opt-Out Cookie zu verwenden, bleibt noch die Möglichkeit in der Hosts Datei aller Rechner, die nicht protokolliert werden sollen, die Adresse aus der das JavaScript für die Aufzeichnung der Maps geholt wird zu blocken.
Unter Windows ist die Hosts Datei bspw. unter C:\Windows\System32\drivers\hosts zu finden.
Hier muss einfach der DNS Eintrag oder die IP des Dienstes (Quelle des JS) auf bspw. die lokale Maschine umgebogen werden, fertig!
#Eintrag in der Windows Hosts Datei
0.0.0.0 r.clickdensity.comUm das Script von clickdensity zu blocken, einfach diese Zeile in die Hosts Datei eintragen, fertig.
Auf diese Weise kann man übrigens auch diverse Ads ohne Adblocker ausschließen!
CSS browser-size selection mit JavaScript
Kategorie: web-development
Ich habe nach einer Lösung gesucht, das Design einer Webseite abhängig von der Größe des Browserfensters zu gestalten. Das Design sollte bei kleinen Browserfenstern nicht abgeschnitten aussehen und der Inhalt — meist Bilder — jeweils skaliert werden.
Zur Lösung des Problems gibt es leider keine Conditional Comments, oder CSS Selektoren aber einen einfachen Trick mit JavaScript. Mittels $(window).width() kann man nämlich die Fenstergröße abfragen und daraufhin das CSS passend bspw. mit $("#wrapper").css("width", "820px"); manipulieren.
Also einfach im <head></head> ein Skript bspw. wie folgt hinzufügen, und fertig:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
if($(window).width() < 1024)
{
$("#wrapper").css("width", "820px");
$("div#content").css("width", "600px");
$("div#content img").css("max-width", "575px");
}
elseif ($(window).width() < 800)
{
$("#wrapper").css("width", "520px");
$("div#content").css("width", "300px");
$("div#content img").css("max-width", "275px");
}
});
</script>
</script>HTML mit JavaScript (jQuery) nachladen
Kategorie: web-development
Manchmal ist es ganz nützlich den Inhalt einer HTML Seite extern nachzuladen. Beispielsweise ist es unheimlich nützlich, wenn eine vom Shop oder CMS losgelöste Landingpage (Startseite) hinundwieder mit frischem Inhalt versorgt werden will, die Quelldaten des Templates aber im Verzeichnisbaum in der Dunkelheit des Grabens verscharrt sind, oder dieser Inhalt von propriätär gestalteten Templates ferngehalten werden soll. Ist das Templatesystem bereits auf php basierend, ist es indes sehr leicht mit Hilfe eines includes HTML Inhalt nachzuladen.
<?php include('file.html'); ?>Besteht das Templatesystem jedoch aus reinen HTML Dateien, wird es etwas komplizierter. Hier gibt es an sich wohl nur zwei Möglichkeiten: Server Side Includes (SSI) oder JavaScript. Da SSI nicht bei jedem Hoster funktioniert, besteht also im Prinzip nur die Möglichkeit über JavaScript. Mit Javascript lässt sich bspw. der Inhalt von div Elementen sehr einfach manipulieren und somit auch durch einen nachgeladenen Code ersetzen. Dazu stehen hier stellvertretend zwei divs mit je eigener ID, deren Inhalt beim laden der Seite per JS verändert wird
<div id="teaserContent">alternative content</div>
<div id="teaserContent2">alternative content</div> Der alternative content ist dabei sehr wichtig, da sonst User ohne JavaScript an dieser Setlle nur ein weißes Feld ohne jeglichen Inhalt zu sehen bekämen. Der nachfolgende JavaScript Aufruf überschreibt dann den alternative content mit dem Dateien im angebenem Pfad. Er steht absichtlich nicht in einer document.ready() Umgebung, da der Inhalt möglichst schnell und vor dem rest der Seite nachgeladen werden soll.
<script type="text/javascript">
$(function () {
$('#teaserContent').load('landingpage/teaser.html');
$('#teaserContent2').load('landingpage/teaser2.html');
});
</script> Anschließend sei noch geraten, die div Elemente mit der korrekten Größe von vornherein mittels CSS zu versehen, da sonst während des Nachladens die Elemente der Seite springen!
Sicheres Kontaktformular mit jQuery und PHP erstellen
Kategorie: web-development
Ein Kontaktformular ist mit PHP eigentlich schnell erstellt und lässt sich einfachste Weise in jede Webseite einbauen. Was leider oft vergessen wird ist die Sicherheit — nicht nur zum Schutz vor SPAM des Kontaktformular-Administrators, sondern auch zum Schutz vor Injections, die das Skript zum versenden von SPAM unter dem Namen des Webseitenbetreibers missbrauchen können.
Oft wird diese vermeintlich triviale Website-Funktion von Programmier-Anfängern umgesetzt, die keine Erfahrung mit der sicheren Web-Programmierung haben. Solche Skripte prüfen die Formular-Eingaben nicht auf unerlaubte Zeichen – dadurch können sie von Spammern als Spam-Verteiler missbraucht werden … Das oberste Gebot eines jeden Web-Programmierers muss lauten: “Vertraue nichts und niemandem”. Daten, die ein Skript aus HTML-Formularen, POST/GET-Übergabeparametern oder sonstwoher erhält müssen grundsätzlich als potenziell gefährlich angesehen und vor der Verarbeitung “gesäubert” werden. Eine “gesunde” Portion Paranoia ist sehr hilfreich beim Web-Programmieren, auch wenn Auftraggeber oder Vorgesetzte manchmal schief gucken mögen.
Auch wenn man ein Webskript nicht so sicher machen kann wie ein Tresor, lässt sich ein Kontaktformular doch recht einfach absichern. Damit die SPAMmer nicht so einfach freies Futter finden, hier also eine Anleitung, wie ein Formular sehr einfach abgesichert werden kann — und dazu passend ein How-To zur Erstellung eines sicheres Kontaktformulars mit PHP und jQuery
EDIT: ich habe seit der Erstellung des Posts gelernt, dass eine alleinige JS Validierung aus Sicherheitstechnischer Sicht eigentlich gar keine ist, denn: “Die Validierung von Formularen über JavaScript kann zwar nützlich sein, da sie oft schneller ist und die Seite nicht neu geladen werden muss, allerdings ist sie kein Ersatz für eine erneute Validierung der Daten auf der Seite des Servers. Sind die Daten nicht serverseitig validiert worden, kann man davon ausgehen dass sie überhaupt nicht validiert wurden.” [gängige Sicherheitsprobleme im Web
Zudem "hat sich leider immer wieder herausgestellt, das es mit Javascript unmöglich ist, eine Validierung zu garantieren. Irgendwelche Trottel haben Javascript immer ausgeschaltet oder es buggt. " [phpBlogger]
Ich werde demnächst also nur noch eine phpValidierung durchführen, und wohlmöglich mit Hilfe dieser Bibliothek
