Javascript popup hell

Evoir · 05-04-2002, 08:30 PM

Oh, I meant, "Javascript popup help" hehe

Ok, I have a client that is really pushing my skill levels here. I mostly build pages in dreamweaver, and can manually edit html and even some javascript, but for the life of me, I have no idea how to implement what they want. I have built the nift popup and popup navigation they want, but there is a window CONTROL issue.

Here's the test page .

There are three links, and each of them opens to a popup window with a subnavigation within the window (with tabs). The client wants that when you click on one of the popup windows, (let's pick "calendar" for example's sake) and then while in the calendar window, you click on "brochure". Then, you go back to the test page I created (leaving the popup open) and click on "contact", it opens the "brochure" popup window, rather tha "contact" like you chose.

How do you make it work sort of like a frame? (So that if you go back to the parent page, and click on a link... it replaces the current popup with the new one.

I really do appreciate any help you can offer, cause I just don't know about these things.

here is the code of the entire page:
<html>
<head>
<title>popup test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<script language="JavaScript">

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p>popups test</p>
<p><a href="javascript:;" onClick="tmt_winOpen('popup/calendar.html','popup','width=325,height=500,left=0,top=0,scrollb ars=yes',1)">calendar</a></p>
<p><a href="javascript:;" onClick="tmt_winOpen('popup/brochure.html','popup','width=325,height=500,left=0,top=0,scrollb ars=yes',1)">brochure</a></p>
<p><a href="javascript:;" onClick="tmt_winOpen('popup/contact.html','popup','width=325,height=500,left=0,top=0,scrollba rs=yes',1)">contact</a></p>
<p> </p>

</body>
</html>

*kitchin* · 05-04-2002, 09:43 PM

You can drop in either of these:

Code:

  // changes window if open, otherwise opens new one
  function tmt_winOpen(page, dummy1, opt, dummy2) {
    // page= 'http://www.olivia.com/' + page
    if (popup) {
      popup.location= page
      popup.focus()
    }
    else {
      popup= window.open(page, '_blank', opt)
      // popup.opener= self // only needed if page has js?
    }
  }

/// or .........

  // re-opens window each time at given position
  function tmt_winOpen(page, dummy1, opt, dummy2) {
    if (popup && ! popup.closed ) { popup.close() }
    // page= 'http://www.olivia.com/' + page
    popup= window.open(page, '_blank', opt);
  }

Keep the var popup; line.
May not be as universal as Dreamweaver's code. I use the second one in my work, and it's fine on the browsers I've seen. Move around the popped up window to see the difference. As written, these functions ignore the 2nd and 4th things in your onClick ('popup' and 1).

Do you really want top=0 and left=0? I think you can just leave those out if you want to.

Evoir · 05-05-2002, 02:47 AM

kitchin,

Thanks! I honestly don't understand most of what you wrote. I'll try fiddling with what you wrote, and see if I can figure it out. But it looks like the first one allows me to open multiple popup windows in the same window.

The things I didn't understand:

So, instead of my dreamweaver code, in the header of the file, I should put something like this?
<script language="JavaScript">

</script>

The would I open the popup in the body with the same tags as I used before?
ex: <a href="java script:;" onClick="tmt_winOpen('popup/calendar. html','popup','width=325,height=500,scrollbars=yes',1)">calendar</a>

Basically, my eyes just glaze over with this javascript stuff, but I really am trying. I have definitely gotten better, because I am still trying!

Evoir · 05-05-2002, 03:24 AM

I deleted my previous post, because it simply added confusion.

Evoir · 05-05-2002, 05:05 AM

Ok, after searching alot on the web, I think I have found the beginnings of a solution that I somewhat understand. This is pieced together from a few tutorials I found.

The things I am trying to accomplish:
1) works when a viewer has javascript turned off
2) as browser compatable as it can be
3) allows me to state the window size, scroll etc
4) I want the multiple popups on the page open in the same popup window (replacing the previous one, if user re-clicks the parent wndow's link)

This is what I have come up with. It does not allow me to size the windows in Netscape. Shows up properly in IE (for me, on a mac)

<html>
<head>
<script>
function popUp(theURL) {
var newWin=open(theURL, "popUpWin", 'width=325, height=500, scrollbars=yes');
}
</script>

</head>
<body bgcolor="#FFFFFF">
<p><a href="/popup/calendar.html"onClick="popUp('/popup/calendar.html'); return false;">calendar</a></p>
<p><a href="/popup/contact.html"onClick="popUp('/popup/contact.html'); return false;">contact</a></p>
<p><a href="/popup/brochure.html"onClick="popUp('/popup/brochure.html'); return false;">brochure</a></p>
</body>
</html>

What is wrong with this code, that it doesn't control window size in Netscape? Is this lousy code for what I want? What would you change to reach my objectives (stated at the beginning of this post)

Here is a link to see this example (different than the first example.

Thanks for your time and help,
Evie

*kitchin* · 05-05-2002, 07:08 AM

Quote:

So, instead of my dreamweaver code, in the header of the file, I should put something like this?
Yes.

<-- I don't understand what I am supposed to do with these
Either of the two blocks that start with "function(" and end with a blank line can be dropped in to replace the same in your original page. You probably want the first one.

<-- I don't understand this directive
That was a comment I left in. Anything that starts with // is a comment and does nothing. I had used that line, without the //, so it would work on my computer here.

<-- Is this telling it to open in a blank window?
No, that means "new" window without a name. You can also name the window, for use in things like "target=myname." Since you are opening only one window, the Dreamweaver code was a little intense for the job.
Now that I think about it, naming the window would be better. That way if the user goes somewhere and returns to your page, s/he will still use the same popup window. Please change '_blank' to 'oliviapopup'.

<--Can it only open a new page in an existing popup if the page has js? Do you mean in the url?
Again it's a comment you can ignore.

The would I open the popup in the body with the same tags as I used before?
Yes.

Basically, my eyes just glaze over with this javascript stuff
Using "eval" makes the whole thing more confusing. It was there so you could have two or more separate popup windows, but you want yours to all open in the same popup window.

*kitchin* · 05-05-2002, 07:30 AM

Quote:

Originally posted by Evoir:

<script>
function popUp(theURL) {
var newWin=open(theURL, "popUpWin", 'width=325, height=500, scrollbars=yes');
}
</script>
...
What is wrong with this code, that it doesn't control window size in Netscape? Is this lousy code for what I want

I think it does control window size, but it does not bring the popup to the front. So if the user opens the popup, goes back to your page and clicks anywhere, then clicks another popup link, then the popup window is hidden behind the main window. But I like the "return false." It makes it work for non-js.

Code:

<script language="JavaScript"> 
<!-- 
  var newWin

  function popUp(theURL) {
    if (newWin) {
      newWin.location= theURL
      newWin.focus()
    }
    else {
      newWin= window.open(theURL,"popUpWin",'width=325, height=500, scrollbars=yes')
    }
  }

// --> 
</script>

Single quotes or double quotes, doesn't matter, in case you were wondering.

Evoir · 05-05-2002, 03:17 PM

I tried just replacing the code your wrote first, the one with the comments and stuff, and just using it with my links, but it looked like it just used the "return false" tags. It just opened a normal sized window.

But when I used the code I wrote and you modified, it seems OH SO CLOSE to what I need.

The problems:
1) It doesn't size the window properly in netscape.

2) It doesn't bring the window to the front in Opera

I have no idea what it does on a PC (I'll have to fire up my PC emulator)

here's what I have so far:

<script language="JavaScript">

</script>

and then make the link look like this:

<p><a href="http://www.olivia.com/popup/calendar.html"onClick="popUp('http://www.olivia.com/popup/calendar.html'); return false;">calendar</a></p>

It looks like this page

Is there something I am missing for Netscape and Opera?

I am learning!

*kitchin* · 05-05-2002, 05:42 PM

The Netscape problem is fixed (on my compter) by removing the spaces after the commas here:
Change
'width=325, height=500, scrollbars=yes'
to
'width=325,height=500,scrollbars=yes'

I tried it in opera and did not see the focusing problem. But this is what I would try. You see "null" used alot by finicky programmers, so maybe there is a reason. If it's still not working in Opera, try

Code:

<script language="JavaScript"> 
<!-- 
  var newWin=null

  function popUp(theURL) {
    if (newWin!=null) {
      newWin.location= theURL
      newWin.focus()
    }
    else {
      newWin= window.open(theURL,"popUpWin",'width=325,height=500,scrollbars=yes')
    }
  }

// --> 
</script>

Evoir · 05-05-2002, 05:52 PM

Thank you very much! I like how it is written. You done good. Thanks alot!

The opera thing is based on viewing on a mac. I don't mind losing the opera folks, really. I just want it to work well in Netscape and IE.

I may continue searching for the Opera Focus problem (it is still present for me).

thanks again!