Nearly every modern browser supports the console.log() command to print out data during debugging without having to resort to alert() and pressing enter until you go nuts. Of course Microsoft Internet Explorer does not, which is why I found myself getting false error reports from collegues when sending them code to check out (I naturally use Firefox with Firebug).

To change this situation I wrote a small JavaScript that simulates a console only when your browser does not support it. This means that you can use console.log() safely and even MSIE will show you the output in a small dynamically generated DIV on the page.

• Check out Faux Console

P.S. Robert, should I have called this “The only simulated debugging console you will ever need?”

[tags]Internet Explorer,debugging,logging,hacks,firebug,console,whydontyouusearealbrowser,hack[/tags]

Q: I need to know when a user has changed the content of a form field before submitting the form. It’d be easy in PHP to compare the value stored in the DB with the $_POST value of the field, but this needs to happen in JavaScript.

A: There are several ways to do that. You could loop through all the fields when the document has loaded and store their values in an array and loop through and compare with that one when you submit the form (catching this via a submit handler on the form element and not when a button was clicked as the user might hit the enter to submit the form). However, this means you need to loop twice and when you run the loop to read out the values when the document has loaded the user might already have started editing the field. A much cleverer version is to run only one loop when the form was submitted and compare each field’s defaultValue property with the value property. It is not that known, but every field has a defaultValue property that stores what has been the value in the value attribute when the element was rendered. The value property stores what was entered in the field at the time you read it out. When the two don’t match, the user has altered the field.

This has been published in the Q&A session of the UK based paper magazine “net”. Reproduction rights were given by the publisher.

[tags]netmagazine,JavaScript,formvalidation,webdevtrick[/tags]

Q: I keep having problems with a list showing up as two lines of instead of one (there is a big gap between the items) in Internet Explorer 6. I don’t know what is causing it as there is nothing inside the list items but text.

A: The problem is that you most likely have line breaks and tabs in between the closing LI and the next opening LI. This is a great thing to do to keep your code readable but Internet Explorer 6 (MSIE6) has a problem with it. One workaround would be to add the linebreaks and tabs inside the brackets of the LI elements, but that is neither pretty nor clever as MSIE6 is on the decline. You can use CSS to work around the same problem by using a fixed height for MSIE6 and overriding this for newer and better browsers that understand the child selector. A sequence like li{height:1em;} html>body li{height:auto;} will fix your problem as MSIE6 also increases the size of the element when the font is larger or the content of the list item spills out into two lines. Without the second selector newer browsers would cut off your content.

This has been published in the Q&A session of the UK based paper magazine “net”. Reproduction rights were given by the publisher.

[tags]netmagazine,CSS,lineheight,whitespace,problem,IE,webdevtrick[/tags]

I am going to use you as my guinea pigs here. For an upcoming workshop in Singapore I am creating presentations and also screencasts to take away. Therefore I just recorded one of the sessions on the essentials of DOM scripting and put this “dry run” screencast on my server for you to check out.

You can also check the high quality version:DOM Essentials in 10 minutes screencast and tell me what you think.

[tags]DOM,scripting,DOMscripting,powerpoint,screencast,tutorial[/tags]

I normally don’t share youtube links, but this is absolutely fabulous. One of the clearest, non-hyped explanation of web2.0 I have ever seen.

Embedded media not starting? Go to youtube to see it

[tags]video,web2.0,webtwooh,community,information[/tags]