|
Many people ask about popups and how to make them work in NetObjects. This page has methods and examples.
On this page:
Warning
Popups can be VERY annoying. This page has examples of popups that I would never use on my own site. But many still want to use them. They are included on this page for your information.
Try this one, and this, and this.
A note about the code on this page:
It's a good idea to copy it, then paste it into Notepad, check it, then copy from there to your page. This is because, when you copy from a webpage, you can sometimes get spaces and linebreaks that aren't supposed to be there. When you paste to Notepad, and, for instance, you see a linebreak in the middle of a word, just backspace to remove the break. The critical bits in the code that follows is mostly in the window specs eg
window.open("pop1.html","","width=350,height=270,left=100,top=100")
There must be NO spaces in this area.
_______________________________________________________________________________________
Instructions
1. In NOF, be on the page you want the popup to pop up from. Have the Layout Properties Palette showing;
2. Click the HTML button;
3. On the Between Head Tags tab, paste your Javascript code. For the popups I demonstrate on this page, here's the code:
|
<SCRIPT LANGUAGE="JavaScript">
function pop1() {
window.open("pop1.html","","width=350,height=270,left=100,top=100")
}
function pop2() {
window.open("pop2.html","","width=350,height=271,left=100,top=100")
}
function pop3() {
window.open("pop3.html","","width=471,height=358,left=100,top=100")
}
function pop4() {
window.open("pop4.html","","width=213,height=274,left=100,top=100")
}
function pop5() {
window.open("pop5.html","","width=653,height=264,left=80,top=80")
}
function fullwin(){
window.open("pop6.html","","fullscreen,scrollbars")
}
</SCRIPT>
|
If you've only got one popup from your page, you can make it something like this:
|
<SCRIPT LANGUAGE="JavaScript">
function pop1() {
window.open("pop1.html","","width=350,height=270,left=100,top=100")
}
</SCRIPT>
|
4. For the text or button you want your visitors to click in order to trigger each popup, treat it as you would to make a normal link (ie select it and click on the Link button);
5. On the Link Type dropdown, select External.
6. On the New Link dropdown, select Javascript, then in the box to its right, type in:
7. Create a page in your NOF site called pop1 [or pop2 etc] and put on it the content you want to show in the popup.
If you are using autogenerated nav buttons, you will need to make sure the popup page is in a part of your site that doesn't show up amongst your nav buttons.
If you are publishing using the Flat file structure or Publish by Asset Type structure, that's it.
__________________________
If you are publishing using Publish by Site Section, you could change the path in the Javascript to relative references reflecting your site structure. To do this you'd need to know how relative references work. And if you later changed your site structure, you'd need to then change the Javascript to reflect the new structure.
I find it's simpler to put all the popup files in the same place as the source page. That way, you don't have to think about the path to your files and you won't have to fiddle with the Javascript. To do this:
8. Go to Publish View;
9. Locate the folder that has all of the popup page's files;
10. Drag ALL of the files that relate to the popup page to the folder of the originating page. NOF will now publish all of its files to the same directory as the originating page.
Your popup content could be from elsewhere. Then you will need to edit the Javascript to include the full path to the html target which you specified in Step 3.
_______________________________________________________________________________________
Naming
You can call your popup anything you want. The naming just has to be consistent ie the name of the html page created by NOF has to be the same as the name in the script. I personally find it's better to use short names so that the name I give my NOF popup page is the same as that generated by NOF. But if you want to use a longer name, you just need to know what NOF will call it. If you called your page Popup Page, NOF will call it popup_page.html. Thus, "popup_page.html" would have to be the name you use in the Javascript.
I pesonally always use lower case with no gaps in my NOF page names. Then NOF doesn't have to interpret and rename for the web. So, I might call a page popups. Then NOF will call it popups.html - or, I might call it popups_instructions. Then NOF will call it popups_instructions.html.
To get the right name displayed at the top of my browser window, I just have to make sure that in Site View, on the Properties Palette, I put the name as I want users to see it at the top of my page ie Popups or Popups Instructions where it says Page Title.
So...
The name displayed at at the top of the popup window will be whatever you specify in SiteView/Properties/Page Title for the page which constitutes your popup content. _______________________________________________________________________________________
Size and position
Experiment with the size and position of the popup by changing the measurements in the script. You'll notice my popups from this page are different sizes and are in different screen positions.
_______________________________________________________________________________________
Popup behaviours
You can make the popup manifest different behaviours by inserting a small piece of script into the popup page. The script goes Inside Body Tag when you hit the HTML button on the Layout Properties Palette for the page which is to be your popup (not on the page which triggers the popup.)
Just put the following little bits of script Inside Body Tag:
To make the page disappear when the user clicks elsewhere:
To make the window stay on top unless the user closes it deliberately:
_______________________________________________________________________________________
Closing your popup
Because popups can be SO annoying, I sometimes think it is best to use them sparingly, give your user the choice to open them or not, then once they are open, make them "stick" so they stay put until your user has got the message, then allow your user to easily close them once they've seen your message.
So...
If I'm making a popup, I would frequently put this in the head of the popup (between its Body Tags):
Then, somewhere in the popup, I'd type "Close". Then I'd click the Link button. Make it a Javascript link, and in the box to the right of where it says "Javascript", type
- like this:
_______________________________________________________________________________________
Pictures as popups
If you want to have just an image in a popup, create a NOF page for it (so the instructions are simply as above).
Make the page a ZeroMargins page and place the image in the top left corner. I've done it with this popup.
Then make the popup size suit the size of the picture. (Not at all complicated really.)
_______________________________________________________________________________________
Autosize the popup to fit a pic
(use this one script for any number of pics)
You can do a popup that automatically sizes the popup window to the size of the pic. You can have a whole folder full of pics and use just this one script to link to them all. Test it
I got the original code for this from Codelifter.com but (with the help of Laurence on the gotFusion newsgroups) have made some major changes. These include having some space around the pic, setting font to Arial and text size to 12px, adding a caption and putting the whole thing into a .js file so you only have to upload it (instead of pasting a big script into your Head), and if you are using it on more than one page, you only have to include it once for your site.
On the page that triggers the popup, put this in your Head:
<SCRIPT LANGUAGE="JavaScript" SRC="./picpop.js"></SCRIPT>
Get the file picpop.js and save it to your Assets folder. (Right click here and Save it.)
Add picpop.js as a New File Asset in Assets View. Check Always Publish. Make sure it is in the same directory as the page with the popup on it. (Check for this in Publish View. If it's not, then in Publish View, drag it there.
(Note: If you want to have popups (using this script) from multiple pages, you only need to upload the picpop.js file once - probably to the root directory of your site. However, if it's not in the same directory as the page that triggers the popup, you'll need to know enough about relative links to ensure that the code you put in the Head of each page has the correct relative reference to find the picpop.js file.)
Now make a Javascript link to the popImage function with the name of the pic you want to display, the name of the window to be opened (so it shows at the top left of the window when it opens), and the text for your caption. Like this:
popImage('dal.jpg','Dallas','Dallas: his ugly mug')
(Of course, change these variables to suit your naming. These are for the example I have here.)
(Note: This link assumes that the pic is in the same directory as the page that has the link on it. If it's not, then you will need to know enough about relative links to specify the path to your pic. The path here is 'dal.jpg'. If this pic were in a different directory, this part of the code would be the path to the pic eg './images/dal.jpg'.)
Here's how my Links Properties palette looks:
This will open the pic called dal.jpg in a popup window sized exactly to the size of dal.jpg plus a 10px border around it. The page title displayed in the top left of the browser window will be "Dallas". The caption under the pic will be "Dallas: his ugly mug".
Test it
A note about choices
I've made some choices here. The background colour of the popups is black. The caption text colour is white. The close link text colour is yellow. If you don't like these, you can open picpop.js and make changes. I could have made variables for them, but then the links become a bit too complex, so I've resisted. But if you feel confident enough to open picpop.js and change things, go for it!
_______________________________________________________________________________________
Mouseover popups
To see one, mouseover this link. (Dodge the link if you don't want the annoyance!)
To do this, make an external link, then on the New Link dropdown, select Javascript as the type. In the box to the right, put a hash (#), like this:
Now click the HTML button at the bottom and put this code between the tags:
...like this:
(Don't forget to change "pop4()" to match your own naming convention.)
_______________________________________________________________________________________
Put all the required code in the link
You don't have to put your Javascript code in the Head. I personally prefer to put it there because I find it easier to go back and see what I've done. But you can put it in the link itself if you want.
Click this link to see how its done.
_______________________________________________________________________________________
Full screen windows
You can open a full screen window by putting the following code in your Head and linking using the technique described above. (If you've got this far, you shouldn't need it described again!)
|
<script>
function fullwin(){
window.open("pop7.html","","fullscreen,scrollbars")
}
</script>
|
Click here for an example.
_______________________________________________________________________________________
Scrollbars, menubar, toolbar, location, statusbar, resizeable
You don't have to include these parameters, but you can if you want to. In each function, just include the commands for them if you want them. "1" means Yes, "0" means No. The function lines will look like this:
|
<SCRIPT LANGUAGE="JavaScript">
function pop1() {
window.open("pop1.html","","width=320,height=170,left=100,top=100,toolbar=0,
scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1")
}
</SCRIPT>
|
Change the 1s and 0s to suit yourself.
Note: There are NO spaces in the code. If you leave any spaces, it won't work! If any of this doesn't work first time, the first thing to check is your syntax; mostly spelling and spaces.
_______________________________________________________________________________________
Centered popups
If you want to center your popups on your screen, you will need to do a slightly different method. First, put this code in your Head:
|
<SCRIPT language="JavaScript">
function pop8() {
var url='pop8.html'
var w='283'
var h='107'
var sw=screen.availWidth;
var sh=screen.availHeight;
var l=(sw-w)/2;
var t=(sh-h)/2;
window.open(url,'','width='+w+',height='+h+',left='+l+',top='+t+',screenX='+l+',sc reenY='+t+',resizable=0,scrollbars=0,toolbar=0,location=0,directories=0,status=0,m enubar=0,copyHistory=0');
}
</SCRIPT>
|
Change "function pop8()" to suit your naming convention. Change the first 3 variables to suit yourself ie the URL, the width and the height. Further down in the script, change the parameters for resizable, scrollbars, toolbar etc from 0 to 1 if you actually want those things to show up in your popup. Don't disturb anything else, or you'll wreck the script!
Now make a Javascript link with this as the Javascript:
...like this:
Test it
_______________________________________________________________________________________
Popups that open as your page opens
For an example and instructions, click here.
_______________________________________________________________________________________
Maximising your browser
This isn't really a popup. It's a way to make any window full-screen once it's opened. But it's not as invasive as the "fullscreen" function described above. This one leaves the Taskbar intact. Test it.
And I believe in giving credit where it's due. So... I found this script at DynamicDrive. The author's credit is in the script itself. It's free to use as long as you leave it there (which is not a huge price to pay - the credit code is very small, and only those who delve will ever see it!).
To do this, put this code in the Head of the page that is to open:
|
<script language="JavaScript1.2">
<!--
/*
Auto Maximize Window Script- By Nick Lowe (nicklowe@ukonline.co.uk)
For full source code, 100's more free DHTML scripts, and Terms Of Use
Visit http://www.dynamicdrive.com
*/
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidt h){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
|
To open it, I just linked to a new page in my site, made the link target a blank page, and put the code above into the Head of the new page.
_______________________________________________________________________________________
Multiple popups using just one function
If you have multiple popups on your page, it can be a bit tedious creating a separate function for each one. The solution is to pass a variable to the Javascript in the Head. (Note that this code also centres your popup.) Put this code in your Head:
<script language="JavaScript">
// Centered Pop-Up Window (v1.0)
// (C) 2002 www.smileycat.com
// Free for all users, but leave in this header
var win = null;
function popit(yourpage,yourname,w,h,features) {
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
settings += 'top=' + wint + ',';
settings += 'left=' + winl + ',';
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
</script>
Now, when you make your link, put the variables in the link. Make your link a Javascript link with some script like this (changed to suit your own content, size etc):
onClick="popit('yourpage.html','','750','450','resizable,scrollbars,status,toolbar')"
Leave out any of resizable,scrollbars,status,toolbar if you don't want them.
Test it. And another.
Here's how my link was made:
_______________________________________________________________________________________
_______________________________________
This page was written, and is maintained, by Dallas
|
 ){kind=link}