SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with my expanding textarea function

    Hi,

    I'm working on this function that allows dynaically sized textarea. Its based on an idea i found here: http://peter.michaux.ca/article/42
    which i cant use because it uses yahoo yui and i'm at work where we don't use that. So i'm re-writing it.

    Basic idea is you create a div, hide it and then copy all the content from the textarea in to the div, measure the height of the div and then
    apply that to the textarea. Obviously this works becaused i div naturally overflows so i can get the height. I've got it working fine but the only
    thing i'm having problems with is the fact that the craage returns in the textarea.

    I've managaed to find out where the carraige returns are in the textarea text. I've then tried to enter them in to the string being put in to
    the div..using replace..i've tried putting the carraige returns in, i've tried <br /> and ive tried putting </p><p> in ther string but all get rendered by the
    instead of actually being put to use as html.....so if you run the code below you'll see the <br />'s in the text in the red div instead of the actual breaks.

    So what i need to do split the string somehow on the carriage return, make the <br /> instead of being interpreted as text happen and then start the string again so it all comes out nicely formatted in the div...
    so ultimately i get the same text in both.

    Any ideas?


    Heres the code so far (ive put in the whole page so you can run it if you want):

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    textarea {
    overflow: none;
    }
    </style>
    <script type="text/javascript">
    function texty() {
    var arTextarea = document.getElementsByTagName("textarea");  
    if (arTextarea.length>0){      
        var numRows=0;
        for(var x=0; x <arTextarea.length; x++) {
            if(arTextarea[x].value != '') {	
    		    var textAreaContents =  arTextarea[x].value;
    			var reNewLines=/[\n\r]/g;
    			//replace all new lines with br tags
                var sFormatted=textAreaContents.replace(reNewLines, '<br />');
    			var boxWidth = arTextarea[x].offsetWidth;
    		   //alert(boxWidth);
                var divvy = document.createElement('div');
     
    			//divvy.style.display = "none";
    			divvy.style.backgroundColor = 'red';
    			divvy.style.width = boxWidth + 'px';
    			ptag = document.createElement('p');
    			text = document.createTextNode(sFormatted);
    			//alert(text.innerHTML);
    			ptag.appendChild(text);
    			divvy.appendChild(ptag);
    			document.getElementById('con').appendChild(divvy);
    			var getHeight = divvy.offsetHeight;
    			//alert(getHeight);
    			arTextarea[x].style.height = getHeight + 'px';
    		}
        }
    }
    }
     
     
    </script>
    </head>
     
    <body onload="texty()">
    <div id="con">
    <textarea style="width: 500px;"> &pound;63,670.00 &divide; 2.5 = &pound;25,468.00 costs
      &pound;63,670.00 - &pound;25,468.00 = &pound;38,202.00  profit on goods
      &pound;38, 202.00 - &pound;12,500.00 - &pound;11,600.00 -  &pound;840.00 = 
      &pound;13,262. 00 profit after overheads
    e-business
      &pound;36,478.00 &divide; 2.3 = &pound;15, 850.00 costs
      &pound;36,478.00  - &pound;15, 850.00 = &pound;20, 618.00 profit on goods
      &pound;20,618.00  - &pound;9,500.00 - &pound;60.00 = &pound;11,058.00 profit after overheads.
     
    Therefore the shop was more profitable in its first year.
     
    Chris  Keegan could increase the profitability of his e-business by: 
     -Increasing his revenue by increasing the number of visitors to his site. This could be through advertising on other sites or increasing the likelihood of the site appearing in search engines.
     - Increasing his revenue by increasing the number of sales per visit through promotional offers or improving the design of the site
     - Increasing the profit on each sale by increasing the mark up
     - Decreasing the overheads by looking for cheaper hosting options.</textarea>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright im close:

    I just dont know how to get this bit going in javascript (php would be fine!)

    var strings = textAreaContents.split('\n');
    for(var i=0; i < strings.length; i ++) {
    var formatted += (strings[i] + '<br />');
    }
    alert(formatted);
    every time i iterate i need to add strings[i] and the <br /> to the formatted variable but at the mo im getting invalid variable initialisation error.

    How do i do this?

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha,

    It works but uit still only enters the <br /> 's as part of the string and not so they are rendered as line breaks by the browser...check the code below:
    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    textarea {
    overflow: none;
    }
    </style>
    <script type="text/javascript">
    function texty() {
    var arTextarea = document.getElementsByTagName("textarea");  
    if (arTextarea.length>0){      
        var numRows=0;
        for(var x=0; x <arTextarea.length; x++) {
            if(arTextarea[x].value != '') {	
    		    var textAreaContents =  arTextarea[x].value;
    			//var reNewLines=/[\n\r]/g;
    			//replace all new lines with br tags
    			var strings = textAreaContents.split('\n');
    			var formatted = '';
    			for(var i=0; i < strings.length; i ++) {
    			formatted = formatted + (strings[i] + '<br />'); 
    			}
     
     
                //var sFormatted=textAreaContents.replace(reNewLines, '<br />');
    			var boxWidth = arTextarea[x].offsetWidth;
    		   //alert(boxWidth);
                var divvy = document.createElement('div');
     
    			//divvy.style.display = "none";
    			divvy.style.backgroundColor = 'red';
    			divvy.style.width = boxWidth + 'px';
    			ptag = document.createElement('p');
    			text = document.createTextNode(formatted);
    			//alert(text.innerHTML);
    			ptag.appendChild(text);
    			divvy.appendChild(ptag);
    			document.getElementById('con').appendChild(divvy);
    			var getHeight = divvy.offsetHeight;
    			//alert(getHeight);
    			arTextarea[x].style.height = getHeight + 'px';
    		}
        }
    }
    }
     
     
    </script>
    </head>
     
    <body onload="texty()">
    <div id="con">
    <textarea style="width: 500px;"> &pound;63,670.00 &divide; 2.5 = &pound;25,468.00 costs
      &pound;63,670.00 - &pound;25,468.00 = &pound;38,202.00  profit on goods
      &pound;38, 202.00 - &pound;12,500.00 - &pound;11,600.00 -  &pound;840.00 = 
      &pound;13,262. 00 profit after overheads
    e-business
      &pound;36,478.00 &divide; 2.3 = &pound;15, 850.00 costs
      &pound;36,478.00  - &pound;15, 850.00 = &pound;20, 618.00 profit on goods
      &pound;20,618.00  - &pound;9,500.00 - &pound;60.00 = &pound;11,058.00 profit after overheads.
     
    Therefore the shop was more profitable in its first year.
     
    Chris  Keegan could increase the profitability of his e-business by: 
     -Increasing his revenue by increasing the number of visitors to his site. This could be through advertising on other sites or increasing the likelihood of the site appearing in search engines.
     - Increasing his revenue by increasing the number of sales per visit through promotional offers or improving the design of the site
     - Increasing the profit on each sale by increasing the mark up
     - Decreasing the overheads by looking for cheaper hosting options.</textarea>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure why you are using a textarea for this- but there is an easier way to calculate a non-scrolling size for a textarea, using rows and offsets:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Text area sizer</title>
    
    <script type="text/javascript">
    onload=function(){
    	var el=document.getElementsByTagName('textarea')[0];
    	while(el.scrollHeight >= el.offsetHeight) el.rows= parseInt(el.rows)+2;
    }
    </script>
    </head>
    <body>
    <body>
    <div id="con" >
    <textarea style="width: 500px;">  &pound;63,670.00 &divide; 2.5 = &pound;25,468.00 costs
      &pound;63,670.00 - &pound;25,468.00 = &pound;38,202.00  profit on goods
      &pound;38, 202.00 - &pound;12,500.00 - &pound;11,600.00 -  &pound;840.00 =
      &pound;13,262. 00 profit after overheads
    e-business
      &pound;36,478.00 &divide; 2.3 = &pound;15, 850.00 costs
      &pound;36,478.00  - &pound;15, 850.00 = &pound;20, 618.00 profit on goods
      &pound;20,618.00  - &pound;9,500.00 - &pound;60.00 = &pound;11,058.00 profit after overheads.
         
    Therefore the shop was more profitable in its first year.
           
    Chris  Keegan could increase the profitability of his e-business by:
     -Increasing his revenue by increasing the number of visitors to his site. This could be through advertising on other sites or increasing the likelihood of the site appearing in search engines.
     - Increasing his revenue by increasing the number of sales per visit through promotional offers or improving the design of the site
     - Increasing the profit on each sale by increasing the mark up
     - Decreasing the overheads by looking for cheaper hosting options.</textarea>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mr Hoo,

    I'm using a textarea because the aim of the javascript is to allow variable content to be put in to a textarea without scrollbars.

    Your code plus a timeout has allowed me to do exactly that...thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •