Das unten stehende JS-Snippet versetzt den Browser in den Vollbildmodus und funktioniert in allen gängigen Browsern (Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari)

Achtung: Apple Safari wird nur unter Mac OS unterstützt, denn unter iOS erlaubt Apple für Websites generell keinen Vollbildmodus.

JavaScript-Code

Einschränkungen

Bei der Entwicklung von Websites, die im Vollbildmodus angezeigt werden sollen, sind die folgenden beiden Dinge zu beachten:

Die folgende jQuery-Funktion von Jacek Becela (http://gist.github.com/399624) erlaubt das Abfangen von Klick- und Doppelklick-Events auf ein Element. Werden beide Events mit den jQuery-Standardfunktionen gesetzt, so wird das Klick-Event auch bei Doppelklicks ausgeführt. Sollen beide Events getrennt behandelt werden hilft der folgende Code. Dieser wertet in <= 300ms hintereinanderfolgende Klicks als Doppelklick alle anderen als einfache Klicks.

Aufruf

jQuery("a.doubleclick").single_double_click(function(){
  alert("single click");
}, function(){
  alert("double click");
});

Code

// Author: Jacek Becela
// Source: http://gist.github.com/399624
// License: MIT
 
jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Des öfteren würde man gerne einer per setTimeout oder setInterval aufgerufenen Funktion Parameter mitübergeben. Das folgende Konstrukt hilft dabei.

setTimeout(
   function(){
      ownFunction(param1, param2);
   },1000
);

Will man zwischen einem iFrame und der Hauptseite Daten mittels JavaScript austauschen oder Funktionen auf der anderen Seite aufrufen benötigt man den ansatz von Cross-Site Scripting (XSS).

Dabei gibt es allerdings von Anfang an folgende Einschränkungen:

• Die Hauptseite und der iFrame müssen von der selben Domain aufgerufen werden.
• Dabei ist es auch nicht erlaubt zwischen Subdomains zu kommunizieren
• und zuletzt muss auch der Port (also http/https) übereinstimmen.

Erfüllt man diese Bedingungen steht einem Regen austausch nichts mehr im Wege. Dabei kann dann aus dem iFrame heraus eine Funktion der Hauptseite mittels folgendem Code aufgerufen werden:

Gerade bei Suchfeldern ist das Eingabefeld gerne mit dem Wort "Suchen" vorbefüllt. Damit beim Klicken in das Feld der Text automatisch verschwindet bzw. beim Verlassen wieder hergestellt wird und dabei der Text auch noch direkt aus dem HTML-Code ausgelesen wird gibt es folgendes Code-Snippet:

inputtext = $("input#search").val();
jQuery("input#search").focus(function() {
if(this.value==inputtext) this.value='';
});
jQuery("input#search").blur(function() {
if(this.value=='') this.value=inputtext;
});

Oft werden für verschiedene Browser unterschiedliche JS-Befehle benötigt oder es muss unterschiedlich viel mit JS realisiert werden, hier hilft das Skript "Browser detect" mit dem sich nicht nur Browser-Typ und Version abfragen lassen, sondern auch noch das verwendete Betriebssystem.

Anwendung

• Initialisieren
  BrowserDetect.init();
• Browser-Typ abfragen
  BrowserDetect.browser
• Browser-Version abfragen
  BrowserDetect.version
• Betriebssystem abfrage
  BrowserDetect.OS

Rückgabewerte

• Browser
  OmniWeb, Safari, Opera, iCab, Konqueror, Firefox, Camino, Netscape, Explorer, Mozilla
• Version
  z.B.: 6 oder 7 für IE6 bzw. IE7
• OS
  Windows, Mac, Linux

Skript

Zu finden ist das Skript sammt umfangreicher Dokumentation unter: http://www.quirksmode.org/js/detect.html

Am einfachsten lassen sich Checkboxen in jQuery mit der Abfrage bzw. dem Schreiben des Attributes checked behandeln (checked="" bzw. checked="checked"). Diese Schreibweise ist außerdem xHTML konform.

if( jQuery("#checkbox").attr("checked") ) {
  ...
}
jQuery("#checkbox").attr("checked", "checked");

Die selbe Vorgehensweise funktioniert übrigens auch mit Select-Optionen und selected="" bzw. selected="selected".

PopUps sind generell eine eher lästige Sache, gerade in Applikationen aber manchmal erwünscht. Generell lassen sich PopUps nur per JavaScript öffnen. Damit unsere Webseite aber auch ohne JavaScript funktionstüchtig wird ist es sinnvoll den PopUp-Aufruf erst mittels JavaScript zuzuweisen.

Das folgende Snippet fügt allen Links mit der Klasse "popup_link" den benötigten Funktion hinzu:

$(".popup_link").click(function(){
  fenster = window.open(this.href, "popup", "width=550,height=500,status=no,scrollbars=yes,resizable=yes");
  fenster.focus();
  return false;
});

Externe Links möchte man meistens in einem neuen Fenster öffnen. Gerade bei Systemen mit Redakteuren wird das Setzen des entspechenden target-Attributes aber gerne vergessen. Das untere JavaScript fügt allen absoluten Links das Attribut target="_blank" hinzu. Achtung: interne Links müssen daher immer relativ angegben werden.

jQuery("a").each(function () {
  if ( jQuery(this).attr("href").indexOf("http://") == 0 || jQuery(this).attr("href").indexOf("https://") == 0 ) {
    jQuery(this).attr("target","_blank");
  }
});

Wenn bei GoogleMaps die Karte nicht vollständig geladen wird und immer wieder Quadrate der Karte fehlen, kann eine mögliche Lösung die Angabe einer absoluten Größen beim erzeugen der Map sein. Dazu muss das erzeugende JavaScript modifiziert werden, der Aufruf könnte dann wie folgt aussehen:

var map = new GMap2(document.getElementById("map"),{size : {width:575,height:500}, mapTypes : [G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP]});