19840

How do I make a new line or add HTML to this Javascript function?

I trying to create a typewriter effect, I got everything working, but I cannot figure out how to create a new line.

I've tried all three:

\n \r <br />

but it just types those characters.

Here is my javascript function:

$.fn.Typewriter = function(opts){ var $this = this, defaults = { animDelay: 50 }, settings = $.extend(defaults, opts); $.each(settings.text, function(i, letter){ setTimeout(function(){ $this.html($this.html() + letter); }, settings.animDelay * i); }); }

Here is an example how I'm calling it:

$('#howto').Typewriter({ animDelay: 100, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r Ut enim ad minim veniam, quis nostrud exercitation \n ullamco laboris nisi ut aliquip ex ea commodo consequat.'});

This is how it end up looking:

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

I want it to look like:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

All help is appreciated!

http://jsfiddle.net/9Qsku/

Answer1:

use \n on the string and the snipplet modified this way

$.fn.Typewriter = function(opts){ var $this = this, defaults = { animDelay: 50 }, settings = $.extend(defaults, opts); $.each(settings.text, function(i, letter){ setTimeout(function(){ $this.html($this.html() + (letter!='\n'?letter:'<br />')); }, settings.animDelay * i); }); }

Answer2:

<br/> should work fine: http://jsfiddle.net/7WVZX/

[Update] The issue might be that you are adding the characters one by one, instead of adding the line break as a whole. This might work better for you:

$this.html(settings.text.substr(0,i));

The result: http://jsfiddle.net/9Qsku/1/

Answer3:

Try using .html ...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');

Recommend

  • jquery get the cursor position after click
  • Fade in/out and pause on mouse over with jQuery
  • Bootstrap center align two blocks of text vertically
  • Perform function on form submit
  • howto find our the current language which the user has selected on his WP7?
  • Jquery - Break/Prevent each loop
  • Disable Liquibase temporarily in JHipster 2.26
  • jquery: how to find an element which is coming 2 elements before current element
  • Changing the publicly exposed endpoint URL for a WCF web service without changing the site bindings
  • Img height on auto height div
  • Resource for understanding view, projection, 'virtual camera' in OpenGL or graphics in gen
  • Seamless scrolling text
  • IE8 stops network access after 5 long polling request
  • setTimeOut and local function
  • Add spaces between words in spaceless string
  • Messed up characters in webpages (especially social media)
  • Python: sending key press events over SSH
  • iOS Localization Doesn't Work with More Than 63 Files
  • Why does the font in these TD elements render at different sizes?
  • Scala: Function returning an unknown type
  • why calling cd shell command through system() or execvp() from a child process won't work?
  • LiveData is abstract android
  • Why use database factory in asp.net mvc?
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • How to get Eclipse Oxygen to run on Java 9
  • Sencha Touch 2.0 Controller refs attribute not working?
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • QLineEdit password safety
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • Why winpcap requires both .lib and .dll to run?
  • Return words with double consecutive letters
  • XCode can't find symbols for a specific iOS library/framework project
  • How to get icons for entities from eclipse?
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • JaxB to read class hierarchy
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal