Draconian: Rigorous or unusually severe.
Derived from Draco, a politician in Athens whose legal code provided for exceedingly harsh punishments. In the brenz.net world, I refer to those developers who seek to validate their code against W3C standards, specifically XHTML 1.0 Strict and CSS level 1.
Please note, this example uses the 'target' attribute, which will render your code non-compliant with the XHTML 1.0 Strict standard.
Home Services Toolbox Downloads Gaming Tech News About Us

popup windows



Invasive Procedures blog by brenz.net




Share this page: facebook myspace twitter bebo delicious digg stumbleupon buzz fark linkedin

Opening New/Popup Windows

These popup window methods demonstrate:
  • opening a new window
  • pushing content to the new window (from the starting page)
  • changing content of the initial window (from the new window)
  • closing the popup window (from the starting page)

Method 1 (Beginner)

Draconian Coders Beware!
This method of opening a new window makes use of the 'target' attribute, which is not valid for the XHTML 1.0 Strict standard. Pages using this method for opening a new window can, however, be validated against the XHTML 1.0 Transitional standard.
Check this Page
This method is the easiest way to open a new, named window from a hyperlink (as opposed to the default behavior of having the new webpage open in the same window). No javascript is required to open the new window, however the developer has no control over the size or properties of the window. The resulting window will be a standard browser window, and will either be maximized or the size of the last non-maximized window that the user closed normally.

Additional web content can be 'pushed' to the new window by putting a 'target' property in the anchor tag and using the window name. Similarly, javascript can be used to close the new window by from the initial window by invoking the self.close() method and targetting the new window by name.

To implement, create two popup window pages - popup.html and popup2.html. Then put this HTML code in your starting webpage:
<a href="popup.html" target="myWindow">Open window ("myWindow")</a><br />
<a href="popup2.html" target="myWindow">Push content to myWindow</a><br />
<a href="javascript: self.close();" target="myWindow">Close myWindow</a>
Try it out:



Method 2 (Intermediate)

This method uses a javascript function to open a new, customizable window from a hyperlink (as opposed to the default behavior of having the new webpage open in the same window). The developer has control over the size and properties of the new window.

In this example, the resulting window will be 600 pixels wide and 400 pixels high, with many of the standard browser features disabled, other than the title bar and scrollbars. Additional pages can be 'pushed' to the same new window by putting a 'target' property in the anchor tag using the window name.

To implement, put this HTML code in your starting webpage:
<a href="javascript:popWinOpen('popup.asp',600,400);">Open window ("myWin")</a><br />
<a href="popup2.html" target="myWin">Push content to myWin</a><br />
<a href="javascript:pushURL('popup2.asp');">Push content to myWin (javascript)</a><br />
<a href="javascript:popWinClose();">Close myWin</a>
Try it out: You'll also need to include the following javascript functions:
var myWin;
myWin = "";
function popWinOpen(zURL,zWidth,zHeight) {
var popFeatures = "width=" + zWidth + ",height=" + zHeight + ",toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=1,resizable=1";
myWin = window.open(zURL,'myWin',popFeatures);
myWin.focus();
}
function popWinClose() {
// this will close the same 'myWin' popup that we opened
myWin = window.open('','myWin','');
myWin.close();
}
function pushURL(myURL) {
// this will load a new URL into the 'myWin' popup that we opened, or open a new 'myWin'
if ((!myWin.closed && myWin.location)) {
myWin.location = myURL;
} else {
var popFeatures = "width=600, height=400, toolbar=0, location=0, directories=0, status=0, menuBar=0, scrollBars=1, resizable=1";
myWin = window.open(myURL,'myWin',popFeatures);
}
myWin.focus();
}

The method(s) on this page have been tested on Windows XP, using Internet Explorer 6/7/8, Firefox 1.5/2, and Netscape 7.2.
Home Services Toolbox Downloads Gaming Tech News About Contact Us Privacy