www.webdeveloper.com
Results 1 to 10 of 10

Thread: Inserting a linebreak into a string in Javascript

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    1

    Inserting a linebreak into a string in Javascript

    I have searched high and low for this and found dozens of solutions which do not actually work.

    What I would like to do is create a paragraph, insert a string into that paragraph, and be able to put linebreaks in that string.

    If I've got something along the lines of....

    Code:
    <html>
    <head>
    <script type="text/javascript">
    	function someText(){
    		var someString = "Hello" + "World";
    		var someParagraph = document.createElement('p');
    		someParagraph.textContent = someString;
    		document.getElementById('body').appendChild(someParagraph);
    
    	}
    </script>
    </head>
    <body id = 'body'>
    	<script>someText();</script>
    </body>
    <html>
    Is there anything that can be done to the

    Code:
    var someString = "Hello" + "World";
    line to make "Hello" and "World" appear on separate lines?

    I've seen people say to add \n, \r\n, or <br/> in the middle of the string. None of those work.

    I've also seen it suggested that making it into two lines of code like:
    Code:
    var someString = "Hello" 
    +"World";
    would cause it to display as two lines. That seemed sketchy, but I tried it anyway. It has about a much bearing on the way things are displayed as you'd think.

    I don't want to make it two separate paragraphs, because browsers often put a double line break there, and I only want one.

    Is there a way to do this?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443
    Try...
    Code:
    var someString = "Hello<br>World";

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there The Paul,

    and a warm welcome to these forums.

    Text strings cannot have line breaks.

    But as you using document.createElement('p'), you could try using document.createElement('br') to separate the strings....
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <script type="text/javascript">
    
    function init(){
       str=[
            'Lorem ipsum dolor sit', 
            'amet, consectetur', 
            'adipiscing elit. Donec', 
            'ultricies sollicitudin', 
            'nisi, ut molestie felis', 
            'adipiscing sit amet.'
            ];
    
        br=[];
    
        par=document.createElement('p');
    
    for(c=0;c<str.length;c++){
        par.appendChild(document.createTextNode(str[c]));
        br[c]=document.createElement('br');
        par.appendChild(br[c]);
     }
        document.body.appendChild(par);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Feb 2012
    Posts
    4

    animation script

    i will b greatful to u if u kindly give me a program to give animation for this script , there are 6 quotes in this script i want them to appear one by one on my webpage,without reloading the page, u give either fade in fade out animation or blur animation or dim animation , god bless the script whch i have is this

    <script language="JavaScript">
    //store the quotations in arrays
    quotes = new Array(6);
    quotes[0] = "So many cats, so few recipes.";
    quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
    quotes[2] = "That's not a haircut. That's a cry for help.";
    quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
    quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
    quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
    //calculate a random index
    index = Math.floor(Math.random() * quotes.length);
    //display the quotation
    document.write("\n");
    document.write(quotes[index]);
    //done
    </script>

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there zaidmavia,

    and a warm welcome to these forums.

    Strictly speaking, you should really have started a new thread for your problem.

    But we all make errors of judgement, especially me.

    Anyway have a look at this example....
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>in and out random quotes</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
        font-family:verdana,arila,helvetica,sans-serif;
        font-size:16px;
     }
    #box {
        width:680px;
        padding:20px 0;
        border:1px solid #333;
        border-radius:10px;
        margin:30px auto;
        font-size:110%;
        color:#000;
        text-align:center;
        background-color:#fff;
        box-shadow:#333 8px 8px 16px;
     }
    #text {
        filter:alpha(opacity=0);
        opacity:0;
        text-shadow:#669 1px 1px 2px;
     }
    </style>
    
    <script type="text/javascript">
       var quotes=[
                  'So many cats, so few recipes.',
                  'Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.',
                  'That\'s not a haircut. That\'s a cry for help.',
                  'The last thing I want to do is hurt you. But it\'s still on the list.',
                  'Some days it\'s just not worth gnawing through the leather straps.',
                  'Doing for blogging what Ghengis Khan did for social work.'
                  ];
    
       var test=0;
       var c=0;
       var num=0;
       var speed=50;
       var obj,temp;
    
    function init() {
       obj=document.getElementById('text');
       temp=num;
       fadeInOut();
     }
    function fadeInOut(){
    if(test==0){
       c++;
     }
    else {
       c--; 
     }
    if(obj.filters) {
       obj.style.filter='alpha(opacity='+c+')';
     }
    else{
       obj.style.opacity=c/100;
     }
       obj.firstChild.nodeValue=quotes[num];
    if(c==100) {
       test=1;
     }
    if(c==0) {
       test=0;
    while(num==temp){
       num=Math.floor(Math.random()*quotes.length);
     }
       temp=num;
     }
    setTimeout(function(){fadeInOut()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="box">
    <span id="text">Doing for blogging what Ghengis Khan did for social work.</span>
    </div>
    
    </body>
    </html>
    
    coothead

  6. #6
    Join Date
    Feb 2012
    Posts
    4

    Thumbs up

    tnx alot coothead , actually i m new to this n i dont know how to b in forums , tnx for the help i will b greatful to u if u giv me a short code for 1000 quotes with fade in fade out animation, i dnt know programming language all i cn do is edit ur code n put it in my blog , tnx again

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Depending on what tags you use will decide which seperators would work.
    I also used innerHTML in the place where you had textContent.

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    
    			function someText()
    			{
    				var someString =
    					'Hello<br />World' +
    					'<pre>Hello\nWorld</pre>';
    
    				var someParagraph = document.createElement('p');
    				someParagraph.innerHTML = someString;
    				document.getElementById('body').appendChild(someParagraph);
    			}
    
    		</script>
    	</head>
    	<body id="body">
    
    		<script>someText();</script>
    
    	</body>
    <html>

  8. #8
    Join Date
    Feb 2012
    Posts
    61
    try this one............

    var someString = "Hello" + "<br />" + "World";

  9. #9
    Join Date
    Nov 2007
    Posts
    432
    If you use <br/>, your lines will be separated vertically by only the line-height that you have defined.

    If you use <p> and </p>, the lines will be separated vertically by the line-height plus the margin defined for 'paragraph' - the default margin-bottom on <p> tags is 16 pixels (in the latest FireFox).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles