KnockoutJS Binding Handler: autosizing input fields

If you use KnockoutJS and want your input-fields to automatically grow and shrink with the input, use this custom handler.


  data-bind="autosize: {
    maxWidth: 500, 
    minWidth: 100, 
    comfortZone: 15


Original code from javascript – Is there a jQuery autogrow plugin for text fields?

ko.bindingHandlers.autosize = {
   init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var o = $.extend({
           maxWidth: 1000,
           minWidth: 0,
           comfortZone: 70
       }, valueAccessor());
        var minWidth = o.minWidth || $(element).width(),
           val = '',
           input = $(element),
           testSubject = $('<tester/>').css({
               position: 'absolute',
               top: -9999,
               left: -9999,
               width: 'auto',
               fontSize: input.css('fontSize'),
               fontFamily: input.css('fontFamily'),
               fontWeight: input.css('fontWeight'),
               letterSpacing: input.css('letterSpacing'),
               whiteSpace: 'nowrap'
           check = function() {
                if (val === (val = input.val())) {
                // Enter new content into testSubject
               var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, ' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                // Calculate new width + whether to change
               var testerWidth = testSubject.width(),
                   newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                   currentWidth = input.width(),
                   isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                       || (newWidth > minWidth && newWidth < o.maxWidth);
                // Animate width
               if (isValidWidthChange) {
        ko.utils.registerEventHandler(element, 'keyup keydown blur update', check);

dotnetpro 08/2009 – Nordische Grammatik: Domänenspezifische Sprachen mit Microsoft Oslo M

Soeben ist der dritte Artikel der DSL-Serie von Markus und mir bei der dotnetpro erschienen.

Bild 11

Abstract: Mehrspaltige Layouts für Webseiten sind komplex und stellen hohe Ansprüche an den Webprogrammierer. Warum nicht eine Sprache entwickeln, die solche Layouts vereinfacht? Mit Oslo M und dem ASP.NET MVC Framework lässt sich so eine Sprache realisieren.


Hauptsächlich dreht sich der Artikel um MGrammar, den Teil der Sprache Microsoft M (Teil von Microsoft Oslo) mit dem andere Sprachen definiert werden können. Zuerst wird die MGrammar (Arbeitstitel) anhand einer simplen “Hello, World”-Sprache erklärt.

Danach erstellen wir eine DSL zur Beschreibung mehrspaltiger Layouts und bringen diese mittels ASP.NET MVC und YAML ans laufen.

Das Beispiel im Artikel basiert auf der Oslo January CTP, der Quelltext für das Oslo May CTP kann aber bei mir angefragt werden.


Typisches dreispaltiges Portal-Layout.

Konkretes Layout - dreispalter

* Die Berechnung der Restbreite stimmt hier nicht. Richtig wäre:

Rest = (75%* Gesamtbreite) –400px

Dies mag aber von CSS-Framework zu CSS-Framework variieren.

DSL zur Beschreibung

Die Syntaxhervorhebung ergibt sich aus der Grammatik und ein wenig Konfiguration.

intellipad - Syntaxhervorhebung

beautyOfCode – jQuery plugin for Syntax Highlighter 2.0 by Alex Gorbatchev

One of my most-visited posts is the jQuery plugin “beautyOfCode” for the version 1.5 of Alex’ Syntax Highlighter. The main point of doing a wrapper was, that version 1.5 did require invalid html code.

In the new version of Syntax Highlighter this is fixed. But still, people ask for a new version of my code, too.

I finally released a new version with some more features:

  • Uses online hosting of styles, scripts and brushes. This means you only need to reference jQuery and beautyOfCode!
  • Supports the new features as smart-tab, html-script, themes, line-wrapping and much more
  • Still uses a code-tag inside a pre-tag as well as a more css-like configuration with classes instead of property syntaxes

Referencing  the plugin and configuring brushes

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="Scripts/jquery.beautyOfCode.js"></script>

<script type="text/javascript">
      brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php']

Detection, default behaviour

By default, beautyOfCode will beautify all elements matching ‘pre.code:has(code[class])”:

<pre class="code">
  <code class="javasript">
    alert("Hello, World!");


If auto detection is not desired, the plugin has to be initialized differently:

<script type="text/javascript">
      brushes: ['Xml', 'JScript'],
      ready: function() {

This would then only beautify following code:

<pre id="mycode">
    alert("Hello, World!");

Initialization Options

These are the default options, which can be overridden by $.jQuery.beautyOfCode.init:

settings: {
    // should the syntax highlighter and brushes
    // be loaded dynamically
    autoLoad: true,
    // the base url to alex' hosted sources
    baseUrl: '',
    // the baseurl for the hosted scripts
    scripts: 'scripts/',
    // the baseurl for the hosted styles
    styles: 'styles/',
    // themes from
    theme: 'Default',
    // the brushes that should be loaded - case sensitive!
    brushes: ['Xml', 'JScript', 'CSharp', 'Plain'],
    // overrides for configurations and defaults
    config: {},
    defaults: {},
    // function to be called, when all scripts are loaded
    ready: function() {

Example with current version, Django-theme and no gutter

<script type="text/javascript">
        theme: 'Django',
        baseUrl: ''
        defaults: { gutter: false },
        brushes: ['Xml', 'JScript']


Find a reference for all options on SyntaxHighlighter Configuration.

The options can either be specified as defaults in init, on the beautify-call or as css classes.

Specify options in code:

$('#myCode').beautify('javascript', {'wrap-lines':true, 'first-line:2'});

Specify options in html:

In this case the gutter would not be shown and the lines 3 and 6 (5 and 8 in Listing) would be highlighted.

<pre class="code">
  <code class="javasript boc-no-gutter boc-highlight&#91;3,6&#93;">
    alert("Hello, World!");
    function x() {
        if (true)

Syntax for options in html:

  • The flags smart-tabs, ruler, gutter, toolbar, collapse, auto-links, wrap-lines and html-script mean true, then prefixed with boc-, and false, when prefixed with boc-no-.
  • class-name, first-line and tab-size are prefixed with boc- and followed by their values in square brackets. For example first-line[3] means, the gutter starts with a three.
  • highlight is also prefixed with a boc- and followed by a comma-separated list of line numbers in square brackets that are to be highlighted.


Find the plugin source code and a demo page on the bitbucked beautyOfCode project page. If you like the plugin, please also vote on the jQuey plugin site.

Feel free to submit issues and patches. The code is not very well tested, since I don’t use it in any production environment today.

Ping-services for your blog posts

I just wrote off some ping urls (some german services, too) from the book Website Boosting 2.0 by Mario Fisher. When posting with Windows Live Writer these can be configured for beeing pinged on publishing new blog posts. Several blog engines also have configuration options or plugins for auto-pinging available.

beautyOfCode: jQuery Plugin for Syntax Highlighting

UPDATE: Support for Syntax Highlighter 2.0 + jQuery Listed + bitbucket Repository

The Syntaxhighlighter by Alex Gorbatchev is the best I have seen so far. As you see in this post, uses it, too.

But the required syntax is not xhtml-compliant (name on pre is forbidden).

<pre name="code" class="javascript">
  // my code

In order to enable compliant xhtml I had to rewrite a small part anyway, so I just made a small jQuery-Plugin that just uses Alex’s scripts right away (thanks Alex!).

Beautify explicitely

<pre id="myCode">
     // my code

Using beautyOfCode you don’t have to decorate your html in order to enable syntax highlighting. Just call beautifyCode on any selected pre or textarea


Beautify all

If you prefer to decorate your html and then just let the highlighter take care of the rest, you may use following notation.

<pre class="code">
  <code class="javascript">
     // my code

<pre class="code">
  <code class="css boc-nocontrols">
    body {
      font-size: 2em;

Make sure you have these few lines



Default Settings

   noGutter: false, // hide line numbers?
   addControls: true, // copy, view plain, ...
   collapse: false, // show controls with expand link
   showColumns: false, // show column numbers
   firstLine: 1 // start with another line number?

Change Settings with Javascript

  $.beautyOfCode.init('clipboard.swf', {
    // add global settings here
    firstLine: 4,
    collapse: true

  // change options per listing
  $("#myCode").beautifyCode('javascript', {
    noGutter: true

Change Settings in Element-Decoration

Settings with in the html are added as additional classes on the code-element.

<pre class="code">
  <!-- You dont have to specify default values. -->
  <code class="javascript boc-firstline&#91;3&#93;
     // my code

kick it on

Source Code

Notice: beautyOfCode is using Syntaxhighlighter. You need to link in SyntaxHighlighter.css, shCore.js and the brushes you want to use.

jQuery.beautyOfCode = {
  initialized: false,

  settings: {

    // hide line numbers?
    noGutter: false,

    // show copy, plain, ... links
    addControls: true,

    // collapse to control bar. cant be used
    // with addControls set to false
    collapse: false,

    // show column numbers
    showColumns: false,

    // start with another line number?
    firstLine: 1

  brushByAlias: {},

  init: function (clipboardSwf, settings) {
    dp.SyntaxHighlighter.ClipboardSwf = clipboardSwf;

    if (settings)
      jQuery.extend(jQuery.beautyOfCode.settings, settings);

    if (jQuery.beautyOfCode.isInitialized)

    // creates a map of each registered brush by alias
    jQuery.each(, function (i, brush) {
      var aliases = brush.Aliases;

      if(aliases == null)

      jQuery.each(aliases, function (ii, alias) {
        jQuery.beautyOfCode.brushByAlias[alias] = brush;

    jQuery.beautyOfCode.isInitialized = true;

  addCssForBrush: function (brush, highlighter) {
    if (brush.isCssInitialized)

    var headNode = $("head")[0];
    if(highlighter.Style && headNode)
      var styleNode = document.createElement('style');
      styleNode.setAttribute('type', 'text/css');

      if(styleNode.styleSheet) // for IE
        styleNode.styleSheet.cssText = highlighter.Style;
      else // for everyone else


    brush.isCssInitialized = true;

  beautifyAll: function() {
    jQuery("pre.code:has(code[class])").each(function (i, item) {

      function getOptionValue(name, list)
        var regex = new RegExp('^' + name + '\\[(\\w+)\\]$', 'gi');
        var matches = null;

        for(var i = 0; i < list.length; i++)
         if((matches = regex.exec(list[i])) != null)
          return matches[1];

        return null;

      var $item = jQuery(item);
      var $code = $item.children("code");
      var code = $code[0];

      var options = code.className.split(" ");
      var language = options[0];

      var settings = {};

      if ($code.hasClass("boc-nogutter"))
        settings.noGutter = true;

      if ($code.hasClass("boc-nocontrols"))
        settings.addControls = false;

      if ($code.hasClass("boc-showcolumns"))
        settings.showColumns = true;

      if ($code.hasClass("boc-collapse"))
        settings.collapse = true;        

      var firstLine = getOptionValue("boc-firstline", options, 1);
      if (firstLine)
        settings.firstLine = firstLine;

      $item.beautifyCode(language, settings);

jQuery.fn.beautifyCode = function (language, settings) {

  var saveLanguage = language;
  var saveSettings = settings;

  // iterate all elements
  this.each( function (i, item) {
    var $item = jQuery(item);

    var settings = jQuery.extend({}, jQuery.beautyOfCode.settings, saveSettings);

    var brush = jQuery.beautyOfCode.brushByAlias[saveLanguage];

    if (!brush)

    // instantiate brush
    highlighter = new brush();

    // set brush options
    jQuery.extend(highlighter, settings);

    jQuery.beautyOfCode.addCssForBrush(brush, highlighter);

    // IE Bug?: code in pre has to be skipped
    // in order to preserver line breaks.
    if ($"pre") && ($code = $item.children("code")))

    highlighter.source = item;


EfA-Fontsize zerstört Session Cookies

Das Problem

Das ASP.NET Session Cookie funktioniert nicht mehr wie es soll. Befindet man in einer Webapplikation und ist angemeldet, oder hält irgendeinen anderen Status in der ASP.NET Session, teilt sich diese Information auch mit neu geöffneten Browsern oder Fenstern. Es ist also beispielsweise nicht möglich, sich mit einem anderen Benutzer in einer zweiten Browserinstanz an derselben Applikation anzumelden.

Der Übeltäter

Nach langer Suche haben wir festgestellt, dass der Cookie-Manager im EfA-Fontsize Skript buggy ist. Das eingebundene Cookie-Skript geht alle Cookies (vorher in this.cookies abgelegt) durch und schreibt sie neu.

for(var name in this.cookies) {
  expires = (this.expiration[name])?this.expiration[name]:this.defaultExpiration;
  path = this.defaultPath;
  domain = this.defaultDomain;
  if(name) {
    var cookies = name + '=' + this.cookies[name] + '; expires=' + expires + '; path=' + path + '; domain=' + domain;
    if(cookies != '') {
      document.cookie = cookies;

Dabei wird die expires auf Heute+7 Tage gesetzt. Der Wert wird zwar über this.expiration[name] vermeintlich "wiederhergestellt", er wurde aber nie abgelegt. Dadurch werden temporäre Cookies zu permanenten. Auch path und domain für alle Cookies auf den gleichen Wert zu setzen ist ein kleines Verbrechen.

Cookiemanager.prototype.getExpiration = function() {
  var date = new Date();
  return date.toGMTString();


Die Lösung

Das Skript für die EfA-Fontsize-Switcher scheint nicht mehr verfügbar zu sein:

Also habe ich mir auch nicht die Mühe gemacht, dass Skript zu patchen, sondern den Cookiemanager durch ein jQuery Plugin ersetzt.

  1. Plugin herunterladen und einbinden: Plugins | jQuery Plugins | Cookie
  2. Die Datei efa_fontsize.js anpassen

  3. Efa_Fontsize06.prototype.getCookie = function() {
      var cookie = $.cookie(this.cookieName);
      return (cookie)?cookie:false;
    Efa_Fontsize06.prototype.setCookie = function(cookieValue) {
      return $.cookie(this.cookieName, cookieValue, { expires: 7, path: '/' });
  4. Alle anderen Referenzen auf cookies.js aktualisieren oder entfernen und die Skript-Datei löschen.