Collapsible textarea

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

Found this

http://www.sitecrafting.com/blog/cleaner-forms-collapsible-textareas/

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 ?

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.

Posted: Wed Jun 16, 2010 2:01 pm

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

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.