ITauthor

I wrote a standard loadXML JavaScript function that goes off, opens an XML files, grabs the whole document and returns it.

I put the contents of the document into a variable called root and then did:

alert(root.childNodes.length);

Here's my XML file:

<?xml version="1.0" ?>

<relatedtopics>

	<topic id="createrolegroup" href="createrolegroup.html">Create a role group</topic>
	<topic id="usesettingseditor" href="usesettingseditor.html">Use the Settings editor</topic>
	<topic id="turnonuserfriendlydatesinsearchqueries" href="turnonuserfriendlydatesinsearchqueries.html">Turn on user-friendly dates in search queries</topic>
	<topic id="systempicklistsindetail" href="systempicklistsindetail.html">The system picklists in detail</topic>
	<topic id="shutdownserver" href="shutdownserver.html">Shut down a server</topic>

</relatedtopics>

What number do you think gets displayed by the alert?

The answer is different depending on which browser you use. In IE you get 5 (which is what I had expected), but in Firefox you get 11. Why?

The answer is that Firefox covertly adds a #text node for each area of whitespace between the child nodes that are visible in your XML. So in the above XML there's actually an invisible child node before the first topic element, another one between each topic element, and another after the last topic element - making 11 nodes in total.

If I'd written the XML like this:

<?xml version="1.0" ?>

<relatedtopics><topic id="imadmin_createrolegroup" href="createrolegroup.html">Create a role group</topic><topic id="imadmin_usesettingseditor" href="usesettingseditor.html">Use the Settings editor</topic><topic id="imadmin_turnonuserfriendlydatesinsearchqueries" href="turnonuserfriendlydatesinsearchqueries.html">Turn on user-friendly dates in search queries</topic><topic id="imadmin_systempicklistsindetail" href="systempicklistsindetail.html">The system picklists in detail</topic><topic id="imadmin_shutdownserver" href="shutdownserver.html">Shut down a server</topic></relatedtopics>

I would have got 5 in both browsers.

This is nicely explained, with a useful diagram, in an article called "Whitespace in the DOM" at http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM.

function turnon(td) { td.className='divmenuover'; } function turnoff(td) { td.className='divmenu'; } function copycode(ta) { var obj = document.forms[ta].code; if ( (navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4) ) { copythecode(obj); } else { highlightthecode(obj); } } function highlightthecode(obj) { obj.select(); obj.focus(); } function copythecode(obj) { highlightthecode(obj); textRange = obj.createTextRange(); textRange.execCommand("RemoveFormat"); textRange.execCommand("Copy"); alert("Code segment has been copied to your clipboard."); }

The following code (from www.searchengineforums.com) allows you to click a link to select all the code in a textarea box. You can then Ctrl+C it to copy it. If you're using Internet Explorer, it's copied to the clipboard for you.

Select the code

function turnon(td) { td.className='divmenuover'; } function turnoff(td) { td.className='divmenu'; } function copycode(ta) { var obj = document.forms[ta].code; if ( (navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4) ) { copythecode(obj); } else { highlightthecode(obj); } } function highlightthecode(obj) { obj.select(); obj.focus(); } function copythecode(obj) { highlightthecode(obj); textRange = obj.createTextRange(); textRange.execCommand("RemoveFormat"); textRange.execCommand("Copy"); alert("Code segment has been copied to your clipboard."); }

As I mentioned above, this piece of Javascript comes from www.searchengineforums.com. This site contains a stack of interesting forums and is well worth checking out.

A useful tip for debugging a Web page. To display the CSS class name of objects on the page as you move the mouse over them, add the following JavaScript in the head section of the page (or in the link .js file): document.onmouseover=Function("window.status=event.srcElement.className"); The class name is displayed in the status bar. You can do the same thing for element names (change className to tagName) or IDs (change className to id).

After wasting too much time scouring the internet for a way of positioning things accurately in Firebird/Mozilla and IE using only CSS, I've given in and gone for using two separate CSS files, with the following lines of JavaScript to direct the browser to the appropriate file:


OK, so I've given in. But at least now I can get on and finish off the page, which has been languishing, three-quarters-done, for about a week now. ITauthor.com will then, finally, have a proper home page.
Read the rest of this entry »