The Web Developer extension for Firefox is in invaluable when you are writing JavaScript that dynamically changes the HTML on a Web page. The feature I use most often is:

right-click > Web Developer > View Source > View Generated Source

This shows you the HTML as it is at this moment in time, rather than the original HTML that came down the pipe.

Microsoft's Internet Explorer Developer Toolbar provides some useful functionality for the Web developer, but it doesn't have a View Generated Source option. However, I remembered an old posting (from March 2004) that had a way of viewing dynamically modified source for IE:

www.itauthor.com/notes/archives/2004/03/viewing_dynamic.html

The trick is to paste the following into the IE address bar:

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

This opens a new window or tab and shows the generated source. I've been using it in IE7 and it's a God-send.

BTW: to get the Internet Explorer Developer Toolbar, visit:
www.microsoft.com/downloads/

Read the rest of this entry »

You can use the following JavaScript to test whether the current page is being displayed as a frame within a frameset, or is being displayed as a standard, standalone Web page.

In this example I'm just displaying a message, in real life you could use this to change what's displayed on the page. For example, I'm using similar code in a linked JavaScript file to show or hide a div on the page. I use this in a Flare Help project so that, when a topic is viewed as a standalone page a link is displayed allowing the user to view the page within the 3-frame Web Help (i.e. topic frame, navigation frame and toolbar frame).

<script language="javascript">
<!--
function showHideHelpLink() {
   if (location.href == parent.location.href)  {
     alert("single page");
   }
   else {
     alert("I'm in a frame");
   }
}
// -->
</script>

= 4)) {
window.external.AddFavorite(url, title);
} else if (navigator.appName == 'Netscape') {
window.sidebar.addPanel(title, url, '');
} else {
alert('Press CTRL-D(Netscape) or CTRL-T(Opera) to Bookmark');
}
}
//-->

I have a set of complex web pages that are built in a frameset within a frameset (not my idea - this is WebHelp I've output from RoboHelp and that's how it comes out). Fortunately, the JavaScript provided by RoboHelp includes a convenient way of calling a particular page within one of the embedded frames, using parameter values in the URL. For example, if the outermost page is called mainpage.html and the inner page you want to show is called mytopic.html then you can show this topic by calling up mainpage.html#mytopic.html

This provides a way of bookmarking the current page within a complex frameset. But to do this we need 3 things:

1) The complete URL of the main page (which is the grandparent frame of the frame that contains the page you want to bookmark).

2) The file name of the page you want to bookmark.

3) The title of the page you want to bookmark.

The following button shows information about the page. On this page the values for the current page
and the grandparent page are the same, because this page isn't in a frameset. You'll just have to take my word for it
that this works when the current page is embedded in a frame of a frameset that is itself within a frameset.

We can use the information shown in the alert box for the above button, to
build the parameter values that we need to pass to the bookmark function. The following button displays the 'Add Bookmark' or 'Add Favorite' dialog box with the details for this page. Try clicking it - but if you use Firefox I'd recommend you don't actually add the bookmark, because the resulting bookmark will display a framed version of this page.

Here's the bookmark function:

<script language="javascript" type="text/javascript">
<!--
function bookmark(url, title){
  if ((navigator.appName == 'Microsoft Internet Explorer') && (parseInt(navigator.appVersion) >= 4))
  {
    window.external.AddFavorite(url, title);
  }
  else if (navigator.appName == 'Netscape')
  {
    window.sidebar.addPanel(title, url, '');
  }
  else
  {
    alert('Press CTRL-D(Netscape) or CTRL-T(Opera) to Bookmark');
  }
}
//-->
</script>

View the source code to see the onclick values that call this function.

Read the rest of this entry »

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.

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.