textnode die digitalen Abenteuer des Andreas T.

21Feb/080

Bug im IE beim Setzen von name Attributen mit JavaScript

Der IE scheint Probleme damit zu haben, wenn man name Attribute nachträglich mit JS verändert. Das DOM wird zwar entsprechend angepasst, jedoch reagieren z.B. Radio Buttons nicht darauf. Die verhalten sich unverändert.
Wird ein leeres name Attribut gesetzt, lassen sich die Radio Buttons gar nicht mehr auswählen.

Fehler trat im IE6 auf. Ist das im IE7 auch so?

25Jul/070

textNode erstellen mit JavaScript

Da viele Leute auf der Suche nach dem Umgang mit TextNodes oft hier landen, werde ich mich diesem Thema mal annehmen. Einfacher und von der Geschwindigkeit besser als ueber DOM-Operationen kann man auch die Eigenschaft innerHTML benutzen um Text an eine bestimmte Stelle des DOMs zu setzen, aber hier wollen wir uns anhand eines Beispiels die Methode mit createTextNode ansehen, die von vielen als sauberer erachtet wird:

Zuerst wird ein Text-Objekt erstellt und in einer Referenz gespeichert:

var textNode = document.createTextNode("Inhalt");

Mit appendChild wird der neue Kotenpunkt an einen bestehenden angehaengt. Ueber nodeValue kann man dann auf den Inhalt des Knotens zugreifen:

container.appendChild(textNode);
alert( container.firstChild.nodeValue );

Hier ist der vollstaendige Beispielcode. Hier wird auch gezeigt, wie man eine Node aus dem DOM wieder entfernt:


<head>
<title>textNode erstellen mit JavaScript</title>

<script type="text/javascript">
  function init() {
    var textNode = document.createTextNode("Inhalt");
    var container = document.getElementById('container');
    container.appendChild(textNode);
    alert( container.firstChild.nodeValue );
  }

  function remove() {
    var container = document.getElementById('container');
    container.removeChild(container.firstChild);
  }
</script>

</head>

<body onload="init()">

  <p id="container"></p>
  <a href="javascript:remove()">entfernen</a>

</body>
6Jul/070

Erster Blick auf Adobe AIR

Adobe hat die Beta von AIR (Adobe Integrated Runtime, ehemals Apollo) freigegeben und so habe ich mich daran gemacht den Umgang mit HTML, CSS und JavaScript genauer unter die Lupe zu nehmen. AIR sorgt dafür, dass HTML, JavaScript, ActionScript, Flex und Flash wie lokale Programme ausgeführt werden können. Der Applikation steht sogar eine SQLite DB zur Verfügung. Über die AIR API bekommt man Zugriff auf Dateien und Verzeichnisse, kann aber immer noch, so einfach wie vorher auch, Daten aus dem Netz beziehen.

Was mich anfangs am meisten verwirrt hat, ist der schwimmende Übergang zwischen JavaScript und ActionScript. Aus der HTML-Seite heraus lassen sich native Flash-Klassen aufrufen. An einer Stelle, so habe ich gelesen, ist sogar das Flash Array dem JS Array vorzuziehen. Wenn man sich erstmal daran gewöhnt hat die API zu benutzen, macht es allerdings keine Probleme.

Ansonsten besteht eigentlich kein großer Unterschied zwischen der Erstellung einer Web-Applikation mit traditionellen Mitteln oder einer Offline-Applikation mit AIR. CSS formatiertes HTML wird sauber dargestellt, JavaScript läuft schnell und einwandfrei. Sogar JS-Libraries wie jQuery machen keine Probleme. Der einzige Punkt den ich bemängele - und genau dieser hat mir bei meinem kleinen Testprojekt gefehlt - ist die fehlende Möglichkeit Programme aufzurufen. In den FAQs von Adobe.com steht, dass dieses Feature vielleicht in Version 1.0 vorhanden sein wird. Dieses würde ich sehr begrüßen.

Du brauchst Flash!

Tagged as: No Comments
20Jun/070

Multiple File Uploads

HTML allein bietet leider nicht die Moeglichkeit mehrere Dateien auf einmal hochzuladen. Zum Glueck gibts es dafuer inzwischen mehrere Loesungen.

SWFUpload sieht schon auf den ersten Blick erstklassig aus und wurde von verschiedenen Seiten hoch gelobt. Mein erster Test des Scripts war allerdings etwas ernuechternd. Aus mir unerklaerlichen Gruenden wollte es einfach nicht funktionieren. Nach etwa 1 Stunde gab ich auf und sah mich nach Alternativen um.

Eine sehr gute habe ich im "Multiple File Upload plugin for jQuery" gefunden. Da ich derzeit sowieso sehr von jQuery begeistert bin und es schon im Projekt eingebunden wurde, war mir diese Loesung sehr recht. Das Script funktionierte auf Anhieb und lies sich auch relativ einfach an spezielle Beduerfnisse anpassen. Einige Standarteinstellungen wie maximale Anzahl der Dateien oder akzeptierte Dateiendungen lassen sich problemlos ueber Parameter einstellen. Ein paar Aenderungen mussten direkt am Code gemacht werden, was sich aber auch nicht als besonders schwierig erwies.

SWFUpload
jQuery
Multiple File Upload plugin for jQuery

Tagged as: , No Comments
10May/070

div-Layer und Flash-Movies

Manche Probleme tauchen unvermittelt auf und kosten Unmengen an Zeit. Ein solches ist z.B. die Aufgabe in einem HTML-Layout ein div-Layer ueber einen Flashfilm zu positionieren. Die Positionierung per position: absolute und z-index sollte kein Problem darstellen, doch verdeckt der Flashfilm in fast allen Browsern die eigentlich darueber angeordnete Ebene, was schlichtweg ein Bug zu sein scheint.

Die Loesung des Problems ist ganz einfach und heisst:
wmode = transparent

Dadurch, dass man den Hintergrund des Flashfilms transparent setzt, funktioniert die Anzeige der Layers wieder in der richtigen Reihenfolge. Der Code sieht so aus:

im Tag object

<param name="wmode" value="transparent">

im Tag embed

wmode="transparent"

Und wer das swfObject benutzt:

so.addParam('wmode', 'transparent');

Auf manchen Systemen scheint das Flash-PlugIn Probleme zu haben die Transparenz darzustellen (ich habe von Mac und Linux gehoert). Ob dieser Workaround dann noch funktioniert, konnte ich nicht in Erfahrung bringen.

Weiterhin gibt es Bugs in Flashfilmen, wenn wmode = transparent gesetzt ist. Teilweise gab es merkwuerdige Effekte beim Ausfuellen von Formularen. z und y waren bei der Eingabe in Textfeld-Komponenten vertauscht, Zeichen wie das @ waren gar nicht mehr auf der Tastatur zu finden. Wer also Formulare in seinem Flashfilm hat, sollte de Hintergrund von Flash nicht auf transparent schalten! Hier lauern boese Bugs!