multi window interface

[toughGirl]

I want to create a site with a multi window interface. That is, have one window as the navigation (in the upper left corner) and have a popup window on the right for content. I know how to create popup windows and even how to position them specifically on the screen. However, I DONT know how to 'lock' them together. That is, as long as the navWin is open and on top, the contentWin (when activated) is open and on top with the navWin. Make sense? Basically I want a floating palette interface.

Any suggestions?

 

[jaredn]

There is no easy wayu of doing this. Hopefully you have an opener relationship where the two windows can communicate, each time one is moved, it can call a function in the other one too move as well. I don't think their is a move event for windows, so you may have to use a setInterval or something. jaredn@eae.net -

http://webfx.eae.net

 

[ToddWW]

Let me know specifically what you want to achieve. You can create a relationship between the navigation window and the content window with these things in mind.

1. You're going to want to open both windows as new from the main browser window. This give you more freedom on what you can do with those windows.

2. Assuming that the pallette window is the parent or navigation window, this window would be created first. The content window would need to be opened from that navigation window. At that point, you can have a two way relationship between the windows. However, if you load a new page into the parent window, any sub windows that were opened by that parent window lose their parent to child relationship. Therefore, I would make sure that you either try to design so that the URL in the parent window cannot be changed or a new page be loaded into it. You can do this by removing features such as the address line, nav bar, tool bar, etc.. when opening the window. However, if you do want to change the page in the parent window, you will just need to make sure to close any sub windows that it has opened then open new sub windows after the new parent page is loaded. There's some extensive checking you'll need to do to make sure windows are open or active before trying to do things with them otherwise Javascript will throw an error.

If you tell me specifically what you are doing, I can probably give you some good ideas. Be specific such as what to do if someone closes the parent window, or what to do if someone closes the content window, etc...

ToddWW

 

[toughGirl]

Thanks for the input Todd. I think its going to work! Basically, I will start with a normal browser window (I'm using Flash to create most of this site [hopefully]). From my beginning presentation in the normal browser window, the first popup window (lets call it navWin) will come up. This will be a non-navigational window meaning there will be no toolbar/addressbar, etc. From navWin, I will be opening the content window (contWin). This will be my main display window and will also not include any navigational browser features. The whole point is to get the viewer into the site. If they want to exit, they will have to close these 2 windows.

Now I want to keep up the contWin and be able to change the content inside this popup from the navWin. So far, I think all of these things are possible. The part that seems tricky to me is keeping these 2 popup windows together. For example, if the viewer wants to toggle to another application or page on their taskbar... I want them to be able to click back to ONE of the popup windows and have the other come back too - as if they were connected.... There is also the problem of if they close the navWin before the contWin - what's going to happen...? One other issue may be closing my original regular-browser window...

thanks!

 

[ToddWW]

It's fine if they close the original browser window as long as you don't want to control it via your navWin or contWin or try to close it via navWin or contWin. You can issue a self.opener.close() from navWin, but IE and NS will alert the user asking them if it's OK to close the main browser window. Only a signed script, trusted by the user, will avoid this. So be prepared to leave the main browser window open underneath your two windows.

Basically, you could easily right code so that if anyone closed the navWin, then the contWin would close also but allowing them to close the contWin and leave the navWin if they want. Most of the code is in navWin. Your code in navWin would just need to do a check to see if contWin was open before issuing a location command or an open command. I don't have all of the code here with me, but the structure would look something like this.

<html>
<head>
<title>Navigation Window</title>
<script Lanuguage=&quot;Javascript&quot;>
<!--
function navCont(urlPass) {
     if (code here determines of contWin is open) {
          contWin.location(urlPass)
          //Changes page in already open content window.
     } else {
          var contWin
          contWin = window.open(urlPass,'contWin','parms')
          //Opens new content window.
     }

function closeAll() {
     if (code here determines of contWin is open) {
          contWin.close()
          //Closes content window
     } else {
          //Do Nothing, window does not exist
     }
}             

//-->
</script>
</head>
<body onUnload=&quot;closeAll()&quot; onLoad=&quot;navCont(pageref)&quot;>
<a href=&quot;javascript:navCont(pageref1)&quot;>Page Link 1</a>
<a href=&quot;javascript:navCont(pageref2)&quot;>Page Link 2</a>
</body>
</html>

I don't have the code handy for testing to see if a window you've previously created is a valid object (or open) but I know that I have an example in my office and can send it to you if you let me know. If you don't validate this first, Javascript will throw an error if trying to change the location of a window that does not exist OR will open a second contWin on top of an already existing one. Also, you will need to pass the URL in your calling Page Link href statement and the calling onLoad statement to the navCont function. I've never done this before but I've seen it done. I only navigate using select lists and input buttons. As long as the current page in navWin does not change, references to the Contents window can be made using the variable created before the window.open() statement. In this case, my reference is contWin. Now, if you reload navWin with a different page, the link is broken. That is why I wrote the closeAll() function so if the navWin is changed or closed, the contWin closes also and when the navWin is initiated or refreshed, a new contWin is created with the pageref you supply on the onLoad="navCont(startpageref)" statement.

This is untested code, but I'm sure it will work. Remember, both navWin and contWin need to be new windows and neither can be the original browser window. Otherwise, you'll have problems with the window.close() function. Also, should you need to reference the navWin from the contWin page, you can always do this using the self.opener property. For example self.opener.close() will close the navWin from the contWin. Remember, there's an onUnload statement in navWin. Closing navWin from contWin will immediately close contWin also. I would avoid making page changes to navWin from contWin. It will make contWin dissapear then re-open after the navWin page is refreshed.

Play around with it and let me know if you need the code to check first to see if a window if a valid object or currently open.

Have Fun !!

ToddWW

 

[toughGirl]

Todd - Thanks so much. Im gonna work on this this weekend. Perhaps you could send me the other code too so I have a full span of resources to work with. Once again, thanks for your input!

toughGirl

 

[ToddWW]

I have two untested examples of determining if a window is currently open or not (straight from the reference book). The first refers to the navWin window determining if the contWin is currently open so it can know wheter to change the page in contWin and bring to focus or to open a new contWin window. Looks like this.

if (!contWin || contWin.closed) {
     // statements if contWin is closed
} else {
     // statements if contWin is open
}

This is the reverse of my example yesterday because here we are testing to see if the window is closed. This next code was used as an example for contWin to check and see if the parent window navWin is open.
{code}
if (self.opener == null) {
// statements if navWin is closed
} else {
// statements if navWin is open
}
[/code]
The latter seems easier and I wonder if it can be used on both windows. The example is given to check if the opener is valid. However, I would be hard pressed to try the following in the navWin script so you can make your validation checking the same in both windows.
{code}
if (contWin == null) {
// statements if contWin is closed
} else {
// statements if contWin is open
}
[/code]
I was brief in my code example yesterday so I am assuming you know the proper command structure for window.open() and window.location(). One tip I give out quite a bit is using the window.replace() function instead of the window.location() function. They both carry the same syntax and structure however the window.replace() function removes the previous page from history. (Won't allow back button to previous page)

Have fun !!
ToddWW