Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts

    JS Popup Showing Blank Space

    Hey Guys,

    Simple question here. I've got the following JS function:

    // new popup function
    function popUp(URL) {
    window.open( URL, "_blank", "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600");
    }


    And I'm calling it like this:

    <a href="javascript:opUp('images/gallery/imageName.jpg')"><img src="images/imageName_thumb.jpg" /></a>

    So a nice 800x600 window pops up with the image. However, there is approximately a 10 pixel gap on the top and left side of the "page". I want the image to completely take up the window.

    It's almost like a margin or padding setting, but I haven't set any of that. It's not really opening a "page" persay, but the image itself.

    How can I get rid of this?

    Thanks.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Open a page that eliminates the margin and padding of the html and body elements, and that embeds the image.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean
    Open a page that eliminates the margin and padding of the html and body elements, and that embeds the image.
    But then I need an HTML page for every image.

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    No. You need a single server side script that just inserts the image address into a template page.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Any idea why the blank space would be occuring on just opening the image?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    because when you link to an image you have no formatting however you can use some javascripting to get rid of the border, try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript">
    function writeimg(what,wid,hgt,which){
    sw=(screen.width-wid)/2;
    sh=(screen.height-hgt)/2;
    newwin=window.open('','','width='+wid+',height='+hgt+',top='+sh+',left='+sw+',menubars=0,scrollbars=0,status=0,location=0,directories=0');
    newwin.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"');
    newwin.document.write('"http://www.w3.org/TR/html4/loose.dtd">');
    newwin.document.write('<head>');
    newwin.document.write('<title>'+what+'</title>');
    newwin.document.write('<style type="text/css">');
    newwin.document.write('body {background:#000000;color:#FFFFFF;margin:0px;padding:0px;}');
    newwin.document.write('img {border:0px;}');
    newwin.document.write('</style>');
    newwin.document.write('</head>');
    newwin.document.write('<body>');
    newwin.document.write('<img src="'+which+'" width="'+wid+'" border="0" height="'+hgt+'" alt="'+what+'">');
    newwin.document.write('</body>');
    newwin.document.write('</html>');
    }
    </script>
    </head>
    <body>
    <a href="yourimagehere.jpg" onclick="writeimg('the title is here','250','110','yourbiggerimagehere.jpg');return false"><img src="yoursmallimagehere.jpg" border="0" width="50" height="50"></a>
    </body>
    </html>
    the popup window opens up centered on the users screen, and the width and height of the popup is defined from the link, along with the title

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Great, that worked.

    Thanks.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You may also want to check this out. This script automatically detects the size of the image so you don't need to pass it.

    Popup image viewer


  •  

    Posting Permissions

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