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:

Bei Auswahl triggern

Hier ist ein Beispiel dafür, wie man mit Hilfe von .change() bei einer Änderung einer Select Box die Aktion triggern kann, dass beim Schließen der Seite eine Warnung ausgesprochen werden sollte:

jQuery(document).ready(function() {
  /* Die Select Box auf Änderungen abfragen */
  $('.select_box_class').change(function() {
    /* Bei Änderung dem Fenster eine Message "anheften" */
    $(window).bind('beforeunload', function(){
      return "Sie haben Optionen gewählt, die beim Schließen
              der Seite verloren gehen! Sind Sie sicher,
              dass Sie diese Seite schließen möchten?";
    });
  });
});

In einem Shop bspw. den Submit Button auslassen

Nach der oberen Variante zählt zum Verlassen der Seite auch ein submit Button. Das wollen wir natürlich nicht! Also müssen wir beim klick auf den Submit Button dem Fester die angehaftete Message wieder abnehmen (unbind)

jQuery(document).ready(function() {
  /* Die Select Box auf Änderungen abfragen */
  $('.select_box_class').change(function() {
    /* Bei Änderung dem Fenster eine Message "anheften" */
    $(window).bind('beforeunload', function(){
      return "Sie haben Optionen gewählt, die beim Schließen
              der Seite verloren gehen! Sind Sie sicher,
              dass Sie diese Seite schließen möchten?";
    });
  });

  /* Beim Klick auf einen Submit Button */
  $("form").submit(function(){
    /* angehaftete Message wieder entfernen */
    $(window).unbind("beforeunload");
  });
});

Ich habe für ein neues Projekt länger nach einem “Bling Bling” Effekt für jQuery gesucht, der einem Bild den Eindruck geben kann, als würde es von einer Glasoberfläche bedeckt werden und jemand würde die Fläche hin und wieder leicht wenden, so dass darin Spiegelungen zu sehen scheinen (siehe Video). Eines Tages zeigte mir dann meine Kollegin ShineTime.

Eigentlich ist ShineTime eine Fotogallerie mit netten jQuery Effekten — beinhaltet aber eben diesen Effekt den ich so lange gesucht habe! Wenn ich mir für meine Zwecke den Code dazu aber anschaue, werde ich gleich von einer Lawine an jQuery code überrollt. Also habe ich den Code wirklich auf das wesentlichste abgespeckt und möchte euch zeigen, wie einfach dieses “Bling Bling” umgesetzt werden kann.

Das JavaScript

<script type="text/javascript">
jQuery(document).ready(function() {
	 /* When a thumbnail is hovered over do shine */
	$('.large_thumb').hover(function()
	{
		$(this).find(".large_thumb_shine").css("background-position","-99px 0");
		$(this).find(".large_thumb_shine").animate({ backgroundPosition: '99px 0'},700);
	});

	/* endless shine repeating - starting itself */
	setInterval(function() {
	   $('.large_thumb').find(".large_thumb_shine").css("background-position","-99px 0");
	   $('.large_thumb').find(".large_thumb_shine").animate({ backgroundPosition: '99px 0'},700);
	 }, 3000);
});
</script>

HTML

<div class="large_thumb">
   <img src="/images/beta-button.png" class="large_thumb_image" alt="thumb" />
   <div class="large_thumb_shine"></div>
</div>

CSS

.large_thumb{
	float:left;
	position: relative;
	width:74px; height:74px;
	padding:0px 10px 0px 0;
}
img.large_thumb_image{
	position:absolute;
}
.large_thumb_shine	{
	width:74px; height:74px;
	background:url('/images/beta-shine.png') no-repeat;
	position:absolute;
	background-position:-150px 0;

        /* nur notwendig wenn der Button rund ist */
	-moz-border-radius: 37px;
	-webkit-border-radius: 37px;
	border-radius: 37px;
}

voila!
Eine DEMO gibt es derzeit auf vaxo.de

h5Validate – The HTML5 Form Validation Plugin for jQuery.

Simple automatic “flash” slideshow using HTML and jQuery.

für den Quellcode / Source gehts hier lang

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> 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>

Aus SEO’s Sicht ein Fluch und Segen zugleich. Einerseits lassen sich so im “alternative content” viel Roboter-freundlichere Texte unterbringen, die der normale User der Seite als abgehackt und grammatikalisch falsch empfinden würde, anderseits muss der “alternative content” mit jeder Änderung des nachgeladenen Contents händisch aktualisiert werden.

Glaubt man SEO Meinungen, die besagen, dass der SEO dem Genitiv sein Tod sei und die SEO Grammatik ein Fall für sich sei so ließe sich der “anderseits Teil” eher vernachlässigen und die Tatsache, dass der nachgeladene Inhalt für die Robots nicht sichtbar ist, eher als Gewinn (aus SEO’s Sicht) betrachten.

Zum Tutorial: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

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