www.webdeveloper.com
Results 1 to 6 of 6

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

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    66

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

    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?

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Do you have to use a popup window? Maybe a pop-in "window" would be better?

  3. #3
    Join Date
    Jul 2010
    Posts
    66
    Quote Originally Posted by refreezed View Post
    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?

  4. #4
    Join Date
    Dec 2012
    Posts
    95
    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>

  5. #5
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    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?

  6. #6
    Join Date
    Dec 2012
    Posts
    95
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles