SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to resize a html page to perfectly fit a background image size?

    I need create offline html page, graphic menu for autorun.
    How to resize a html page to perfectly fit a background image size? I need html page that need be resized to perfectly fit a background image size, also, this page need be centered on screen.

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't detect the size of a image set to the background of an element, it needs to be in an <img> tag to get the .offsetWidth and .offsetHeight properties.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by funkdaddy View Post
    You can't detect the size of a image set to the background of an element, it needs to be in an <img> tag to get the .offsetWidth and .offsetHeight properties.

    OK, then we need use another method - insert image as usually, with image tags. Anybody know exact sample of code that will resize a page to perfectly fit an image size, and center page on the screen? That is similar that use popups.

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Cologne, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is as close as you can get. It doesn't take into account the stuff like menus and buttons youu normally have in the browser, but you cant get that with IE. In Mozilla you can try to calculate the offsets using window.outerWidth & window.outerWidth
    Code:
    function resizeToImgDimensions(imgId)
    {
        var img = document.getElementById(imgId);
        var imgW = img.offsetWidth;
        var imgH = img.offsetHeight;
        
        window.resizeTo(imgW, imgH);
        
        var x =  (self.screen.availWidth - imgW) / 2;
        var y =  (self.screen.availHeight - imgH) / 2;    
    
        window.moveTo(x,y);
    }
    window.onload = function() {resizeToImgDimensions("test")}

  5. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will also center page on the screen? I am wondering if I can see the full html code of that page.

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Cologne, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Xinha Example Output</title>
    <script type="text/javascript">
    function resizeToImgDimensions(imgId)
    {
        img = document.getElementById(imgId);
        var imgW = img.offsetWidth;
        var imgH = img.offsetHeight;
        
        window.resizeTo(imgW, imgH);
        
    //get the coordinates for centering
        var x =  (self.screen.availWidth - imgW) / 2; 
        var y =  (self.screen.availHeight - imgH) / 2;    
    //center it
        window.moveTo(x,y);
    }
    window.onload = function() {resizeToImgDimensions("test")}
    </script>
    </head>
    
    <body>
    <img src="/image.png" id="test" alt="justforcompleteness"/>
    </body>
    
    </html>

  7. #7
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you. I tried, there is some problems. One thing: this is offline page, image is on hard drive, not dynamically loaded from web, image width/height is known, however. When I open popup, i got full page screen and my image is at the top left corner, since IE block javascript by default, and requires action click on to allow. Also, I need popup with no menu bar, no scroll bar, no address bar, only dialog title bar.

    meteor
    Last edited by meteor; Jan 26, 2007 at 08:43.


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
  •