Solved

javascript problem

Posted on 2010-11-08
19
241 Views
Last Modified: 2012-05-10
Hi All:

I have a text box that writes on an image via an HTML page.

The text enters newlines/carriage returns when you enter text in the text box in Firefox, but does not recognize newlines/carriage returns in IE.

Here is the javascript:

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

</code>

Thanks in advance for your help.

Regards,
seeker7806
0
Comment
Question by:seeker7806
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 8
19 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34088525
I think it should be \r\n .. which is different from \n\r
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34088551
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.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34088555
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;
                  }

Open in new window

0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:seeker7806
ID: 34105456
Thanks Designbyonyx:

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

Regards,

seeker7806
ecard-test2.jpg
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34106673
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;
        }

Open in new window

0
 

Author Comment

by:seeker7806
ID: 34106815
Thanks Designbyonyx:

I plugged the JavaScript in but nothing happened.

I am attaching a jpeg screen shot.

Regards,
seeker7806
ecard-test3.jpg
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34107058
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 );

Open in new window

0
 

Author Comment

by:seeker7806
ID: 34108324
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
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34108968
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;
                  }

Open in new window

0
 

Author Comment

by:seeker7806
ID: 34109016
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

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34109028
Now try this
function repp(){
                        var ss = document.getElementById('message').value;
                        ss = convertToHtml(ss);
                        document.getElementbyId('description').innerHTML = ss;
                  }

Open in new window

0
 

Author Comment

by:seeker7806
ID: 34109051
Thanks Designbyonyx but still no change.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34112377
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.
0
 

Author Comment

by:seeker7806
ID: 34113005
Can you explain to me why it is working in Firefox and not IE?
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34113345
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>

Open in new window

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34113513
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>

Open in new window

0
 

Author Comment

by:seeker7806
ID: 34113716
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
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34114137
sorry I can't be of more help.  If you could get me a url, I could help a little more.

Basically, you need to do the following things:

1) Make sure you are getting the text from the #message box.  This should be plain text with line breaks.  You should be able to alert( [text here] ); to make sure you are successfully GETTING the text.

2) Send that text to the function I gave you.  contertToHtml ( [text from #1] );

3) Insert the text into the #description area.

Break it down into these 3 steps and make sure it works in all browsers before moving to the next step.  hope that helps.
0
 

Author Comment

by:seeker7806
ID: 34114228
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question