?
Solved

javascript problem

Posted on 2010-11-08
19
Medium Priority
?
252 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
  • 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
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!

 

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 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

807 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