textarea of rich text editor height

See more:

Javascript

PHP

Hi guys

I was trying to create a rich text editor for fun and learning purposes myself from scratch, and I have a minor problem.


I've come as far as making it function as expected but I have a small UI glitch. I want the text area inside the Iframe to auto-resize its height as user types I don't like how user has to scroll to view the full document I feel it removes the 'What u see is what you get' element when I only see half the picture. I want it to be kinda like the one I'm using now here but all I get is this:


https://docs.google.com/file/d/0B0xtvsdSbHMnNVFoRDc4Y3VhWFk/edit?usp=sharing[^]

And here's the html code

<blockquote class="FQ"><div class="FQA">Quote:</div><div id="bio" >
  <h1>Biography</h1>
                Enter Bio:
             <div id="txtEd">
            <form id="bioForm" method="post" action=""  >
            <ul>                                              
               <div id="wysiwyg_cp">
                 <a href="java<!-- no -->script:void(null)"  önclick="iBold();" title="bold"><img src="Images/bold.gif" alt="bold" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iUnderline();" title="Underline"><img src="Images/underline.gif" alt="Underline" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iItalic();" title="Italics"><img src="Images/italic.gif" alt="Italics" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iFontSize();" title="Font Size"><img src="Images/icon_increase_font_size.gif" alt="Font Size" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="show_menu();" title="Font Color"><img src="Images/font_color_icon.jpg" alt="Font Color" height="30" width="32"></a>
                 <div id="dropdown_menu" class="hidden_menu">
                     <ul>
                         <li href="javascript:void(null);"  önclick="iForeColor('blue');" style="color: blue;">Blue</li>
                         <li href="javascript:void(null)"  önclick="iForeColor('aqua');" style="color: aqua;">Aqua</li>
                         <li href="javascript:void(null)"  önclick="iForeColor('blueviolet');" style="color: blueviolet;">blue violet</li>
                         <li href="javascript:void(null)"  önclick="iForeColor('brown');" style="color: brown;">Brown</li>           
                     </ul>
                 </div> 
                  
                 <a href="java<!-- no -->script:void(null)"  önclick="iHorizontalRule();" title="Horizontal rule"><img src="Images/horizontalrule.gif" alt="Horizontal Rule" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iUnorderedList();" title="Unordered List"><img src="Images/bulletedlist.gif" alt="Unordered List" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iOrderedList();" title="Ordered List"><img src="Images/numberedlist.gif" alt="Ordered List" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iLink();" title="Link"><img src="Images/add-link.gif" alt="Link" height="30" width="32"></a>
                 
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iUnLink();" title="Remove Link"><img src="Images/link_remove.gif" alt="Remove Link" height="30" width="32"></a>
                  
                 <a href="java<!-- no -->script:void(null)"  önclick="iImage();" title="Add Image"><img src="Images/camera-icon.gif" alt="Add Image" height="27" width="38"></a>
                
              </div>
              <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
              <textarea style="display:none;  box-sizing: content-box; -moz-box-sizing: border-box;" name="myTextArea" id="myTextArea" cols="100" rows="300"></textarea>
              <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:100%; height:100%; margin-bottom: 50%;"></iframe>
              <!-- End replacing your normal textarea -->
                          
              
              <a href="java<!-- no -->script:void(null)"  önclick="submit_form();" title="Save Bio" class="txtSavebtn" />Save </a>
		             
            </ul>
                
            </form>
            </div>
            </div></blockquote>

When the user clicks on a link to edit Bio that hides all other div's on the page and show the dio div this js function is called:

<blockquote class="FQ"><div class="FQA">Quote:</div>var $divState ={};
       function showhide($id){
           if(document.getElementById){
               var $divid = document.getElementById($id);
               $divState[$id] = ($divState[$id]) ? false : true;
               for (var $div in $divState){
                   if ($divState[$div] && $div != $id){
                       document.getElementById($div).style.display = 'none';
                       $divState[$div] = false;
                   }
               }
               $divid.style.display = ($divid.style.display == 'block' ? 'none' : 'block');
           }
           if($id == 'bio' ) {
            var el = document.getElementById('wysiwyg_cp');
            el.style.display = 'block';
            
            var el = document.getElementById('txtEd');
            el.style.display = 'block';
            
            iFrameOn();
            }
       }

function iFrameOn(){
	richTextField.document.designMode = 'On';
}

</blockquote>

Thanks in advance ...