0

Javascript CSS issue:

I am using a textarea box to write to a div. I get the textarea box to do this by using the following javascript:

<script type="text/javascript">

   function process_input(){
    document.getElementById("description").innerHTML = document.getElementById("message").value;
    return true;
   }
 </script>

I style the div to have white-space:pre-wrap which works in Firefox but not in IE. Does anyone know of either a css rule or some additional javascript to make the div reflect carriage returns entered in the text box to also be entered in the div?

I am working on the perl cgi script that someone else started to have the text which is using a background image sent as an ecard. Here is the perl cgi script:

#!/usr/local/bin/perl5

use CGI;
use GD;
use CommonSubs;
use DBI;

use dbInfo;

$q = new CGI;


$userInfo= &CommonSubs::DirInfo($userId);

$user = $ENV{'REMOTE_USER'};
$from = $q->param('from');
$to = $q->param('to');
$cc = $q->param('cc_manager');
$card = $q->param('card');
$message = $q->param('message');



my %availableCards = ("card1"  =>  "large_card_1.jpg",
      "card2"  =>  "large_card_2.jpg",
      "card3"  =>  "large_card_3.jpg",
      "card4"  =>  "large_card_4.jpg",
      "card5"  =>  "large_card_5.jpg",
      "card6"  =>  "large_card_6.jpg",
      "card7"  =>  "large_card_7.jpg",
      "card8"  =>  "large_card_8.jpg",
      "card9"  =>  "large_card_9.jpg");

my $cardToUse = $availableCards{$card};
my $emailContent = "";

$text = $message;
@lines = split(/\n/, $text);
$lCnt .= $#lines+1;
$lineStart = 80;
$lineHeight = 24;



$container = "..../root-wwwin/htdocs".$cardToUse;
$font = "....verdana.ttf";




$image = GD::Image->newFromJpeg($container);


 $txtColor = $image->colorResolve(0,0,0);

 for ($i=0; $i<$lCnt; ++$i){
$xPos = 375;
$yPos = $lineStart + ($lineHeight*$i);
@bounds = $image->stringTTF($txtColor,$font,13,0,$xPos,$yPos,@lines[$i]);
}


$ts = time();
$imgFile = "ecard_".$user."_".$ts.".jpeg";

open(IMGFILE, "...$imgFile");
binmode IMGFILE;
print IMGFILE $image->jpeg;
close (IMGFILE);

$img = "<img border=0 src=\"...$imgFile\" />";

$emailContent = <<HTML;


$card


HTML


&CommonSubs::sendEmail("$to\@xxx.com","$from\@xxx.com","$cc\@xxx.com",       "","$bcc\@xxx.com",$emailContent);

print "Content-type: text/html\n\n";
print "$img";
print "ecard sent";

What I need is perl cgi code to make the text wrap on top of the image which is being uses as a background in the html, when it is sent via sendmail.

Thanks in advance for your help.

1
  • 3
    You probably should separate your question into 2 separate ones. You will get better answers.
    – Strelok
    Aug 19, 2010 at 6:47

2 Answers 2

1

Pre-wrap alternatives :

.wordwrap {  
     white-space: pre-wrap;       /* css-3 should we be so lucky... */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 ?? */
     white-space: -o-pre-wrap;    /* Opera 7 ?? */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
     _white-space: pre;   /* IE only hack to re-specify in addition to
    word-wrap  */
     }
4
  • Thanks for your response. This works in Firefox but not IE. The div will not show a new line or carriage return when you hit enter in the textarea box.
    – seeker7805
    Aug 19, 2010 at 16:09
  • @seeker7805: which version of IE are you using? Aug 20, 2010 at 4:36
  • Hi Nikhill: I am using IE 8. Regards, seeker7805
    – seeker7805
    Aug 21, 2010 at 19:29
  • 1
    @seeker7805: try to look at this link msdn.microsoft.com/en-us/library/cc304082(VS.85).aspx, will be helpful for you. Aug 23, 2010 at 7:01
0

For your CSS issue, try the following style:

.wordwrap {  
   white-space: pre-wrap;       
   word-wrap: break-word;       
   _white-space: pre;  
 }

Yes, the underscore is there for a reason.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.