SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascrip <br/> equivilent

    Hi All,
    I am a COMPLETE newbie to javascript.. actually i dont really know the first thing about it yet but i have a div on a site that uses javascript to fade in and out text.

    All i want to do is but a line break / return in the text.

    Im sure this has been asked before but i couldnt find anything accept for one guy suggesting using '/n' but that didnt work.


    Here's the script:

    Code JavaScript:
    arrFadeTitles[0] = "A line of text here. PAGE BREAK HERE. More text here";

    Thanks in advance.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A line break in JavaScript is "\n" (note the backslash).

    Code JavaScript:
    arrFadeTitles[0] = "A line of text here.\nMore text here";
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Just to add onto AutisticCuckoo's post but you should also note \n only works when the string is encased with double quotes "\n"

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Just to add onto AutisticCuckoo's post but you should also note \n only works when the string is encased with double quotes "\n"
    You are confusing JavaScript and PHP.

    In JavaScript either "\n" or '\n' is a linefeed whereas in PHP you can only use "\n".
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    O.o, **** that's embarrassing

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Everyone,

    Yeah thats what i thought it was (i just wrote the backslash wrong in the post oops!) but its not working...
    Any ideas why?

    Heres the whole script:

    Code JavaScript:
    function setupFadeLinks() {
      //add as many as you want 
      //the links are the arrFadeLinks
      arrFadeLinks[0] = "http://javascriptsource.com/snippets/popup-blocker-detection.html";
      //the title are the arrFadeTitles
      arrFadeTitles[0] = "A line of text here.\nThis should be a new line";
      arrFadeLinks[1] = "what.php";
      arrFadeTitles[1] = "A line of text here.\nMore text here";
      arrFadeLinks[2] = "what.php";
      arrFadeTitles[2] = "A line of text here.\nThis should be a new line";
      arrFadeLinks[3] = "what.php";
      arrFadeTitles[3] = "A line of text here.\nMore text here";
      arrFadeLinks[4] = "what.php";
      arrFadeTitles[4] = "5. insertAfter()";
      arrFadeLinks[5] = "what.php";
      arrFadeTitles[5] = "6. insertAfter()";
      arrFadeLinks[6] = "what.php";
      arrFadeTitles[6] = "7. insertAfter()";
     
    }
     
    // You can also play with these variables to control fade speed, fade color, and how fast the colors jump.
     
    //fade out
    var m_FadeOut = 200;
    //try and leave this 1 under 50
    var m_FadeIn=50;
    //dont no yet lol
    var m_Fade = 0;
    //dont yet lol but it changes some thing lol
    var m_FadeStep = 10;
    //fade wait
    var m_FadeWait = 1600;
    var m_bFadeOut = true;
     
    var m_iFadeInterval;
     
    window.onload = Fadewl;
     
    var arrFadeLinks;
    var arrFadeTitles;
    var arrFadeCursor = 0;
    var arrFadeMax;
     
    function Fadewl() {
      m_iFadeInterval = setInterval(fade_ontimer, 10);
      arrFadeLinks = new Array();
      arrFadeTitles = new Array();
      setupFadeLinks();
      arrFadeMax = arrFadeLinks.length-1;
      setFadeLink();
    }
     
    function setFadeLink() {
      var ilink = document.getElementById("fade_link");
      ilink.innerHTML = arrFadeTitles[arrFadeCursor];
      ilink.href = arrFadeLinks[arrFadeCursor];
    }
     
    function fade_ontimer() {
      if (m_bFadeOut) {
        m_Fade+=m_FadeStep;
        if (m_Fade>m_FadeOut) {
          arrFadeCursor++;
          if (arrFadeCursor>arrFadeMax)
            arrFadeCursor=0;
          setFadeLink();
          m_bFadeOut = false;
        }
      } else {
        m_Fade-=m_FadeStep;
        if (m_Fade<m_FadeIn) {
          clearInterval(m_iFadeInterval);
          setTimeout(Faderesume, m_FadeWait);
          m_bFadeOut=true;
        }
      }
      var ilink = document.getElementById("fade_link");
      if ((m_Fade<m_FadeOut)&&(m_Fade>m_FadeIn))
        ilink.style.color = "#" + ToHex(m_Fade);
    }
     
    function Faderesume() {
      m_iFadeInterval = setInterval(fade_ontimer, 10);
    }
     
    function ToHex(strValue) {
      try {
        var result= (parseInt(strValue).toString(16));
     
        while (result.length !=2)
                result= ("0" +result);
        result = result + result + result;
        return result.toUpperCase();
      }
      catch(e)
      {
      }
    }

    Cheers!

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    If you look at the source code you will find that \n is working.

    If you want the break to appear on the rendered HTML code, you will need to use <br> to affect the on-page display of the text.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any white-space character, including line break, renders as a regular space (U+0020) in HTML. Furthermore, multiple adjacent spaces collapse into one.

    You can use a <br> element as Paul says, or you can use CSS to specify that white-space be rendered literally (e.g., white-space&#58;pre).
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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