Results 1 to 9 of 9

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

  1. #1
    Join Date
    Jun 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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)

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Change this:
    Code:
    var initialwidth,initialheight
    to this:
    Code:
    var initialwidth,initialheight,leftPos,topPos
    Then find this function:
    Code:
    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:
    Code:
    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:
    Code:
    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:
    Code:
    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"
    }
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Zillion times thanks!

    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

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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!):

    Code:
    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:

    Code:
    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
    Last edited by mwinter; 06-20-2005 at 11:30 AM.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 06-20-2005 at 03:50 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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:

    Code:
    var ...,
        style = document.getElementById('dwindow');
    and it now is:

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

  9. #9
    Join Date
    Jun 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Break!

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •