SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    popup window question: make window appear in top left of screen

    Hi,

    I have a popup window I made using DreamWeaver. When a user clicks the link a window pops up but I want to know, how do I control where the window pops up? I want to make it open in the top left and also I need to know how to make it open in the centre of the screen.

    Thanks in advance,
    Martin

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For top-left placement:

    Code:
    window.open('next.html','winName','top=0,left=0')
    That is just a simple example, but take a look at the DW script and you'll get the idea.

    ---

    For centered popups:
    Code:
    <script type="text/javascript">
    
    function centerPop(url,winW,winH) {
    
    var winX = (window.screen.availWidth - winW) / 2 ;
    var winY = (window.screen.availHeight - winH) / 2 - 20 ;
    var winProp = 'width='+winW+',height='+winH+',left='+winX+',top='+winY+',location=no,resizable=no,directories=no,toolbar=no,scrollbars=no,'
    	
    var winPop = window.open(url,'winName',winProp) ;
    winPop.focus() ;
    }
    
    </script>
    
    ...
    
    <a href="next.html" onclick="centerPop(this.href,'400','200');return false">Do it!</a>
    In the above example:

    winW = the width of the popup window
    winH = the height of the popup window

    winX becomes the left position of the popup window
    winY becomes the top position of the popup window

    All you need to do is set the destination url and the dimensions of the window in the onclick event.


    Hope that helps.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks also.....
    I used this in the new window's script to move it to the location, but I'm goint to change it this this method, bit smoother.

    Anyway, to change the position of existing window use this;
    if (window.screen) { window.moveTo(0,0); window.resizeTo(810,620)}
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Be aware that different browser/platform combinations interpret the dimensions used in the resizeTo() command differently.

    Some combinations will take the numbers to mean the outermost dimensions of the entire window, while some will take them to mean the dimensions of the canvas area.
    The differences can lead to some unexpected sizing problems.

    Some versions of IE differ from one version of Windows to the next, all of which will differ from IE Mac's interpretation.

    It's a bit of a nightmare.


    Pray for adoption of the window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight DOM properties soon so we can finally have something solid to work with.
    (Moz already has it)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Just follow this link:

    http://www.webdevtips.com/webdevtip...n/openwin.shtml

    There you have a cross-browser Advanced window opener, with nine options (centered, top-left, bottom-left, top-right, and so on).

    Bye and good luck.

    Cosmos2000
    Website: http://www.chez.com/cosmos2000/Numbers/666.html


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
  •