Solved

javascript problem

Posted on 2010-11-08
19
232 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
Comment Utility
I think it should be \r\n .. which is different from \n\r
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
Comment Utility
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
 

Author Comment

by:seeker7806
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:seeker7806
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks Designbyonyx but still no change.
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
Comment Utility
Can you explain to me why it is working in Firefox and not IE?
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now