Cross Browser Way of Taking Block Node Containing Text Into Child Window

**seniseven** · 12-20-2012 07:40 AM

My parent window has a button with the containing text "Show Help".

The help text is supposed to be presented in a child window.

The button runs a script that

Retrieves a DOM node of a DIV element containing the help text, with the DIV element CSS property 'display:none;' set
Opens up a child window
Passes the DOM node to a function that has an argument for specifying the content of the body of the child Window

In the past, I would write out the text contained by the DIV element as a Javascript string, containing the HTML markup, and then use document.write() calls in the child window. It is inconvenient to write out long Javascript strings with HTML markup (hard to debug). Also document.write() calls are deprecated by some developers (and don't work for XHTML anyway); DOM methods (appendChild() etc) are preferred.

So I tried using approved methods---which does not include making use of the nonstandard properties outerHTML or innerHTML. I have been testing with FF17, IE9, and Chrome23 in Win7, FF17 in Ubuntu Linux, and IE8 in Win XP. In most cases, IE8 in WinXP is the problem.

I am using .importNode() and only "standardized" methods and properties (ECMA, W3C).

But there are aggravating problems. For example, importNode() works in Firefox, but when I scripted this in FF17 (Win7), it was reporting that childWin.document.body (namely, the body DOM node) was null! If I ran the script in the debugger, the body node was not null! The body node was being referenced in script after the document.close() call, which was itself subsequent to a number of document.write() calls. It was clear that the body node presence was time-dependent...and an onload event seemed to be necessary (why??). But when I write an onload event, it never triggered! These are the aggravations.

And then there is the problem of still writing the code to do the same for IE8 and IE7 earlier versions. Probably I will have to just pass a string made of HTML markup as the body, and use a document.write() call. Not good.

Has anyone else worked on this?

**ReFreezed** · 12-20-2012 12:25 PM

Do you have to use a popup window? Maybe a pop-in "window" would be better?

**seniseven** · 12-21-2012 06:05 AM

Originally Posted by refreezed

Do you have to use a popup window? Maybe a pop-in "window" would be better?

Do you have a link to working example script that does not make use of a library (jQuery, Prototype, etc) at all?

**iBeZi** · 12-21-2012 08:10 AM

How about something like this? Just have a hidden "popup" div that appears when the buttons clicked (then vanishes after a set time)

HTML Code:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			#popup {
				display: none;
				position: absolute;
				top: 50px;
				width: 200px;
				padding: 10px;
				background-color: #333;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<button id="help">Help</button>
		<div id="popup">
			<p>Here's a bunch of helpful words</p>
		</div>
		<script type="text/javascript">
			var helpBtn = document.getElementById('help');
			var popup = document.getElementById('popup');
			helpBtn.addEventListener ? helpBtn.addEventListener('click',showHelp) : helpBtn.attachEvent('onclick',showHelp);
			
			function showHelp(e) {
				popup.style.display = "block";
				popup.style.left = (document.documentElement.offsetWidth / 2) - (popup.offsetWidth / 2)+"px";
				setTimeout(function() {
					popup.style.display = "none";
				},3000);
				if(e.preventDefault) {
					e.preventDefault();
				} else {
					return false;
				}
			}
		</script>
	</body>
</html>

**mavigozler** · 12-21-2012 10:56 AM

The thing about a non-displayed block element that suddenly appears is that all other elements are sort of pushed around (re-flowed), and that can be unnerving for the user.

One way around it might be:

* the block element (DIV) that is suddenly displayed is done so in a z-layer

* the block element is positioned using CSS (the absolute or fixed property?) and this does NOT cause a re-flowing of the other elements

Will this strategy work? And does it work in IE8 and IE7?

**iBeZi** · 12-21-2012 12:07 PM

Elements that are absolutely positioned or fixed are taken out of the regular flow and have no effect on other elements, it works in every browser.

Thread: Cross Browser Way of Taking Block Node Containing Text Into Child Window

Thread Tools

Display

Cross Browser Way of Taking Block Node Containing Text Into Child Window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions