Java Script Pop Up Window

**emcgill** · Mar 29, 2001 10:57

Hello,

I am trying to make one of my pages have windows that pop up when the user clicks on something. I have a list of things, and I would like them to be able to click a little image (a question mark) next to it...and have the help file pop up defining that particular thing.

I have figured out that I obvously have to use Javascript for this, because I want to customize the pop up window to not have the menu items or browsing buttons.

I have also figured how to do this with one link...but how do I put 36 clickable question marks on a page?

I am confused about the script that I have to put in the <heading> </heading> parts.

I know the links....just what the heck do I put in the heading?

Thank you,

Eric McGill
http://www.fivemiledesign.com

**aspen** · Mar 29, 2001 14:31

in the head do this:

Code:

<script language = "javascript">
function popup(url){
window.open(url,'helpwindow','width=400,height=170');

}
</script>

Then your links would look like this:

<a href ="javascript:popup('http://www.yahoo.com')">blah blah</a>

**Saz** · Mar 29, 2001 14:46

This is the script I use for pop-ups and it's placed in the <Head> section of the html.

<SCRIPT LANGUAGE="JavaScript">
function openWindow1(url_param) {

var popupWin = null;
popupWin = window.open(url_param, 'remote', 'width=400,height=375,resizable=no,menubar=no,toolbar=no,left=10,top=10,scrollbars=yes')
popupWin.opener.name="main";
popupWin.focus();
}
</SCRIPT>

You can adjust the size of the window according to your requirements quite easily. The 'left=10, top=10' bit will place the pop-up 10 pixels in from the top left of the screen.

To have several links on one page open this pop up is easy too........

<a href="javascript:openWindow1('your_page.html')"><img border="0" src="images/image.gif" width="10" height="10"></a>

Just insert 'javascript:openWindow1' before a standard link and put the link itself in brackets as shown here. You do this for each of the links on your page.

If you need different sized windows, that can be done too by adding additional scripts 'openWindow2' etc with the different parameters set for each one. Word of warning though. I run Windows ME (husband's choice, not mine!) and for some reason, if a pop-up is already open when the link is clicked, the new link will open in the existing pop-up, even if you tell it to open in a different one of a different size. This is fine if your users close each pop-up in turn, but not all do. I've got round this for the time being by telling the pop-ups to close 'onBlur'. This will also save Win95/98 users from closing down your main window and finding hundreds of pop-ups to close too!!

Hope this helps a bit, but I'm still new to the Java thing myself. Maybe some of the advisors here have a better way to do this?

Saz

**emcgill** · Mar 30, 2001 07:19

Hello,

Thank you for your reply. I am still unable to get this to work though! Do you think you could take a look at my code?

http://www.fivemiledesign.com/hosting/plans/test.htm

I cut out the image part, so I just have a little question mark there. Click on it, and it says page not found. I do have the "yourpage.html" uploaded...and it is in the same directory as the "test.htm" page.

Please have a look at the code. I copied and pasted straight from your code from here, and then I also printed your code off and typed it in myself (and that is where I stand right now).

Thank you very much,

Eric McGill
http://www.fivemiledesign.com

**emcgill** · Mar 30, 2001 07:35

and by they way, I am asking both of you

**Saz** · Mar 30, 2001 08:11

Eric,

Just to let you know....

I saved your test page to my desktop and made the same changes to your source code that I told you to make in the PM I sent you and it worked.

Javascript's not hard....you just have to watch your spelling!

Saz

PS. The bit about removing the space between 'java' and 'script' in the hyperlink - I'm still confused how it ended up like that in the code I gave you as I copied and pasted it straight from my website.

Hmmmn.....Any SitePointers out there know why a space was automatically inserted there?

**emcgill** · Mar 30, 2001 08:43

Hello,

Yes, I now have it working....

That space between the Java and Script was what was screwing me up everytime.

Thank you very much. Maybe I'll send you the page that I am doing this on when I get it finished!

Eric McGill
http://www.fivemiledesign.com

**Saz** · Mar 30, 2001 09:02

I'm glad you got it sorted Eric. Let me know when you've finished what you're doing.....I'll be interested to see it!

**emcgill** · Apr 9, 2001 09:23

Here is the finished page. I pretty much just set up the "help" type page.

http://www.fivemiledesign.com/hostin...mparision.html

Thanks again for all your help.

Eric McGill
http://www.fivemiledesign.com

**Saz** · Apr 9, 2001 09:56

Hey, it looks good Eric. Glad I was able to help you.

**djh** · Apr 9, 2001 11:45

kinda related:

anyone know how to popup a window after the main body has loaded? I've seen it done, but am needing some code...

thanks -

**Saz** · Apr 9, 2001 13:37

You can use the same code as shown above, then insert the onload command into the body of the html for that page...

<body onload="javascript:openWindow1('your_page.htm')">

This should work, if it doesn't let me know.

By the way, watch out how you copy the code......
For some reason, this forum always puts a space between 'java' and 'script'. This should be written as one word or the code won't work.

**djh** · Apr 9, 2001 13:43

thanks for that.

have you tried using the bracketed "[code]" to separate your code?

Code:

javascript dave

**djh** · Apr 10, 2001 15:25

One other thing:

how does the javascript go to change the focus back to the main windows?

so, I want to load a popup (using onLoad=xxx), and then make the main browser window come up to the top (which I guess would mean the popup would go to the back).

Ideas?

**scrubz** · Apr 10, 2001 15:43

Use this in the popup window:

<script language="JavaScript">

</script>

User Tag List

Thread: Java Script Pop Up Window

Thread Tools

Display

CHANGE WINDOW FOCUS

Bookmarks

Bookmarks

Posting Permissions