1. Welcome to the new MacRumors forums. See our announcement and read our FAQ

Java Script for the web

Discussion in 'Mac Programming' started by michaelmastro, Feb 28, 2006.

  1. macrumors newbie


    I am not a programer, I am a simple photographer and digital artist. I need Java Script that will cause new web windows to open to a particular size, that is the size of the image contained in the window. Can anyone help out this poor, undereducated artist? Thank you all in advance.
  2. Moderator


    Staff Member

    What, exactly, are the contents of the window? An HTML document with and IMG tag for the image or just the image file? Do you want the window to open at the correct size (if so you'll need to know the size of the image before the window opens) or once the image is loaded (easier, especially if it's an HTML document).
  3. macrumors newbie

    Hi Robbie

    Each window that opens will contain a jpeg of a particular size, and I want the window to be that size. I realize that I will probably have to insert these dimensions into the Java Script.
  4. Moderator


    Staff Member

    If you want to open a window use the javascript window.open function. Something like this should work:

    <a href="javascript:window.open('imageurl.jpeg','imageviewer','height=480px,width=640px')">Open</a>

    You can put a lot more in the height/width bit to control window features like the menubar etc. Obviously you need to replace imageurl.jpeg with the correct URL and the width and height with the correct ones...
  5. macrumors newbie


    In a stream of code such as the one below (for several links), where does the "<a href..." go?

    <a title="Bishop Allen" href="../../mm_cathedralsite/web-content/5_allen_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/5_allen_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
    <div style="position:absolute;top:16px;left:490px;width:90px;height:90px;">
    <a title="Bishop-Archbishop Toolen" href="../../mm_cathedralsite/web-content/6_toolen_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/6_toolen_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
    <div style="position:absolute;top:16px;left:580px;width:90px;height:90px;">
    <a title="Bishop May" href="../../mm_cathedralsite/web-content/7_may_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/7_may_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
    <div style="position:absolute;top:16px;left:670px;width:90px;height:90px;">
    <a title="Archbishop Lipscomb" href="../../mm_cathedralsite/web-content/8_lipbscomb_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/8_lipbscomb_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
    <div style="position:absolute;top:112px;left:40px;width:90px;height:48px;-adbe-c:c">
  6. macrumors newbie


    Disregard my last post - I figured it out (wonders never cease!).

    Now I need to know if it is possible to have the newly opening window, open in the center of the viewer's screen.
  7. macrumors 68040


    You can set the position of the top left corner by specifying top=X, left=Y in the specs list. See this for more details on Javascript http://www.w3schools.com/js/default.asp. You would be interested in the JS HTML DOM section for window control

    To centre, you'll need to know the user's screen resolution, using screen.width and screen.height.

    So to determine the top left position, you would use:
    top = (screen.height - yourWindowHeight)/2
    left = (screen.width - yourWindowWidth)/2
  8. Moderator


    Staff Member

    Sure but it'll take more code. You will need a JS function defined in the header (or a seperate file) and then call that function in the href.

    If we start with the call:

    <a href="javascript:eek:penCenteredWindow('imageurl.jpeg','640','480);">Link Text</a>

    We then need this function defined somewhere:

    function openCenteredWindow(img,width,height)
    var swidth = screen.availWidth;
    var sheight = screen.availHeight;
    var sleft = (swidth - width)/2;
    var stop = (sheight - height)/2;

    I think that will work although I have not tested it. Note that the centering will not be perfect as the size of the window is probably a bit more that the height and width used for the calculations....

    Edit1: Fix silly typos...
  9. Moderator


    Staff Member

    I've used availWidth and availHeight as this are supposed to give the width and height allowing for the task bar on Windows (and therefore I suppose the Dock and menubar on OSX).
  10. macrumors newbie

  11. macrumors newbie

  12. macrumors newbie

  13. macrumors 603


    Four things.

    1) don't bump your threads
    2) doesn't show anything in FireFox on Windows
    3) popups are more annoying than useful. I would suggest ditching the idea and use some DHTML to accomplish the same effect. A quick google found this. http://dasme.org/imagegal/
    4) Since this seems to have a commercial purpose - consider just hiring it out instead of struggling since you have stated your not a programmer. A few bucks spent will save your hours upon hours of effort.
  14. Moderator


    Staff Member

    It does for me (Windows 2000, FireFox What versions are you on? Or do you mean the popups? They don't seem to work for me now either...
  15. macrumors 603


    The popup loads without an image (Windows 2000 + Firefox
  16. macrumors 6502

    My FireFox ( under WinXP right now) blocks the pop-ups. If you insist on using pop-ups, you should insert verbiage telling the user that the images are displayed in pop-ups and they need to enable pop-ups in their browser settings. Maybe 40% of your site visitors will know what you're talking about.

    I'm with the previous poster who said you could do this better with DHTML.

  17. macrumors 68000


    DHTML or Flash is a much better option, in my opinion.

    Granted, these things need to be learned (or paid for), but it's not very difficult, and the end result is very worth it.

    Not cluttering the user with more windows, and allowing them to sit at one page, and view all your photos, is a great experience for them, and lets them focus on the pictures, not their windows.

Share This Page