SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image in new window opens in middle of page - move to top left

    I'm totally new to Javascript, and trying to do something very simple. When users click on an image, I'd like an enlarged image to open in a new window. I have achieved this, but the new window opens right in the middle of the page - how do I move it to the top left corner?

    Here is the script:

    <script language="JavaScript">
    function openW(mypage,myname,w,h,features) {
    if(screen.width){
    var winl = (screen.width-w)/2;
    var wint = (screen.height-h)/2;
    }else{winl = 0;wint =0;}
    if (winl < 0) winl = 0;
    if (wint < 0) wint = 0;
    var settings = 'height=' + h + ',';
    settings += 'width=' + w + ',';
    settings += 'top=' + wint + ',';
    settings += 'left=' + winl + ',';
    settings += features;
    win = window.open(mypage,myname,settings);
    win.window.focus();
    }
    </script>

    And my HTML:

    <div id="shadow" class="bedset"><a href="JavaScriptpenW('images/eslarge.jpg','Evening Shades Silk',400,550,'')"title="Click to enlarge"><img src="Images/ESduvet.jpg" alt="Bedding set" /></a><p class="enlarge">Click image for a close up view</p></div>

    Thank you!

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,439
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    position

    The new window's view-port position os determined by "top" and "left".
    AFAIK "0" "0" should be the upper left corner (or close to it at least).
    The code is passing 400 to the w parameter (horizontal, left) and 550 to the h parameter (vertical, top).
    So say screen width is 800 and screen height is 600, then
    HTML Code:
    var winl = (screen.width-w)/2;
    var wint = (screen.height-h)/2;
    HTML Code:
    var winl = (800-400)/2;
    var wint = (600-550)/2;
    var winl = 200;
    var wint = 25;
    or 200 from the left and 25 from the top (centered).
    At 1600x1200 res full-size view-port it would be 600 from the left and 325 from the top (centered).

    Where do you want it to be? If you always want it to be upper top left, you could just hard-code "0"s for top and left.
    Or you could replace the positioning part of the script, ie.
    HTML Code:
    if(screen.width){
    var winl = (screen.width-w)/2;
    var wint = (screen.height-h)/2;
    }else{winl = 0;wint =0;}
    if (winl < 0) winl = 0;
    if (wint < 0) wint = 0;
    with
    HTML Code:
    var winl = 0;
    var wint = 0;

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much - I can't say I understand all of your explanation, but it does help with learning, and I have replaced the code and it works exactly as I want. Thank you!!


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
  •