Category Archives: Javascript

Vollbild-Modus im Browser

Posted on by
Reply

Nachfolgend eine komplettes Beispiel mit jQuery und der neuen Fullscreen-API ein HTML-Element im Vollbild-Modus anzuzeigen. Funktioniert nur in den neusten Browser von Safari, Firefox und Chrome und sieht auch nur im Firefox gut aus… aber hier gehts einfach nur um die Funktion.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="jquery.js"></script>
  <style>
    .white {
      font-family:verdana;
      margin-top:200px;
    }
    .white div
    {
      background-color:white;
      width:50%;
      margin:auto;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 5px 5px grey;
      -webkit-box-shadow: 5px 5px grey;
      box-shadow: 5px 5px grey;
      padding:25px;
    }
    .hidden {
      display:none;
    }
  </style>
</head>
<body>
 
<div id="fullscreen-container">
  <div>
    <div>
      Here is your Fullscreen!
    </div>
  </div>
</div>
<p>
  <a href="#" id="fullscreen-link">Show me fullscreen container...</a>
</p>
<script type="text/javascript">
//<![CDATA[
(function($) {
  $.fn.extend({
    fullscreen:function(params) {
      var conf = {};
      $.extend(conf, params);
      return $(this).each(function() {
          var e=$(params);
          var element=e[0];
          $(this).click(function() {
              e.removeClass('hidden');
            if(element.requestFullScreen) {
              element.requestFullScreen();
              jQuery(document).bind("fullscreenchange", function() {
                if(!document.fullScreen) e.addClass('hidden')
              });
            }
            else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen();
              jQuery(document).bind("mozfullscreenchange", function() {
              if(!document.mozFullScreen) e.addClass('hidden')
            });
            }
            else if (element.webkitRequestFullScreen) { 
              element.webkitRequestFullScreen();
              jQuery(document).bind("webkitfullscreenchange", function() {
                  if(!document.webkitIsFullScreen) e.addClass('hidden')
              });
            }
          });
      });
    }
  });
})(jQuery);
 
jQuery('#fullscreen-link').fullscreen('#fullscreen-container');
 
//]]>
</script>
</body>
</html>

 

Ein Datum mit Javascript

Posted on by
Reply

Javascript bietet das Date-Objekt an, um mit einem Datum arbeiten zu können. Wir können leicht ein solches Objekt erstellen:

var myDate1 = new Date(2011, 12, 13, 21, 30, 00);
var myDate2 = new Date(2011, 12, 13);

Das Objekt selbst bietet Funktionen an, um Eigenschaften des Objekts auszulesen oder zu manipulieren:

  • getDate() liefert den Monatstag
  • getDay() liefert den Wochentag
  • getMonth() liefert den Monat
  • getFullYear() liefert das Jahr (vierstellig)
  • getHours() liefert die Stunden der Uhrzeit
  • getMinutes() liefert die Minuten der Uhrzeit
  • …

Eine vollständige Liste findet sich z. B. auf der SELFHTML Referenz. Nun möchte man vielleicht mit einem Datum rechnen oder Vergleiche anstellen, eine Benutzereingabe validieren oder ähnliches. Dazu müssen wir in der Regel noch einiges “drumherum” programmieren. Unterstützung kann hier eine Datumsbibiothek bringen.

Datejs

Datejs

Datejs - An Open Source JavaScript Date Library

Das Projekt ist schon älter und das letzte “offizielle” Release wurde 2007 veröffentlicht. Auf der Projektseite wurde die Bibliothek weiter über 1.000.000 mal heruntergeladen. Datejs erweitert das Date-Objekt selbst, d. h. es stehen zusätzliche Funktionen zur Verfügung. Nachfolgend ein kleiner Auszug:

  • Date.today() liefert das aktuelle Datum.
  • Date.today().next().friday() liefert das Datum des nächsten Freitags
  • Date.last().week() liefert das Datum vor einer Woche
  • Date.today().addDays(n) addiert n Tage zu dem aktuellen Datum.
  • …

Mehr Beispiele finden sich der Projektseite.

Außerdem kann man das Datumsobjekt auch komfortabel setzen:

var time = {hour:18, minute:15};
Date.today().at(time); // heute um 18:15 Uhr

var mydate = {month: 1, day: 20, hour: 20, minute: 30};
Date.today().set(mydate); // aktuelles Jahr, 20. Januar um 20:30 Uhr

Die Bibliothek bietet noch viel mehr Funktionen z. B. für das Parsen von Strings oder für Datumsvergleiche. Wenn wir beispielsweise ein Anfangs- und Enddatum haben und prüfen wollen, ob ein bestimmtes Datum innerhalb dieser Zeitspanne liegt, so kann das mit folgender Zeile geprüft werden:

Date.today().between(startDate, endDate) // true|false

Eine Lokalisierung von Ausgaben ist möglich. Es gibt bereits fertige Spracherweiterungen

<!-- de-DE (deutsch) -->
<script type="text/javascript" src="date-de-DE.js"></script>

Moment.js

Eine weitere, relative junge “Date Library” ist Moment.js. Anstatt das Date-Objekt zu erweitern, wird hier mit einem Wrapper gearbeitet.

var mydate = moment(new Date(2011, 12, 13));

Mit diesem Objekt kann ähnlich wie unter Datejs gearbeitet werden:

mydate.add('days', 11); // addiert 11 Tage
mydate.subtract('months', 1); // ein Monat zurück
mydate.year(2012); // setzt das Jahr auf 2012

Eine Differenz kann folgendermaßen berechnet werden:

var a = moment([2011, 12, 24]);
var b = moment([2011, 12, 25]);
a.diff(b);

Ab und zu braucht man vielleicht auch wieder das Date-Objekt:

mydate.native();

In der Dokumentation habe ich leider keinen Hinweis gefunden, um zu prüfen, ob ein Datum zwischen zwei Zeiträumen liegt. Vom Umfang her ist diese Bibliothek natürlich schön schlank. Eine Lokalisierung ist auch möglich.

Zeilenumbrüche mittels Javascript umwandeln

Posted on by
Reply

Der folgende Javasript-Code orientiert sich an der nl2br-Funktion der php.js Seite. Ich habe die Funktion nl2html benannt, die noch flexibler verwendet werden kann. Da das Javascript String Objekt erweitert wird, läßt sich die Funktion ganz einfach verwenden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript">
   //<![CDATA[
   String.prototype.nl2html = function() {
      return (this + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ 
             ((typeof arguments[0] === 'undefined') ? '<br />' : arguments[0]) +'$2');
    };
  //]]>
  </script>
  <style type="text/css">
    br.foo {
      border:1px solid black;
    }
  </style>
</head>
<body>
 
<div id="test">
Das ist ein
Text mit Zeilenumbrüchen
...
</div>
<div id="test2"></div>
 
<script type="text/javascript">
  var el=document.getElementById('test');
  var val=el.innerHTML;
  document.getElementById('test').innerHTML=val.nl2html();
  document.getElementById('test2').innerHTML=val.nl2html('<hr />');
</script>
</body>
</html>

jQuery load Problem mit IE

Posted on by
Reply

Ich hatte das Problem, dass der Internet Explorer 8 das jQuery Load-Event nicht auslöst, sobald das Bild im Cache des Browsers liegt.

jQuery('#meinImg').load(function() { //... }); // works only with non cached images in ie

Ein Lösungsansatz wäre jeder Bild-Url einen Parameter mit einem Zeitstempel anzuhängen. Damit hat man jedoch das Problem, dass unnötige HTTP-Request entstehen und die Bilder bei jedem Seitenaufruf neu vom Server geladen werden.

Für mich hat folgendes funktioniert:

if(jQuery('#meinImg').height()>0)
  myCallbackFunction();
else
  jQuery('#meinImg').load(myCallbackFunction);

 

Zend Controller produziert JSON

Posted on by
Reply

Damit ein Controller in einer Zend Applikation kein Layout ausgibt bzw. auch keine View-Dateien verarbeitet, genügen zwei Zeilen im Controller:

$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);

Dadurch wird keinerlei Markup ausgegeben.

Ein möglicher Anwendungsfall sind Webseiten, die Inhalte per AJAX nachladen. Das kann mittels jQuery leicht über folgende Funktion realisiert werden:

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

Der Parameter url ruft eine Aktion eines Controllers auf, der eben nur JSON zurückliefert. Dies kann anschließend im Javascript weiterverarbeitet werden.

Update:

Noch einfacher geht es über folgenden Helper:

$this->_helper->json($data);

 

Javascript ist cool

Posted on by
Reply

Ich muß immer wieder staunen, was mit Javascript alles möglich ist. Fabrice Bellard hat Linux auf Javascript portiert (http://bellard.org/jslinux). Niklas von Hertzen stellt mit html2canvas ein Skript vor, dass Webseiten in ein Canvas-Element rendert (http://html2canvas.hertzen.com/). Mit Javascript wird das Web lebendig – erst damit wurde Web 2.0 möglich. Also ich bin ein bekennender Fan :-)