Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
navigation
navigation
navigation
Open a page in a new window
You should be familiar with a standard page link as shown in the image. You can open that page in a new window just by checking the checkbox marked 'Open This Link in a New Window'
See it in action with Test Popup Page 1
You will notice some obvious disadvantages:
You should be familiar with a standard page link as shown in the image. You can open that page in a new window just by checking the checkbox marked 'Open This Link in a New Window'
See it in action with Test Popup Page 1
You will notice some obvious disadvantages:
- The page is way too big for the content it contains
- It has provision for a scroll bar
- It has a status bar at the bottom
Pop Up a Page in a Window
Sometime you may want a small (or big!) explanation or similar that pops up in its own window. The Built-in Pop Up Function allows you to place single images in a pop up window. That function does not allow you to pop up text or a regular web page. For that you need something different. This page covers some ways you can do that together with a few tips and tricks:
- Open a page in a new window
- Setting it all in a fancy link
- Move it all (mostly) into a code object
- Making links to the code object
- Closing popups
Check this box >>
Setting it all in a fancy link
The aim here is to click on an image or some text and have a new window pop up, but with better characteristics. Make your link as you normally would but instead, set these values:
Link type: (leave blank)
Link URL: javascript:void(window.open('MyPage.html','MyWinName', 'width=300,height=500'))
See it in action with Test Popup Page 1
The next image shows what this typical link looks like in the text editor
Change the arguments to the window open function as follows:'MyWinName' The name of the popup. If you want to reuse a popup, give it the same name as before. If you want a new popup window, give it a new name.
width=300 Width of your popup in pixels
height=500 Height of your popup in pixels
Other features as required, separated with commas (more below)
Note that there are three sets of single quotes, one each around the page name, window name and features.
If you have two or more pages using the same MyWinName, both pages will open in the same window. You can see the links I used by hovering your mouse and looking at the status bar. See the same window in action again with an (almost) blank page. The popup may appear under the main window -- a disadvantage we will fix later. The reason is interesting. You have the popup on top and you click a link on the main window. This gives the main window focus, which means it moves on top of the popup. The link then changes the page in the window, but without moving the window back to the top.
Select the two pages in sequence and notice that you can have one or the other at a time but not both. If you reposition the popup window, it stays in the new position until you close it. Test Popup Page 1 again in the same window
Here is the same link again, but this time, it will open in a new window. Leave the previous window open to confirm that. I have given the window a new name in the link. See it in action -- Test Popup Page 1 in a new window.
Other features
Here is the same link again, but this time, with a status bar. Hover over the link to see how I have changed it. Again, I have given the window a new name in the link. See it in action -- Test Popup Page 1 in a new window with status bar. The only significant change is the addition of the feature status=yes. Look in the code object below for other features you may wish to use.
The aim here is to click on an image or some text and have a new window pop up, but with better characteristics. Make your link as you normally would but instead, set these values:
Link type: (leave blank)
Link URL: javascript:void(window.open('MyPage.html','MyWinName', 'width=300,height=500'))
See it in action with Test Popup Page 1
The next image shows what this typical link looks like in the text editor
Change the arguments to the window open function as follows:
If you have two or more pages using the same
Select the two pages in sequence and notice that you can have one or the other at a time but not both. If you reposition the popup window, it stays in the new position until you close it. Test Popup Page 1 again in the same window
Here is the same link again, but this time, it will open in a new window. Leave the previous window open to confirm that. I have given the window a new name in the link. See it in action -- Test Popup Page 1 in a new window.
Other features
Here is the same link again, but this time, with a status bar. Hover over the link to see how I have changed it. Again, I have given the window a new name in the link. See it in action -- Test Popup Page 1 in a new window with status bar. The only significant change is the addition of the feature status=yes. Look in the code object below for other features you may wish to use.
Leave unchecked >>
Move it all (mostly) into a code object
The link above is a little unwieldy and hard to edit, especially as you start adding features Also if it has been used before, it may popup under the main window, and can leave old popups hanging around. Using a code object can fix those problems.
<SCRIPT type="text/javascript">
function pop(aURL,aName,aWidth,aHeight){
if (aName==undefined) {aName='default'} //change for new window name
if (aWidth==undefined) {aWidth=300} //change to set default width
if (aHeight==undefined){aHeight=500}//change to set default height
var Features="width="+aWidth //inside width of page
Features+=",height="+aHeight //inside height of page
Features+=",left=100,top=100" //starting posn of window on screen
//Features+=",toolbar=yes" //display buttons like back, forward
//Features+=",directories=yes" //add directory buttons
//Features+=",location=yes" //allow user to enter new URL
//Features+=",menubar=yes" //add the menubar (File, Edit etc)
//Features+=",resizable=yes" //allow visitor to resize window
//Features+=",status=yes" //display status bar at bot of browser
//Features+=",scrollbars=yes" //hor and vert scrollbars when reqd
aName=window.open(aURL,aName,Features)
aName.focus() //bring window to the front
//aName.blur() //send window to back as a popunder
}
</SCRIPT>
Test it here: Open Test Page 1 Open Blank Page in same window
Open Test Page 2 in new window Open Test Page 1 in resized new window
Open image in resized new window -- you can do it, but there are better ways!
Copy and paste the code to your page as a code object, and put CSS positioning off. This code is more complicated than it needs to be -- it has provision for changes you may want.
Change the default width and height or the starting x,y position (left, top) of the popup on screen by changing the values near the top.
If you want a feature like a status bar, uncomment the line which says:
//Features+=",status=yes" //display status bar at bot of browser
Features+=",status=yes" //display status bar at bot of browser
In javascript a line that is just a comment is preceded by a double slash, and will be ignored when the code runs. To uncomment it, delete the double slash shown in red. This makes the line a real part of the code object.
If you want a popunder, change the bottom lines like this:
//aName.focus() //bring window to the front
aName.blur() //send window to back as a popunder
Making links to the code object
This is a basic link and perhaps all you will need for most purposes:
Link type: (leave blank for all of these)
Link URL: javascript:pop('MyPage.html') substitute the name of your page
If you want a new window to open, give it a new name. This allows a second popup.
Link URL: javascript:pop('MyPage.html','MyWin') substitute the name of your page and the name of your window
If you want a different size window to open, give it a new name and specify the new dimensions.
Link URL: javascript:pop('MyPage.html','MyWin',400,400)
If you want an image, specify a relative path to the image or a full URL, give the window a name and specify the new dimensions.
Link URL: javascript:pop('image/MyImage.jpg','MyWin',400,400)
There are examples of each of these in the links above. You should be able to substitute a full of partial URL for the page or image name, but I have not tested this.
The link above is a little unwieldy and hard to edit, especially as you start adding features Also if it has been used before, it may popup under the main window, and can leave old popups hanging around. Using a code object can fix those problems.
<SCRIPT type="text/javascript">
function pop(aURL,aName,aWidth,aHeight){
if (aName==undefined) {aName='default'} //change for new window name
if (aWidth==undefined) {aWidth=300} //change to set default width
if (aHeight==undefined){aHeight=500}//change to set default height
var Features="width="+aWidth //inside width of page
Features+=",height="+aHeight //inside height of page
Features+=",left=100,top=100" //starting posn of window on screen
//Features+=",toolbar=yes" //display buttons like back, forward
//Features+=",directories=yes" //add directory buttons
//Features+=",location=yes" //allow user to enter new URL
//Features+=",menubar=yes" //add the menubar (File, Edit etc)
//Features+=",resizable=yes" //allow visitor to resize window
//Features+=",status=yes" //display status bar at bot of browser
//Features+=",scrollbars=yes" //hor and vert scrollbars when reqd
aName=window.open(aURL,aName,Features)
aName.focus() //bring window to the front
//aName.blur() //send window to back as a popunder
}
</SCRIPT>
Test it here: Open Test Page 1 Open Blank Page in same window
Open Test Page 2 in new window Open Test Page 1 in resized new window
Open image in resized new window -- you can do it, but there are better ways!
){kind=link}
Copy and paste the code to your page as a code object, and put CSS positioning off. This code is more complicated than it needs to be -- it has provision for changes you may want.
Change the default width and height or the starting x,y position (left, top) of the popup on screen by changing the values near the top.
If you want a feature like a status bar, uncomment the line which says:
//Features+=",status=yes" //display status bar at bot of browser
Features+=",status=yes" //display status bar at bot of browser
In javascript a line that is just a comment is preceded by a double slash, and will be ignored when the code runs. To uncomment it, delete the double slash shown in red. This makes the line a real part of the code object.
If you want a popunder, change the bottom lines like this:
//aName.focus() //bring window to the front
aName.blur() //send window to back as a popunder
Making links to the code object
This is a basic link and perhaps all you will need for most purposes:
Link type: (leave blank for all of these)
Link URL: javascript:pop('MyPage.html') substitute the name of your page
If you want a new window to open, give it a new name. This allows a second popup.
Link URL: javascript:pop('MyPage.html','MyWin') substitute the name of your page and the name of your window
If you want a different size window to open, give it a new name and specify the new dimensions.
Link URL: javascript:pop('MyPage.html','MyWin',400,400)
If you want an image, specify a relative path to the image or a full URL, give the window a name and specify the new dimensions.
Link URL: javascript:pop('image/MyImage.jpg','MyWin',400,400)
There are examples of each of these in the links above. You should be able to substitute a full of partial URL for the page or image name, but I have not tested this.
Closing popups
It is possible to end up with old popups hanging around under the main window -- as you may have discovered already
For this reason, you should close popups automatically whenever you can. Popup Test Page 2 demonstrates one technique.
Enter this code as a custom header, or append to the existing header of the popup page:
<Body onBlur="self.close()" onClick="self.close()">
This line will close the popup under the following conditions:
As shown by my link going back to Page1, in this popup, this has a bad effect on any links on the page -- click a link and the window disappears
If you want links on the popup to work, consider instead using a close this window link -- as I used on Popup Test Page 1 .
Help -- it does not work!!
If you see a javascript error when you click on a link, check for those possible errors:
If you changed the code object, make sure you stick to the same form as the original. A small punctuation mark misplaced can have a big effect.
Note the location of the quote marks on the links -- they are singles and they are around only the page (or image) name and the window name. There are no quotes around the width and height values -- these are numbers not strings.
Some browsers have settings to prevent certain features being disabled. For example, Firefox has a setting to disregard commands that hide the status bar. If you suspect this is happening, check with another browser.
See also
To display images only, I suggest either the the built-in popup function or the popup images -- other ways.
To display small amounts of text and/or images in a page, other possibilities are slideshow mouseover effects or i-frames.
It is possible to end up with old popups hanging around under the main window -- as you may have discovered already
For this reason, you should close popups automatically whenever you can. Popup Test Page 2 demonstrates one technique. Enter this code as a custom header, or append to the existing header of the popup page:
<Body onBlur="self.close()" onClick="self.close()">
This line will close the popup under the following conditions:
- OnBlur -- whenever the popup window loses focus
- OnClick -- whenever you click on a popup. It also closes on right click -- but not under Opera.
As shown by my link going back to Page1, in this popup, this has a bad effect on any links on the page -- click a link and the window disappears
If you want links on the popup to work, consider instead using a close this window link -- as I used on Popup Test Page 1 .
Help -- it does not work!!
If you see a javascript error when you click on a link, check for those possible errors:
If you changed the code object, make sure you stick to the same form as the original. A small punctuation mark misplaced can have a big effect.
Note the location of the quote marks on the links -- they are singles and they are around only the page (or image) name and the window name. There are no quotes around the width and height values -- these are numbers not strings.
Some browsers have settings to prevent certain features being disabled. For example, Firefox has a setting to disregard commands that hide the status bar. If you suspect this is happening, check with another browser.
See also
To display images only, I suggest either the the built-in popup function or the popup images -- other ways.
To display small amounts of text and/or images in a page, other possibilities are slideshow mouseover effects or i-frames.
