CODEWITHSUNDEEP
javascriptjqueryhtml
RapsFan1981
RapsFan1981

Reputation: 1197

Jquery - Having trouble forcing line breaks in string

I have a string I'm writing to the screen one character at a time. The string is supposed to be printed on three lines and I tried to do this using the \n line break but the whole string still appears on one line. What am I doing wrong?

<?php
include("header.php");
?>

<body>
<div id="content" class="termFont" align="left">
<p>
<p class="caption"></p><p class="cursor">|</p>

</p>
</div>
<script type="text/javascript">
var captionLength = 0;
var caption = "Greetings Professor Falken\n\nA strange game. The only winning move is not to play.\n\nHow about a nice game of chess?";


function cursorAnimation()
{
  $("p.cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}

$(document).ready(function()
{
    blinkingCursor();
 setInterval ( "cursorAnimation()", 600 );
});

function blinkingCursor()
{
  type();
}

function type()
{
  $('p.caption').html(caption.substr(0, captionLength++));
  if(captionLength < caption.length+1)
  {
    setTimeout("type()", 50);
  }
  else
  {
    captionLength = 0;
    caption = "";
  }
}
</script>
</body>
</html>

Upvotes: 1

Views: 633

Answers (1)

Pointy
Pointy

Reputation: 413702

Add a <br> to the string instead of "\n". HTML generally doesn't care about whitespace (unless styled so as to do so).

Also when you call setTimeout() do it like this:

setTimeout(type, 50);

Using a string can cause all sorts of weird problems and it's rarely necessary.

edit — as to my comment about styling the HTML, you could probably add "white-space: pre" to the CSS for the "caption" element. Then your newlines would be obeyed.

Upvotes: 2

Related Questions