Inside Technique : Dockable Content : The Code

At a high level, the code for this technique is fairly simple. When the popup is displayed, the contents of the element are retrieved for the new window using the innerHTML property and the element display is turned off. This gives the illusion that we removed the content from the page. The size of the popup window is based on the width and height of the contents and the position is set based on the current mouse position.

Where the script gets more complex is to synchronize the page and the popups so when you close the popup the content automatically reappears in the page. In addition, we wanted the code to support more than one docked element per page. Both of these required a couple of tricks:

First, to handle synchronization, we needed to write code that tracks each undocked window. We track the windows we give out in an array. Each time a new window is given out, we make a new entry into the array. This quickly allowed us to support multiple docked elements, and set up the synchronization framework.

When writing code to synchronize, there were two types of communcations we needed to track. First, we needed to have a notification from the popup window to the page when the popup window is closed. Second, we need a notification from the page to the popup to notify it when the user leaves the page. This second notification is necessary so the popup can disconnect itself from the window. Without this notification, a script error will occur when the user closes the window because it will attempt to manipulate a different page.

To handle the notification from the popup to the page, we use the window's opener property. This property returns a reference to the window that opened the popup. However, before we call into this window, we first check if the window is dockable. This is done with a property we defined. When this property is true, we notify the opening window when we are being closed, when it is false, we just close the window without the notification.

The dockable property needs to be set by the opening window when the new window is opened and when the user navigates away from the page containing the content. Remember that we are already tracking each window in an array. When the user navigates away from the page, we use the onbeforeunload event to enumerate all windows we created and update the dockable property to false. This completes the communication loop between the page and the popup.

The last step is to ensure that any links in the popup are targeted back to the opening window. We accomplish this by giving the opening window a name, and making sure that all content in the popup target this window by default.

Below is the complete code. We added comments to explain what each piece of code is doing:

// Copyright 1998 by InsideDHTML.com, LLC. All rights reserved
// For more information, see http://www.insideDHTML.com
// This code may be reproduced as long as this copyright notice is maintained

var wArray = new Object  // The object to track windows

function swapDock(id) {
	// This function popups the window or redisplays the content
	var el = document.all[id]
	var st = el.style
	if (st.display=="none") {
		// Redisplay the content
		st.display = ""	
		// Be sure to close the undocked window
		if (!wArray[id].closed)
			wArray[id].close()
	}
	else {
		// Create the popup
		// The popup is displayed underneath the current mouse position
		wArray[id] = window.open("about:blank",id,"scrollbars=yes,width="+el.offsetWidth + ",height="+(el.offsetHeight+20) + ",top=" + (event.screenY-10)  + ",left=" + (event.screenX-80))
		wArray[id].document.open()
		wArray[id].document.write("<TITLE>" + el.title + "</TITLE>")
		// You can optionally write a style sheet to format the popup into the page 
		// Set the base target to point back to the opening window
		wArray[id].document.write("<BASE TARGET=\"main\">")
		// This is a trick that outputs the redock function into the page. 
		// Notice that we call redock without the (). This causes the actual
		// function to be inserted as a string.
		wArray[id].document.write("<SCRIPT>\n" + window.redock + "</" + "SCRIPT>")
		// When the window is closed, be sure to redisplay the content
		wArray[id].document.write("<BODY ONBEFOREUNLOAD=\"redock()\" ID=\"" + id + "\">")
		// Put the contents of the element into the popup
		wArray[id].document.write(document.all[id].innerHTML)
		wArray[id].document.close()
		// Hide the old contents
		st.display = "none"

		// Tell the popup that it is dockable
		wArray[id].dockable = true
		// Give the popup the focus
		wArray[id].focus()
	}
}

function doUnload() {
	// When the page is unloaded, tell all open popups
	// that they are no longer dockable
	for (var w in wArray)
		if (!wArray[w].closed) 
			wArray[w].dockable = false
}

window.onbeforeunload = doUnload;

function fixDock(id) {
	// Redisplay the contents
	document.all[id].style.display = ""
}

function redock() {
	// This function is only used by the popup. See the explanation
	// in swapDock() on how we embedded this into the popup.
	if (window.dockable)
		window.opener.fixDock(document.body.id)
}

// Give the opening page a name. 
// This is used by the target argument.
window.name = "main"

We are currently experimenting with dockable content on the Internet Explorer 4.x+ home page. The list of new inside techniques can be undocked for quickly navigating between articles. However, there is one disadvantage to the popup where there is no way to force them to stay on top of the browser window. When you reactivate the main browser, the popup window is moved behind the browser. This requires you to navigate back to the window or reselect it from the taskbar.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.