SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jan 25, 2007, 10:57 #1
- 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.
-
Jan 25, 2007, 11:01 #2
- 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.
-
Jan 25, 2007, 13:11 #3
- Join Date
- Jan 2007
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jan 25, 2007, 13:54 #4
- 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")}
-
Jan 25, 2007, 16:05 #5
- 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.
-
Jan 25, 2007, 20:11 #6
- 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>
-
Jan 26, 2007, 04:28 #7
- 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.
meteorLast edited by meteor; Jan 26, 2007 at 08:43.
Bookmarks