javascript problem

I think it should be \r\n .. which is different from \n\r

Have you looked at RICH text boxes?  A plain text box is not flexible enough for formatting, and it could be that the version of IE you are using will not support the features of text boxes not in the HTML specs.

Check out --  http://www.google.com/search?num=30&q=rich+text+boxes as a place to start.

And the way I remember that is by the word "Return"... think of \r\n as an abbreviation for "Return"

...and attached is the adjusted code

Cheers.

                 function repp(){
                        var ss = document.getElementById('description').value;
                        ss = ss.replace(/(\r\n|\n|\r)/g, "<br>");
                        document.getElementbyId('description').value = ss;
                  }

Select allOpen in new window

Thanks Designbyonyx:

The solution still does not work on IE. I am attaching a screenshot.

Regards,

seeker7806
ecard-test2.jpg

Ahh.  Gotcha.  Here is a little javascript function I wrote a while back for a project that had to do a very similar thing.  The code was inspired by some website (I forget where), and I modified it to make it a little better.  It worked for me pretty rock solid.  If you need, I can turn it into a jQuery plugin.  Let me know.

// Utility Function - convert plain text to html
        function convertToHtml(text) {
            var br = '<br />'; 		// <br /> or <br>
            var usePTags = true; 	// Use P tags, else use only BR tags
            var html = text;
			
			if(html && html != null) {
				html = html.replace(/\r\n/g, "[-LB-]").replace(/\n/g, "[-LB-]").replace(/\r/g, "[-LB-]");
				html = html.replace(/\s+/g, " ");
	
				if (usePTags) {
					html = html.replace(/\[-LB-\]\[-LB-\]/gi, "</p><p>");
				} else {
					html = html.replace(/\[-LB-\]\[-LB-\]/gi, br + "\r\n" + br + "\r\n");
				}
	
				html = html.replace(/\[-LB-\]/gi, br + "\r\n");
	
				if (usePTags) {
					html = '<p>' + html + '</p>';
				}
	
				html = html.replace(/<p><p>/g, "<p>");
				html = html.replace(/<\/p><\/p>/g, "</p>");
				html = html.replace(/<p><\/p>/g, "");
				html = html.replace(/\r\n\r\n/g, "");
				html = html.replace(/<\/p><p>/g, "</p>\r\n<p>");
			}

            return html;
        }

Select allOpen in new window

Thanks Designbyonyx:

I plugged the JavaScript in but nothing happened.

I am attaching a jpeg screen shot.

Regards,
seeker7806
ecard-test3.jpg

well you must call a function first... I assumed that to be obvious.

So lets say your textbox has an ID of "myTextBox", your presentation container is a DIV with an ID of "presentation"


then you would do something like:

var html = convertToHtml( $('#myTextBox').val() );

$('#presentation').html( html );

Select allOpen in new window

I believe I am doing this wrong so I need your help.

Here is the html/javascript code:

<code>
 <div style="background-image:url('../images/large_card_1.jpg');border:none;height:472px;width:738px;" />
                                   <div id="description" name="text" style="font-family:Arial,Helvetica,sans-serif;font-size:18px;position:relative;top:100px;left:400px;color:navy;font-weight:bold;width:300px;height:300px;white-space:pre-wrap;word-wrap:break-word;_white-space:pre;" >
                                   
                 ....
<td  width="400px" valign="top" onkeypress="repp();"><textarea id="message" name="message"  style="width:300px;height:100px;" onblur="javascript:process_input();" onkeypress="return ismaxlength(this)" class="content" onkeyup="checkTaLength(this, 'charcount01', 'remaining01', 500);" onkeydown="checkTaLength(this, 'charcount01', 'remaining01', 400);" onmouseout="checkTaLength(this, 'charcount01', 'remaining01', 400);" onfocus="checkTaLength(this, 'charcount01', 'remaining01', 400);" ></textarea><br/><span style="font-size:11px; color:#CC0000"><span id="charcount01">0</span> characters entered.   |   <span id="remaining01">400</span> (of 400) characters remaining.</span></td>
....

function repp(){
                        var ss = document.getElementById('description').value;
                        ss = ss.replace(/(\r\n|\n|\r)/g, "<br>");
                        document.getElementbyId('description').value = ss;
                  }
....

var html = convertToHtml( $('#description').val());
            $('#message').html(html);
            
            function convertToHtml(description) {
                  
            var br = '<br />';             // <br /> or <br>
            var usePTags = true;       // Use P tags, else use only BR tags
            var html = message;
                  
                  if(html && html != null) {
                        html = html.replace(/\r\n/g, "[-LB-]").replace(/\n/g, "[-LB-]").replace(/\r/g, "[-LB-]");
                        html = html.replace(/\s+/g, " ");
      
                        if (usePTags) {
                              html = html.replace(/\[-LB-\]\[-LB-\]/gi, "</p><p>");
                        } else {
                              html = html.replace(/\[-LB-\]\[-LB-\]/gi, br + "\r\n" + br + "\r\n");
                        }
      
                        html = html.replace(/\[-LB-\]/gi, br + "\r\n");
      
                        if (usePTags) {
                              html = '<p>' + html + '</p>';
                        }
      
                        html = html.replace(/<p><p>/g, "<p>");
                        html = html.replace(/<\/p><\/p>/g, "</p>");
                        html = html.replace(/<p><\/p>/g, "");
                        html = html.replace(/\r\n\r\n/g, "");
                        html = html.replace(/<\/p><p>/g, "</p>\r\n<p>");
                  }

            return html;
        }

This still does not work, obviously because I am doing something wrong here.
                 
                                   
                                 
                                   </div>
ecard-test4.jpg

Wow dude... I'm not trying to be mean... but you might be in over your head.  Do you have any idea what's going on with your code?  You're not even getting you text from the right spot.  No wonder it's not working.

Being that I can't test your code, you should be able to try this.

function repp(){
                        var ss = document.getElementById('message').value; // We want to move text from message -> description
                        ss = ss.replace(/(\r\n|\n|\r)/g, "<br>");
                        document.getElementbyId('description').value = ss;
                  }

Select allOpen in new window

Thanks Designbyonyx.

Making the change
<code>
function repp(){
                        var ss = document.getElementById('message').value;
                        ss = ss.replace(/(\r\n|\n|\r)/g, "<br>");
                        document.getElementbyId('description').value = ss;
                  }
</code>

Still doesn't register any carriage return in the text box on IE.
Firefox is good though.

Regards,
seeker7806

Now try this

function repp(){
                        var ss = document.getElementById('message').value;
                        ss = convertToHtml(ss);
                        document.getElementbyId('description').innerHTML = ss;
                  }

Select allOpen in new window

Thanks Designbyonyx but still no change.

Are you a developer?  It is very difficult to help someone who doesn't have at least a basic understanding of javascript and HTML.  The code snippet above is full of novice mistakes, and the code snippet I gave you works.  The problem isn't in your find and replace function.  The problem is that it seems like you have no idea what is going on with the code.  I don't really think I can help you at this point.  If you can give me a single stand-alone html file that reproduces the error, I'd be glad to look at it.   If you have a URL, that might work as well.

Can you explain to me why it is working in Firefox and not IE?

Some browsers have better "idiot correction" than others.  I'm not calling you an idiot... but some browsers do a better job of fixing mistakes than others.  Even the little bit of code you posted has mistakes that would surprise me to work in any browser.  Without being able to see your code and debug this in a browser, I am at a loss for helping you.

One thing that could help you is to move all of your styles and scripting to external CSS and Javascript files.  Your HTML should look like this, with everything else in external files.

(See how easy it is to read?)

<div class="background">
    <div id="description"></div>
</div>


...


<td>
    <textarea id="message" cols="60" rows="7"></textarea>
    <br />
    <span id="charcount01">0</span>
</td>

Select allOpen in new window

Im doing free work here, but this how your styles and javascript should look.  Please note, I have not tested this code and can guarantee that it wont work because I cannot see everything I am dealing with.  I'm jsut trying to give you direction which will save you some headache and make you a better developer in the long run.

<style type="text/css">

div.background {
    background-image: url('../images/large_card_1.jpg');border:none;height:472px;width:738px;
}

div#description {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    position: relative;
    top: 100px;
    left: 400px;
    color: navy;
    font-weight: bold;
    width: 300px;
    height: 300px;
    white-space: pre-wrap;
    word-wrap: break-word;
    _white-space: pre;
}

textarea#message {
    width: 300px;
    height: 100px;
}

</style>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

(function($) {
    var $message = $('#message');
    var $description = $('#description');

    $message.blur(function() {
        process_input();
    }).keypress(function() {
        return ismaxlength(this);
    }).keyup(function() {
        checkTaLength(this, 'charcount01', 'remaining01', 500);
    });
}(jQuery));

</script>

Select allOpen in new window

Thanks Designbyonyx.

I will take a look at it. I am a contractor so I have to work with established templates which impose different style constraints.

In the templates I am dealing with, we cannot use external style sheets because there are so many external style sheets that the templates use which are central to the business.

So we have to put JavaScript in the block at the bottom of the template.

And I am almost certain that these "inline" (by inline here, I mean embedded in the web page) scripts are conflicting with the external style sheets....

At any rate thanks for your help. If your solutions don't help, I will keep looking.

Regards,
seeker7806

Thanks Designbyonyx.

The problem is this is for internal use only so you would not be able to access the url. Sorry.
Anyway i am accepting your solution.
Thanks!

Regards,
seeker7806