Resizing the Blogger Edit Box

If you compose in Blogger at all, you may be frustrated with the relatively small size of the text area provided for writing. It defaults to only about 15 lines!

Here's a fix.

I started out by using Firebug's Inspect feature to find what I wanted to resize, and to initially tweak the size on-demand. However, this is a bit tedious, and requires further tweaking if the window is resized.

I then wrote a JavaScript Bookmarklet to automate the task. When run, it automatically resizes the Blogger edit boxes for both the "Edit Html" and "Compose" tabs to just a bit smaller than the current size of the browser window, leaving just enough margin for the scrollbars and other editor components, etc. Additionally, it also listens for window resize events, and resizes the edit boxes along with the browser window.

Here is the human-friendly source code:

// Mark A. Ziesemer, www.ziesemer.com.
javascript:(
  function(){
    // http://www.quirksmode.org./js/events_advanced.html
    var attachEvent = function(obj, evType, handler){
      if(obj.addEventListener){
        obj.addEventListener(evType, handler, true);
        return true;
      }else if(obj.attachEvent){
        return obj.attachEvent("on" + evType, handler);
      }else{
        return false;
      }
    },
    getDim = function(dim){
      // http://www.howtocreate.co.uk./tutorials/javascript/browserwindow
      return window["inner" + dim] || document.documentElement["client" + dim] || document.body["client" + dim];
    },
    getH = function(){
      return getDim("Height");
    },
    getW = function(){
      return getDim("Width");
    },
    editSize = function(dim, size){
      document.getElementById("textarea").style[dim]
        = document.getElementById("richeditorframe").style[dim]
        = size + "px";
    },
    lastH, lastW,
    resize = function(){
      var newH = getH(), newW = getW();
      // http://webbugtrack.blogspot.com./2007/10/bug-104-resize-event-firing-errors-in.html
      if(newH != lastH || newW != lastW){
        editSize("height", newH - 250);
        editSize("width", newW - 100);
        lastH = getH();
        lastW = getW();
      }
    };
    resize();
    attachEvent(window, "resize", resize);
  }
)();

This is cross-browser compatible, and was tested against Mozilla Firefox 3 and Microsoft Internet Explorer 7. Not surprisingly, it could be much shorter if it didn't need to work-around a few IE bugs, as commented above:

1. Supporting a non-standards event registration model.
   • For serious use elsewhere, use a JavaScript library that already handles this properly, e.g. the Event Utility in the Yahoo! User Interface Library (YUI).
2. Difficulties in obtaining the size of the browser window, including differences between "strict" and "quirks" modes.
3. The resize event being called repeatedly, which usually resulted in infinite loops and hanging IE.

Here's the same code, condensed as a usable bookmarklet:

javascript:(function(){var%20attachEvent=function(obj,evType,handler){if(obj.addEventListener){obj.addEventListener(evType,handler,true);return%20true;}else%20if(obj.attachEvent){return%20obj.attachEvent('on'+evType,handler);}else{return%20false;}},getDim=function(dim){return%20window['inner'+dim]||document.documentElement['client'+dim]||document.body['client'+dim];},getH=function(){return%20getDim('Height');},getW=function(){return%20getDim('Width');},editSize=function(dim,size){document.getElementById('textarea').style[dim]=document.getElementById('richeditorframe').style[dim]=size+'px';},lastH,lastW,resize=function(){var%20newH=getH(),newW=getW();if(newH!=lastH||newW!=lastW){editSize('height',newH-250);editSize('width',newW-100);lastH=getH();lastW=getW();}};resize();attachEvent(window,'resize',resize);})();

(Bookmarklet - Either right-click and choose to bookmark, or drag to your bookmarks menu or links toolbar.)

I've not yet found a decent tool to compress JavaScript into bookmarklets. The best I've found is at http://chris.zarate.org./projects/bookmarkleter/. However, one issue it has in particular is failure to properly handle comments. While it is the tool I used to condense to the above, I manually removed the comments first and converted the double-quotes to single-quotes.

This script could easily be modified for similar functionality on other sites. Additionally, the need to initially enable the resizing by manually activating the bookmarklet could be avoided by converting this to a Greasemonkey script.

Update (2009-08-29):

Now also provided as a Greasemonkey script: http://userscripts.org/scripts/show/56651

Update (2009-01-26):

As discussed in the comments below, I'm avoiding Blogger's "updated editor" for now, due to many other unresolved issues with that editor itself. My scripts are only designed to work with the "old editor". Some details about the different editors are available from Google's Blogger Help.

If you have an issue with the bookmarklet, please post a comment here. If you have an issue with the Greasemonkey script, please report it at http://userscripts.org/scripts/issues/56651. In either case, be sure to include which browser and version is being used. Please also include any other possible factors that are visible, such as JavaScript errors or warnings in the browser.