Archiv für Mai, 2012

While developing a online text editor with the HTML <textarea> element, I found a very strange behavior of the <textarea> in IE9 in rotated mode. The rotated textarea element is a functional requirement, so it cannot be rejected. The textareas dimensions should also automatically align on text input.

In the first solution, I set the content and styles of the textarea like so:

var elTextarea = new Element("textarea").inject(document.body);

elTextarea.set("text", textContent);

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)"
});

On a „keydown“-event, I aligned the textareas dimensions to max. width and height of the text content (I did this with a helper <div> element and measured the dimensions of that element).
So far the solution works properly in Chrome 17+, Firefox 11+ and Opera, but not in IE9 😦

In IE9 the textarea jumps around like crazy, parts are hidden or overlayed with some outer content. This problem is solvable by using msTransform instead of -ms-transform (why Micro$oft!? Everbody else uses the -BROWSER-CSS syntax! *grml*).

Here is the first fix:

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",
  "msTransformOrigin":        pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)",
  "msTransform":       "rotate("+ angle +"deg)"
});

The second problem was a more tricky one: The textareas text content is set dynamically via JavaScript and MooTools. After a single read of the text-content, the text did not automatically wrap on the next write in the textarea.

This issue gave me a lot of food for thoughts … The problem was the MooTools method set(attr, content) to set attribute nodes of HTML elements. I did some testing and set the textareas content by .innerHTML, .value and with .textContent. I got the best working solution by using .value to set the content.

So I altered the code from set("text",[...]) to set("value", [...]). The following code example contains the whole solution to this problems:

var elTextarea = new Element("textarea").inject(document.body);

elTextarea.set("value", textContent);

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",
  "msTransformOrigin":        pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)",
  "msTransform":       "rotate("+ angle +"deg)"
});

Who would have thought that three lines of code would cause so much trouble in IE9 …

Advertisements

Firefox „Newtab“

Veröffentlicht: 19. Mai 2012 in Web
Schlagwörter:, ,

In Firefox Version 12 hat ein neues „nightly“ Feature Einzug in den Browser gefunden: Die Newtab-Funktion. Dadurch ist es nun möglich die am häufigsten besuchten Webseiten direkt auf der Startseite bzw. in einem neuen Tab anzeigen zu lasen. Diese Funktion existiert in anderen Browsern wie z.B. Chrome schon länger.

Um diese Funktion in Firefox 12 zu aktivieren, muss man about.config in die Adresszeile eingeben, die Werte browser.newtabpage.enabled auf true setzen und für browser.newtab.url den Wert about:newtab eingeben.

Das Ergebnis kann sofort in einem neuen Tab betrachtet werden.

Die Firefox-Entwickler haben eine nützliche neue Funktion eingebaut, die es zwar bereits schon vorher durch Plugins gab, aber jetzt endlich nativ vom Browser selbst angeboten wird. Bleibt nur zu hoffen, dass die Funktion auch noch in der nächsten Version 13 erhalten bleibt 😉