DHTML Window Script - How to center window that pops up?

[Jurgen]

Script: DHTML Window Script
URL: http://www.dynamicdrive.com/dynamici...htmlwindow.htm

Hello,

I'm a complete newbie at this, so I hope you all understand what I'm trying to say.

If you go to the above URL, you'll see that Google pops up in the upper left corner of your browser (at least in my case; I use IE).

My question now is: how can I make the new window show exactly in the middle of the page (horizontally and vertically centered), instead of in the upper left corner?

Thank you all very much in advance!


Regards,

Jurgen (Belgium)

[jscheuer1]

Change this:

var initialwidth,initialheight

to this:

var initialwidth,initialheight,leftPos,topPos

Then find this function:

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left="30px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
}
}

and replace it with this one:

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
leftPos=ns6?(window.innerWidth-width)/2 :(iecompattest().clientWidth-width)/2;
topPos=ns6?(window.innerHeight-height)/2 :(iecompattest().clientHeight-height)/2;
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left=leftPos+"px"
document.getElementById("dwindow").style.top=topPos+"px"
document.getElementById("cframe").src=url
}
}

Finally replace this function:

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("src","restore.gif")
document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","max.gif")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
}
document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}

with this one:

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("src","restore.gif")
document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
leftPos=parseInt(document.getElementById("dwindow").style.left)
topPos=parseInt(document.getElementById("dwindow").style.top)
document.getElementById("dwindow").style.left=0
document.getElementById("dwindow").style.top=0
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","max.gif")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
document.getElementById("dwindow").style.left=leftPos+"px"
document.getElementById("dwindow").style.top=topPos+"px"
}
}

[Jurgen]

John,

YOU ARE THE MAN! It works perfect!

A zillion times thanks!

Keep up the good work here on the forum, I think a lot of people appreciate it ... I did!


Regards,

Jurgen

[mwinter]

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
leftPos=ns6?(window.innerWidth-width)/2 :(iecompattest().clientWidth-width)/2;
topPos=ns6?(window.innerHeight-height)/2 :(iecompattest().clientHeight-height)/2;
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left=leftPos+"px"
document.getElementById("dwindow").style.top=topPos+"px"
document.getElementById("cframe").src=url
}
}

Whilst you're fiddling, you may as well trim down that code (and correct it!):

function loadwindow(url, width, height) {
  var style;

  if(!ie5 && !ns6) {
    window.open(url, '', 'width=' + width + ',height=' + height + ',scrollbars,resizable');
  } else {
    leftPos = ((ns6 ? window.innerWidth : iecompattest().clientWidth) - width)
            / 2;
    topPos = ((ns6 ? window.innerHeight : iecompattest().clientHeight) - height)
           / 2;
    document.getElementById('cframe').src = url;
    style = document.getElementById('dwindow').style;

    style.display = '';
    style.width = initialwidth
                = width + 'px';
    style.height = initialheight
                 = height + 'px';
    style.left = leftPos + 'px';
    style.top = topPos + 'px';
  }
}

The same goes for the other function:

function maximize() {
  var max   = document.getElementById('maxname'),
      style = document.getElementById('dwindow').style;

  if (!minrestore) {
    minrestore = 1; /* maximize window */
    max.src = 'restore.gif';

    style.width = (ns6 ? window.innerWidth - 20 : iecompattest().clientWidth)
                + 'px';
    style.height = (ns6 ? window.innerHeight - 20 : iecompattest().clientHeight)
                 + 'px';
    leftPos = parseInt(style.left, 10);
    topPos = parseInt(style.top, 10);
    style.left = 0;
    style.top = 0;
  } else {
    minrestore = 0; /* restore window */
    max.src = 'max.gif';

    style.width = initialwidth;
    style.height = initialheight;
    style.left = leftPos + 'px';
    style.top = topPos + 'px';
  }
}

The fact that these variations look larger (despite me saying, 'trim down') is an optical illusion created by liberal use of whitespace. Both are smaller character-wise.

Mike

[jscheuer1]

I see what you are getting at Mike but, frankly, mine looks trimmer. I know, yours actually is trimmer but also, I know mine works.

[mwinter]

I see what you are getting at Mike but, frankly, mine looks trimmer.

How it looks is of really no concern. Code size and efficiency isn't often a concern, either, but sloppiness should be. I wanted to point out the illusion just so I didn't seem like I was contradicting myself.

[...] I know mine works.

Actually, it doesn't, but the problem was in the original code; you just copied it. Look at the window.open function call, and you should see what I'm referring to.

As for whether mine works - it does. I don't need to test it, because it's your code with the duplication removed. Nothing more than that, really.

Mike

[jscheuer1]

Mike, just tested window.open (in my code as copied from the original), fortunately I hadn't deleted it yet. I'm not sure if it is perfect but, it works. I cannot be as certain of your code only because I haven't tested it. I'd also like to add that, just because code looks like it is redundant, doesn't always mean that it is. If the redundancy occurs after a branch, it only gets executed once. In other cases, it is needed for reasons not immediately apparent. I'm not saying either applies or doesn't apply in this instance but, the first case seems to, somewhat. Finally, code that looks like it should work, and I think we've all had this experience, often doesn't.

Added later:

As I had a few spare moments and still hadn't deleted the code, I plugged in your functions. It didn't work. I haven't the time to trouble shoot it but, at a glance, I suspect 'style' needs to be global, or at least of a greater scope.

[mwinter]

Mike, just tested window.open [...] I'm not sure if it is perfect but, it works.

It doesn't open at the specified size. Based on what it's meant to do, that doesn't qualify as 'works'. It also opens a window that cannot be resized, which is also something that should never happen.

I'd also like to add that, just because code looks like it is redundant, doesn't always mean that it is.

True. But when code is redundant, it is redundant. Calling the getElementById method several times for the same element, and accessing the same named property of that element each time is redundant.

Finally, code that looks like it should work, and I think we've all had this experience, often doesn't.

Particularly when I take some things for granted...

[...] I plugged in your functions [and they] didn't work.

...like not checking the assignment to the style variable in maximize was correct. It was:

var ...,
    style = document.getElementById('dwindow');

and it now is:

var ...,
    style = document.getElementById('dwindow').style;

Mike

[Jurgen]

Ok, don't want to spoil your little discussion, but like I said: I am a newbie! When it works, which it does, it works! No need for fancy stuff or redundant things that should be changed ...

Again, thanks for your help jscheuer1. I really appreciate it!

Regards,

Jurgen