Posts Tagged “liquid layout”

Next Entries »
13 05 2008

Background fitting the browser (html/css/javascript)

Posted by: Romuald in experiments, tags: , , , , ,

This has nothing to do with flash but I share this quick try as I saw a lot of people looking for a background that fit the browser in html.

I used the ratio out I explained in this previous post, obvously you don't have the flash smoothing.

It is not perfect, I had to remove the scrollbars as a part of the picture is not visible. See the demo and download the source.

I'm far from being a good html/css/javascript developer so If you know already a good version or if you have developed one, please comment.

Plain Text
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Soundstep | experiments (html/css background fitting the borwser)</title>
  7. html, body {
  8.     overflow: hidden;
  9. }
  10. </style>
  11. <script type="text/javascript" src="browser.js"></script>
  13. function fixedBackground(url) {
  14.     document.body.style.padding = '0';
  15.     document.body.style.margin = '0';
  16.     var overlay = document.createElement('DIV');
  17.     overlay.style.position = 'absolute';
  18.     overlay.style.top = '0';
  19.     overlay.style.left = '0';
  20.     overlay.style.height = '100%';
  21.     overlay.style.width = '100%';
  22.     overlay.innerHTML = document.body.innerHTML;
  23.     document.body.innerHTML = '<img id="bg" width="10" height="10" src="' + url + '" style="left: 0; top: 0; z-index: 0" />';
  24.     document.body.appendChild(overlay);
  25.     backgroundset = true;
  26.     updateBackground();
  27. }
  28.  
  29. function updateBackground() {
  30.     var bSize = getSize();
  31.     var sWidth = bSize.w;
  32.     var sHeight = bSize.h;
  33.     var ratio = 1024 / 768;
  34.     if (sWidth / ratio <sHeight) sWidth = sHeight * ratio;
  35.     else sHeight = sWidth / ratio;
  36.     var __bg = document.getElementById('bg');
  37.     __bg.top = 0;
  38.     __bg.left = 0;
  39.     __bg.width = sWidth;
  40.     __bg.height = sHeight;
  41. }
  42.  
  43. function getSize() {
  44.     var myWidth = 0, myHeight = 0;
  45.     if( typeof( window.innerWidth ) == 'number' ) {
  46.         //Non-IE
  47.         myWidth = window.innerWidth;
  48.         myHeight = window.innerHeight;
  49.     }
  50.     else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )) {
  51.         //IE 6+ in 'standards compliant mode'
  52.         myWidth = document.documentElement.clientWidth;
  53.         myHeight = document.documentElement.clientHeight;
  54.     }
  55.     else if (document.body && ( document.body.clientWidth || document.body.clientHeight )) {
  56.         //IE 4 compatible
  57.         myWidth = document.body.clientWidth;
  58.         myHeight = document.body.clientHeight;
  59.     }
  60.     var r = {w:myWidth, h:myHeight};
  61.     return r;
  62. }
  63. </script>
  64. </head>
  65.  
  66. <body onresize="updateBackground()" onload="fixedBackground('bg.jpg')">
  67.  
  68.  
  69.  
  70. </body>
  71. </html>

Vote in HexoSearch

Comments 3 Comments »

08 05 2008

Background fitting the browser and image ratio

Posted by: Romuald in experiments, tags: , , , , ,

Here is an example to show a element like a background, a image in a portfolio or whatever and make it fitting the browser.

In the demo you can choose three modes.

Mode Fit

The picture is fitting the browser regardless the original ratio. The formula is simple:

imagePositionX = 0
imagePositionY = 0
imageWidth = stageWidth
imageHeight = stageHeight

Mode Out (I called it like that because you'll miss a part of the picture)

The picture is fitting the browser as well but we keep the ratio, we'll miss a part of the picture at the right or the bottom in my example.

ratio = initialImageWidth / initialImageHeight
newWidth = stageWidth
newHeight = stageHeight
if (stageWidth / ratio < stageHeight) newWidth = stageHeight * ratio;
else newHeight = stageWidth / ratio;
imagePositionX = 0
imagePositionY = 0
imageWidth = newWidth
imageHeight = newHeight

Mode In

The image is fitting the browser, we also keep the ratio but we show the whole picture, we'll have a gap around depending of the size of the area.

ratio = initialImageWidth / initialImageHeight
newWidth = stageWidth
newHeight = stageHeight
if (stageWidth / ratio > stageHeight) newWidth = stageHeight * ratio
else newHeight = stageWidth / ratio
imageWidth = newWidth
imageHeight = newHeight
imagePositionX = (stageWidth * .5) - (imageWidth * .5)
imagePositionY = (stageHeight * .5) - (imageHeight * .5)

You can see a demo and download the source.


Vote in HexoSearch

Comments 2 Comments »

Next Entries »