• Registered: 2008-12-23
  • Posts: 80

Topic: New Line

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!

  • Registered: 2009-01-13
  • Posts: 485

Re: New Line

For html output, use a <br /> tag.
For the source code, use "\n" without the quotes.

Last edited by jlhaslip (2009-11-03 20:29:44)

  • Registered: 2008-12-23
  • Posts: 80

Re: New Line

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( "<br />");
                $("#message").text( "\\n  \n \\\n ");
                $("#message").text( "width: " + w +  "  height: "  + h);
            ...
Thanks for any help.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,342

Re: New Line

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 <br/>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( "<br />");
                $("#message").append( "\\n  \n \\\n ");
                $("#message").append( "width: " + w +  "  height: "  + h);
  • Registered: 2008-12-23
  • Posts: 80

Re: New Line

Thanks!
Your reply was the solution I needed.

  • Registered: 2009-04-30
  • Posts: 102

Re: New Line

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.

Last edited by BeeDev (2009-11-04 04:17:51)

  • Registered: 2008-12-23
  • Posts: 80

Re: New Line

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

Last edited by williamrouse (2009-11-04 17:25:20)

  • Registered: 2009-04-30
  • Posts: 102

Re: New Line

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.

  • Registered: 2008-12-23
  • Posts: 80

Re: New Line

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?

  • Registered: 2009-04-30
  • Posts: 102

Re: New Line

I'm not sure what you're doing wrong. Did you download FireBug for Firefox?

This test page worked fine for both my Firefox and IE8 and GoogleChrome and Safari consoles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test Page</title>
</head>

<body>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    console.log("Hello World!");
});
</script>