target features for new windows

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:51

target features for new windows

Poster: Ruth
Dated: Monday December 29 2003 - 12:33:21 GMT

Existing pages...click a link it goes to page one, which has a button on it, click the button and it opens a new window with specific size and the game. This is all that's on the page you reach when you first click the link

Code:

<center>
<form name="open-breakout">
<input type=button value="Play Break Out" onClick="window.open('breakout.html','breakout','top=100,left=100,width=575,height=400');">
</form>
</center>

I'm trying to elimate that middle 'form' step, but can't figure out how to do the targetfeatures thing to get the top= left= Thanks in advance.
Ruth

Poster: kevin3442
Dated: Wednesday December 31 2003 - 3:20:00 GMT

Hi Ruth,

Hope you had a nice Christmas

To use the targetattributes property, I believe your menu item definition would look something like this:

Code:

aI("text=Play Breakout;url=breakout.html;target=breakout;targetfeatures=width=575 height=400 top=100 left=100";);

As far as I know, however, the top and left window attributes are unique to IE (4 and above I think). So, other browsers may not recognize them. For a browser like, say, NS7 the result of using top and left might be to (1) open a window wherever it wants and maybe even at the same size as the calling window or (2) ignore top and left altogether. I put them at the end of the targetfeatures sequence in the above example hoping to avoid odd results in non IE browsers... probably worse if you put them at the beginning of the sequence.

Another option would be to write a general js function for opening new windows. A function that would let you open a new window, specify the url, window name, width, height, top, and left for the new window might look something like this:

Code:

function openWindow(url, windowName, w, h, t, l)
{
  var winAttr = "width=" + w + ",height=" + h;
  if (ie) winAttr += ",top=" + t + ",left=" + l;
  newWin = open(url, windowName, winAttr);
  newWin.focus();
}

For convenience, you could put this function right at the top of your menu_data.js file. You could then call this function from a menu item by defining your menu item like so:

Code:

aI("text=Play Breakout1;url=javascript:openWindow('breakout.html','breakout',575,400,50,100);");

'breakout.html' is the url the new window will go to. 'breakout' is the windowName or target name of the new window (subsequent commands from other windows could target this new window by referring to the 'breakout' target). 575 is the width (w). 400 is the height (h). 50 is the top (t). 100 is the left (l)... but note that top and left are assigned in the function only for IE. Other browsers would probably open the new window at 0, 0 (upper left corner of screen). If you wanted to remove the ie condition for top and left, you could use the following instead:

Code:

function openWindow(url, windowName, w, h, t, l)
{
  var winAttr = "width=" + w + ",height=" + h + ",top=" + t + ",left=" + l;
  newWin = open(url, windowName, winAttr);
  newWin.focus();
}

You could modify the function to make it handle additional window features or attributes pretty easily (like the presence of a status bar, scrollbars, making the window resizable, etc.).

Hope that helps,

Kevin

Poster: Ruth
Dated: Wednesday December 31 2003 - 19:12:51 GMT

Thanks Kev, I did and hope you have a great new year

Wow, thanks for the detailed explanation, for the first time I actually don't feel like I'm lost and just copying and pasting things hoping they work and not know what the heck they are doing!

Another question which your explanation brought to mind, actually three of them. 1. since this is a function, and I'm already using the onfunction in the AI [using tooltips] would there be some kind of conflict? 2. for the window url you list breakout.html, would that be all I need? wouldn't I need the actual url http://etc? 3. This is kind of off the subject but you reminded me about features you can have. I am trying to get the window to open with ONLY the back/forward/refresh toolbar but I cannot find anyplace what that is called. I've tried navigation, I've tried buttons, nothing seems to just call that part of the browser window..I use IE so don't know if it's even possible or what it might be in other browsers [though I'd think that if they were logical :lol:

[yeah, right] that all of them would name the bars the same. Thanks again, so much for the help!

Ruth

Poster: kevin3442
Dated: Wednesday December 31 2003 - 20:31:40 GMT

Hi Ruth,

innkeeper9 wrote:

...hope you have a great new year

And you too!

Quote:

1. since this is a function, and I'm already using the onfunction in the AI [using tooltips] would there be some kind of conflict?

Nope.

Quote:

2. for the window url you list breakout.html, would that be all I need? wouldn't I need the actual url http://etc?

I just listed it that way because that's how you had it in your example. it really depends on the file system hierarchy you use for your site, and where the target file is stored in relation to the one containing the link that calls it. If the page containing the link that opens the game page, and the game page itself are in the same directory on the server, then all you need is the filename (as in the example). Otherwise, you could specify a path relative to the current document, or relative to the root of your site. Using the full path, http://etcetc... will always work.

Quote:

3. ...I am trying to get the window to open with ONLY the back/forward/refresh toolbar but I cannot find anyplace what that is called. I've tried navigation, I've tried buttons, nothing seems to just call that part of the browser window..I use IE so don't know if it's even possible or what it might be in other browsers [though I'd think that if they were logical :lol:

[yeah, right] that all of them would name the bars the same.

It's actually more a matter of what the attribute is called in javascript... it's called "toolbar". It is set to 'no' by default; setting it to 'yes' in the window.open() method will cause the toolbar to appear. I've modified the openWindow() function to add a set of default window attributes, defined in the new defaultWinAttr variable...

Code:

function openWindow(url, windowName, w, h, t, l)
{
  var defaultWinAttr = "toolbar=yes,";
  var winAttr = defaultWinAttr + "width=" + w + ",height=" + h;
  if (ie) winAttr += ",top=" + t + ",left=" + l;
  newWin = open(url, windowName, winAttr);
  newWin.focus();
}

Notice that it has "toolbar=yes," already set. To add more default attributes, just add to that string. For example, if you also wanted the window to sho the status bar at the bottom, the variable would be:

Code:

var defaultWinAttr="toobar=yes,status=yes,";

FYI: You can see a summarized list of javascript windows attributes (or "features") on this page, you can find others by doing a Google search for "window.open() +javascript".

Quote:

Thanks again, so much for the help!

Always glad to help a helper!

Cheers,

Kevin

Poster: Ruth
Dated: Wednesday December 31 2003 - 21:20:58 GMT

Thanks...I should have been clearer. ?

Quote:

Code:
var defaultWinAttr="toobar=yes,status=yes,";

Toolbar gives you the file/edit/view/etc, location=yes gives the address bar. So, what I'm trying to find out is there a name for just the navigation part, the back/forward/refresh buttons. In IE if you do toolbar alone you don't get the, if you do address alone you don't get them, you can only get them by activating both, so wondering if there is some name for just the back/forward/refresh/stop/etc so that is all I get?

Ruth

Poster: kevin3442
Dated: Wednesday December 31 2003 - 22:14:30 GMT

Hi Ruth,

Quote:

...Toolbar gives you the file/edit/view/etc,...

Well.... as far as I know, toolbar=yes gives you the browser toolbar, with Back, Forward, Stop, Refresh, and others (depending on the browser). menubar=yes is the feature that should give you the File, Edit, View, etc menu options. In my tests here, these work as described.

Quote:

if you do address alone you don't get them

"address" isn't one of the recognized features. Do you mean "location" alone?

I think toolbar=yes is the only option that will give you the Back, Forward, Refresh button (among others). If it isn't working, maybe there's something else going on... do you have a test page I can see? Also, are you using the function, or the targetattributes property of the menu item?

Here's an alternative you might also consider. If all you want is a few of the standard nav buttons... back, forward, refresh... you could add a small Milonic Menu to the top of the pages that are loaded into your popup windows to trigger these functions. You could even "borrow" the icons from the IE toolbar if you want.

Hope that helps,

Kevin

Industrial Strength JavaScript and DHTML Menus

target features for new windows