Wednesday, December 3, 2008

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.
  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.

18 comments:

Toolman said...

thanks for this. It works in Chromes' URL bar - useful as Chrome doesn't have extensions yet :)

Jon said...

FANTASTIC!!!!!!!!!!!!

I had to search a wide range of terms to find your blog & solution, but it works great in Safari on a MacBook Pro. You totally made my day!

Having spent years in graphic design, including both Photoshop/Illustrator/InDesign and online work, I have grown accustomed to large work areas for everything I do. Blogger was driving me nuts.

THANK YOU!!!

Shlomo said...

Thanks! This is really excellent.

rauschma said...

Great tool! I've blogged about it.

Stratagerm said...

A couple of minor suggestions to assist non-technical people:

1. Make the bookmarklet link more prominent (by moving it to the top of the post).

2. Provide clear instructions on its use (i.e. "Click the bookmark when you are editing your blog to increase the size of the edit box").

It was no issue for me to read through, find and bookmark the link, and know to when to use the bookmark, but I'm sure unsophisticated users will appreciate the info.

(I got here via Axel's post, thanks Axel!.)

Mark A. Ziesemer said...

Stratagerm and all -

As mentioned in my update, this is now also available as a Greasemonkey extension for anyone using Mozilla Firefox or another Greasemonkey-compatible browser.

Stratagerm - as for your other suggestions, I think your comment accomplishes itself. :-)

Reid said...

Mark, thanks so much! This Greasemonkey script makes my life much easier!

Couple of suggestions:

1. It would be nice if adjusting the width were a preference; I prefer the stock (narrow) width myself.

2. Can the buffer amounts be automatically determined? 350px vertical was enough for me. Or, perhaps a preference for a quick-n-dirty solution.

I was able to quickly hack items 1 and 2a into the code and now JOY..... :)

Ahmad said...

This doesn't work (bookmarklet or GM script) with the new blogger edit space. Also, I write quite a few bookmarklets myself (more than a few actually) and have found an excellent tool to convert my JS into one. Contact me and I'll be more than happy to share its location.

Thanks,
Ahmadism.com
ahmad squiggly thing ahmadism period com

Mark A. Ziesemer said...

Ahmad - These scripts are still working for me. I just successfully tested the bookmarklet in both Firefox and IE 8, and the Greasemonkey script in Firefox. I'm not aware of a "new blogger edit space". Are you part of a special Blogger beta or something that may be affecting them?

Ahmad said...

Within Blogger's settings (1st page I believe), there's a new "Updated editor" I've since reverted back to the older one (didn't like the new one), and your scripts now work.

Thanks.
www.ahmadism.com
twitter.com/ahmadism

rambling man said...

I am new to Greasemonkey, but since it seems to be a trusted Firefox addon, I installed it. I then clicked your install button at http://userscripts.org/scripts/show/56651 and it worked in increasing the width of the old edit window at Blogger. I did not know of the new Blogger editor until I read the comments here. It is activated from the settings page. It allows one to increase the vertical size of the edit window, but not the horizontal size. Dammit! Unfortunately, your great Greasemonkey script only works on the old editor. I played around with your script and was able to increase the vertical size a little more on the old editor, but not as much as I would have liked. If inspired, I suggest you create a script for the new editor in Firefox. Please only adjust the width, not the height of the new edit window. The new editor allows much greater height than your script allowed. Thanks for your efforts. Don't worry about MSIE at first. :)

Mark A. Ziesemer said...

rambling man, Ahmad, etc.: I'm avoiding the "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".

rambling man: I'm confused / surprised at what you're looking for. My script resizes the edit box along with the browser window, pretty much ensuring that only the edit box will have to be scrolled, and not the browser window. These offsets are currently visible in the script source (currently -250 for height), and can be easily edited as desired.

I have plans to work on an updated script. It would allow for both horizontal and vertical resize handles (similar to the current vertical resize handle "updated editor"), store the offsets as persistent data within Greasemonkey, and potentially some other new features and options. However, unless I find that both editors can be easily supported without causing any additional issues, I'll probably still only support the "old editor".

rambling man said...

I like horizontal and vertical resize handles. Then I can try out different edit window sizes. Normally, I like to fill the whole screen with the edit window. So I don't mind scrolling the browser window to move the edit window, and make it fill most of the screen. I like moving stuff around, and using large images sometimes. Some themes at Blogger and Wordpress.com blog hosts allow larger images, charts, etc.. So a big working area makes all this easier. I also use Komposer sometimes for preparation or adjustment of pages for my blogs and my web site. Komposer has a big working area. I used Frontpage before Kompozer, and it also has a large working area. I don't understand scripts, and so my fiddling around with it was just guesswork. Thanks for this blog with comments. I learned of the new editor through it, and its larger edit window allows me to continue blogging at Blogger. Also, its image editing seems easier.

Anonymous said...

Thank you very much for making and sharing this. I was about to stop blogging because it was so painful to manipulate the text and photos in such a small box. Thank you, thank you for your generosity!

Al Anonymous said...

It's not working anymore. Please fix. Tested with newst Firefox

Mark A. Ziesemer said...

Al Anonymous - It is still working for me, including on Firefox 3.6. Please make sure you're using the "Old Editor" and not the "Updated Editor" in Blogger.

erica said...

thank you so much!

Ramen Adventures said...

Thanks a ton!