Dynamic TextArea Resizer

Filed under:  Google about "Javascript" |  Google about "phpBB"

The first time I saw a resizable textarea was using TinyMCE, then I've seen this implemented in WordPress, then in Drupal. After some time, I started to feel consumed by the need to find this feature in other tools that I often use too, such as phpBB... here's where I finally decided to do something about it, but rather than writing a phpBB MOD, I decided to write a generic DYNamic TextArea Resizer (DYNTAR), a standalone javascript snippet that's easily plugable to any website. It's pretty small, coded with a non-intrusive approach and it should work on any DOM capable browser.

This article explains how it works and how you can add this gadget to your own website.

Actually, DYNTAR is based on three separate components: a javascript file, a couple of CSS classes and a small image used for the right bottom corner.

Download and installation

  • Download

    Please, visit the project page.

  • Demo

    http://demos.phpmix.org/dynamic_textarea_resizer

    The demo opens up on a separate window and shows a table with four different textareas. Two of these textareas are defined to not be resizable. This is accomplished by adding the noresize="1" attribute to the textarea.

  • Installation

    • Unzip the package and upload the files to your website. The location of these files may vary depending on your particular configuration. For instance, to use DYNTAR with your phpBB board, upload the files using the following structure:

      • phpbb/templates/dyntar.js
      • phpbb/templates/subSilver/dyntar.css
      • phpbb/templates/subSilver/images/dyntar.gif

      If you have more styles installed in your board then, you need to upload the .css and .gif files to their templates directories as well. Placing these files in separate templates allows you to adjust the look of the resize bar for each style.

    • Now, you have to include a couple of lines in your HTML headers. Assuming you are installing DYNTAR in your phpBB board, you need to edit the file overall_header.tpl (for each one of your installed styles) and add a couple of lines (say) before the </head> tag.

      #
      #-----[ OPEN ]------------------------------------------------
      #
      templates/subSilver/overall_header.tpl
      #
      #-----[ FIND ]------------------------------------------------
      #
      </head>
      #
      #-----[ BEFORE, ADD ]-----------------------------------------
      #
      <link rel="stylesheet" href="templates/subSilver/dyntar.css" type="text/css" />
      <
      script type="text/javascript" src="templates/dyntar.js"></script>

    • If you wish to use DYNTAR in textareas used in your Administration Control Panel (ACP), then you also need to add similar lines in the templates used to build the ACP header.

      #
      #-----[ OPEN ]------------------------------------------------
      #
      templates/subSilver/admin/page_header.tpl
      #
      #-----[ FIND ]------------------------------------------------
      #
      </head>
      #
      #-----[ BEFORE, ADD ]-----------------------------------------
      #
      <link rel="stylesheet" href="../templates/subSilver/dyntar.css" type="text/css" />
      <
      script type="text/javascript" src="../templates/dyntar.js"></script>

      Note the path is now prefixed with "../". This is necessary to find the DYNTAR files from the phpBB admin directory.

      Remember to do this for all your installed styles. ;-)

    • The procedure to install DYNTAR in other environments is basically the same. All you need to do is adjust the paths used in those lines we are adding to your HTML headers.

    • There is just something to take into account. The location of the small image (dyntar.gif) is relative to the directory where the .css file is located. Let's see the CSS definition where this image is referred:

      .dyntar-resizer {
          ...
          
      background#CEDCEC url(images/dyntar.gif) no-repeat 100% 100%;
          
      ...
      }

      Note the line where the resizer background is defined. If you place the .css file in the directory stylesheets then, you have to upload the file dyntar.gif to the directory stylesheets/images.

  • Configuration

    • Nothing complex here. Almost all you have to worry about is related to the look of the resize bar. That is, just edit the CSS classes to suit your needs (change colors, borders, etc.).

    • As pointed to by the comments in the demo section above, if you need to disable the resizable effect on some textareas, just add the noresize="1" attribute to them. See the demo for an example. ;-)

Compatibility

DYNTAR should work on any DOM capable browser. It has been successfully tested with MSIE 6, Firefox 1.5 and Opera 8.5 on Windows, Firefox 1.5 and Konqueror 3.5.1-5 on Linux. If you are using a different browser, please, let me know whether it works for you too, so I can update the list. ;-)

Update: Just checked on Linux, DYNTAR also works with Konqueror 3.5.1-5 (FireFox 1.5 too).

Questions, comments, suggestions?

Please, use the forums. Thanks ;-)

More...

In the next section I'll try to explain how it works.