Collapsible textarea

benny_tllh · Hangin' Around Joined: Dec 29, 2006 Posts: 31

Found this

Only registered users can see links on this board!
Get registered or login to the forums!

but putting it in includes/javascript.php only collapses textarea it wont expand on click.

I would like to use it on my intranet where i have big bulky forms.

(i opened the example's source code, inserted head stuff outside php tags in javascript.php, and added class to form and text area in my module)

anyone know how to integrate it correct in a module if possible ?

Palbin · Posted: Tue Jun 15, 2010 3:06 pm

Make a file called head-collapse_textarea.php and put the following code in it. Then upload it to includes/addons/. Then you should be able to use this all over your site. You will just have to add "class="collapse_tareas" to your forms.

Code:

<?php

$inlineCSS = '
<style type="text/css">
.collapse_tareas input, .collapse_tareas textarea { font: 10pt arial, sans-serif; border: 1px solid #888; }
.collapse_tareas textarea { height: 1.45em; }
.collapse_tareas textarea.compact { height: 1.45em !important; }
.collapse_tareas textarea.expanded { height: 5em !important; }
</style>';
addCSSToHead($inlineCSS, 'inline');

$inlineJS = '<script type="text/javascript">
   /* Collapsible Textareas, version 1.0
   * (c) 2007 SiteCrafting, Inc. <service@sitecrafting.com>
   *
   * Collapsible Textareas is available under the Creative Commons Attribution
   * 3.0 License (http://creativecommons.org/licenses/by/3.0/).
   *
   /*--------------------------------------------------------------------------*/

   // find all the forms with textareas we want to allow to collapse
   function setupTextareas() {
      var pageForms = document.getElementsByTagName("form");

      for( var j=0; j<pageForms.length; j++) {
         var formArea = pageForms[j];

         if( formArea.className.indexOf("collapse_tareas") > -1 ) {
            var txtAreas = formArea.getElementsByTagName("textarea");
            for( var i=0; i<txtAreas.length; i++ ) {
               var thisTxtArea = txtAreas[i];

               if( thisTxtArea.addEventListener ) {
                  thisTxtArea.addEventListener("focus", bigSmlTextarea, false);
                  thisTxtArea.addEventListener("blur", bigSmlTextarea, false);
               } else { // IE
                  thisTxtArea.attachEvent("onfocus", bigSmlTextarea);
                  thisTxtArea.attachEvent("onblur", bigSmlTextarea);
               }
            }
         }
      }
   }

   // collapse or expand a textarea
   function bigSmlTextarea(e)
   {
      var node = ( e.target ? e.target : e.srcElement );

      if( node.className.indexOf("expanded") == -1 )
         node.className += " expanded";
      else
         node.className = node.className.replace(/expanded/gi, "");
   }

   // prep the the desired textareas to collapse and expand
   window.onload = setupTextareas;
</script>';
addJSToHead($inlineJS,'inline');

?>

P.S. For anyone else looking at this code on the linked page it is incomplete. You need to view the example and view source to get the proper javascript.

benny_tllh · Hangin' Around Joined: Dec 29, 2006 Posts: 31

Thanks for the speedy answer, where do i put the include for rn2.20.01.
Or is it the last straw that makes a upgrade of RN a thing to use the weekend on. Smile

Palbin · Posted: Wed Jun 16, 2010 2:53 pm

includes/custom_files/custom_head.php

Code:

<?php

echo '
<style type="text/css">
.collapse_tareas input, .collapse_tareas textarea { font: 10pt arial, sans-serif; border: 1px solid #888; }
.collapse_tareas textarea { height: 1.45em; }
.collapse_tareas textarea.compact { height: 1.45em !important; }
.collapse_tareas textarea.expanded { height: 5em !important; }
</style>';

echo '<script type="text/javascript">
/* Collapsible Textareas, version 1.0
* (c) 2007 SiteCrafting, Inc. <service@sitecrafting.com>
*
* Collapsible Textareas is available under the Creative Commons Attribution
* 3.0 License (http://creativecommons.org/licenses/by/3.0/).
*
/*--------------------------------------------------------------------------*/

// find all the forms with textareas we want to allow to collapse
function setupTextareas() {
var pageForms = document.getElementsByTagName("form");

for( var j=0; j<pageForms.length; j++) {
var formArea = pageForms[j];

if( formArea.className.indexOf("collapse_tareas") > -1 ) {
var txtAreas = formArea.getElementsByTagName("textarea");
for( var i=0; i<txtAreas.length; i++ ) {
var thisTxtArea = txtAreas[i];

if( thisTxtArea.addEventListener ) {
thisTxtArea.addEventListener("focus", bigSmlTextarea, false);
thisTxtArea.addEventListener("blur", bigSmlTextarea, false);
} else { // IE
thisTxtArea.attachEvent("onfocus", bigSmlTextarea);
thisTxtArea.attachEvent("onblur", bigSmlTextarea);
}
}
}
}
}

// collapse or expand a textarea
function bigSmlTextarea(e)
{
var node = ( e.target ? e.target : e.srcElement );

if( node.className.indexOf("expanded") == -1 )
node.className += " expanded";
else
node.className = node.className.replace(/expanded/gi, "");
}

// prep the the desired textareas to collapse and expand
window.onload = setupTextareas;
</script>';

?>

I did not test this as 2.20.01 is not supported anymore. The upgrade may not be the easiest since you are still back on 2.20.01, but I suggest to upgrade.