[thelist] Javascript Windows ?

.jeff jeff at members.evolt.org
Thu Mar 7 22:43:00 CST 2002


timothy,

first of all, i'm quoting you out of order because i'd like to address a
particular point first.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Timothy Martens
>
> <p><a href="javascript:popCenter('charactermap.html',
> 'pop1', '724', '266');">Launch the Complete Character
> Map</a><br /><a href="javascript:popCenter(
> 'charactermap2.html', 'pop2', '488', '249');">Launch
> the Common Character Map</a></p>
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

you're being a very naughty javascript.  tsk tsk.

go grab this article, print it out, go directly to jail -- do *not* collect
$200.

Links & JavaScript Living Together in Harmony
http://evolt.org/article/thelist/17/20938/

when you think you know what you're doing wrong, you can come out and play
with the rest of us.  *grin*

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> <script language="JavaScript" type="text/javascript">
> <!--
>   var win = null;
>   function popCenter(theURL, winName, w, h)
>   {
> 	if (window.screen)
>     {
>       var fromLeft= screen.availWidth;
>       var fromTop= screen.availHeight;
>       var settings= 'width =' + w + ',height ='
>                   + h + ',left='
>                   + ((fromLeft - w - 10) * .5)
>                   + ',top=' + ((fromTop - h - 30) * .5)
>                   + 'toolbar=0,location=0,directories=0'
>                   + ',status=1,menubar=0,scrollbars=0,'
>                   + 'resizable=1';
> 	win= window.open(theURL, winName, settings);
> 	}
> 	if (window.focus) {
> 	win.focus();
> 	}
> }
> //-->
> </script>
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

i've reformatted your function to make it easier to read.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> I have a fairly straight forward pop-up script which
> centers a window on screen. Everything is working as
> it should in IE5+, but Netscape6 doesn't seem to resize
> the two windows according to the width/height arguments.
> In fact IE opens a 2nd different and sizes it correctly
> whereas N6 loads the 2nd window's contents into the 1st
> shell without resizing. Even if I close the first window
> in N6 and then click to open the 2nd -- it doesn't
> resize, but simply keeps the original dimensions?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

the first obvious thing you're missing is a comma in front of "toolbar=0" in
your settings string.

second is a space between both "width" and "=" and "height" and "=".  the
third argument cannot have any spaces in it at all.

also, you won't open a popup for browsers that don't understand
window.screen.  this isn't really necessary.  in fact, you've made it so
that non-js browsers can't use the links at all -- again, totally
unnecessary.

take the reference to the document out of the function and place it in the
href.  take the function call and move it to the onclick event handler.
preface it with a "return" statement.  set up your popCenter() function to
return a boolean of false.  move the second argument, the window's name,
from the function call to the target attribute.  you can refer to these
attributes in your function call using the "this" keyword.

additionally, since the inclusion and exclusion of attributes already
defines what is and is not included in the new window, the "=1" and "=0"
bits are redundant and unnecessary.  so, i've simply removed the ones that
were set to "0" and removed the "=1" on the ones left.

for those browsers that support window.screen, i'm setting it to calculate
how the number of pixels from the top and left to center the window.  for
all other browsers, the browser will open top/left of the screen (if
placement is supported) or wherever the browser decides.

var win = null;

function popCenter(theURL, winName, w, h)
{
  var fromLeft = 0;
  var fromTop = 0;
	if (window.screen)
  {
    var fromLeft = ((screen.availWidth - w - 10) / 2);
    var fromTop = ((screen.availHeight - h - 30) / 2);
  }
  var settings = 'width=' + w + ',height=' + h + ',left='
               + fromLeft + ',top=' + fromTop + ',status,resizable';
  win = window.open(theURL, winName, settings);
  if (window.focus)
    win.focus();
  return false;
}

and now the refined way to call it:

<p>
  <a
   href="charactermap.html"
   target="pop1"
   onclick="return popCenter(this.href, this.target, '724', '266');"
  >Launch the Complete Character Map</a><br />
  <a
   href="charactermap2.html"
   target="pop2"
   onclick="return popCenter(this.href, this.target, '488', '249');"
  >Launch the Common Character Map</a>
</p>

now non-js browsers can use this as well.  they just won't get the popup.
they'll get a new browser window instead.

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/




More information about the thelist mailing list