New Line

[williamrouse]

I want to print some jQuery, javascript debug information in a DIV that I created. I don?t know how to print the new line character. Please show me how to do this.

Thanks!

[jlhaslip]

For html output, use a

tag.

For the source code, use "\n" without the quotes.

Edited November 4, 2009 by jlhaslip

[williamrouse]

In a practical example listed below, I only see the last line, not the series of text that I would expect given that I have tried a series of options. Which would you expect to work, or please suggest what I am doing incorrectly.

 

$(document).ready(function(){

var pTop = $("#content").position().top;

var pLeft = $("#content").position().left;

var h = $("#content").height();

var w = $("#content").width();

 

$("#message").text( "\n Top: " + pTop + ", left: " + pLeft);

$("#message").text( "

");

$("#message").text( "\\n \n \\\n ");

$("#message").text( "width: " + w + " height: " + h);

...

Thanks for any help.

[falkencreative]

Well, in each line, you are resetting the #message's text value, you aren't adding to it. You probably should be using "append" instead of "text", which should insert your specified code at the end of the div.

 

And, as a sidenote, since you are dealing with HTML code here, you probably should be using
s for line breaks instead of \n.

 

http://docs.jquery.com/Manipulation/append#content

 

$(document).ready(function(){
               var pTop = $("#content").position().top;
               var pLeft = $("#content").position().left;
               var h = $("#content").height();
               var w = $("#content").width();

               $("#message").append( "\n Top: " + pTop + ", left: " + pLeft);
               $("#message").append( "
");
               $("#message").append( "\\n  \n \\\n ");
               $("#message").append( "width: " + w +  "  height: "  + h);

[williamrouse]

Thanks!

Your reply was the solution I needed.

[BeeDev]

Easiest way is to get Firebug for Firefox, or if you already have GOogle Chrome or Internet Explorer 8 they come with Javascript consoles too. Then you don't even need to put line breaks and stuff.

 

And then you can start using: console.log(messageVariable)

 

$(document).ready(function(){
               var pTop = $("#content").position().top;
               var pLeft = $("#content").position().left;
               var h = $("#content").height();
               var w = $("#content").width();

              console.log("Top: " + pTop + ", left: " + pLeft);
              console.log("width: " + w +  "  height: "  + h);

 

Make sure to remove the console.log lines before going live though, they will throw an error message: "Console is not defined" when viewed with browsers without a javascript console.

Edited November 4, 2009 by BeeDev

[williamrouse]

That's a good idea. I will try to remember this in the future. How do you get to the console in IE8?

Edited November 4, 2009 by williamrouse

[BeeDev]

You can hit F12 to open Developer Tools or go to "Tools" -> "Developer Tools F12" from the top right hand menu.

 

Then choose the "Script" tab on the box that pops up from the bottom of your browser (You may need to enlarge the box as it may come up minimized at first). Then on the right hand portion you see more tabs, but by default "Console" will be chosen.

[williamrouse]

BeeDev:

I tried using your suggestion:

console.log("Top: " + pTop + ", left: " + pLeft);

console.log("width: " + w + " height: " + h);

 

I don't see any output in the console for either IE8 or FireFox. Could you suggest something that I might be doing incorrectly?

[BeeDev]