docs/guide_files/guide.js

   1 var windowsInternetExplorer = false;
   2 function detectBrowser()
   3 {
   4     windowsInternetExplorer = false;
   5     var appVersion = navigator.appVersion;
   6     if ((appVersion.indexOf("MSIE") != -1) &&
   7         (appVersion.indexOf("Macintosh") == -1))
   8     {
   9         windowsInternetExplorer = true;
  10     }
  11 }
  12
  13 function fixupIEPNGBG(strImageID)
  14 {
  15     if (windowsInternetExplorer)
  16     {
  17         var oBlock = document.getElementById(strImageID);
  18
  19         if (oBlock)
  20         {
  21             var currentBGStyle = oBlock.style.background;
  22             var urlStart = currentBGStyle.indexOf("url(");
  23             var urlEnd = currentBGStyle.indexOf(")", urlStart);
  24             var imageURL = currentBGStyle.substring(urlStart + 4, urlEnd);
  25             var filterStyle =
  26                 "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
  27                 imageURL +
  28                 "', sizingMethod='crop');";
  29             oBlock.style.background = "";
  30
  31             var backgroundImage = new Image();
  32             backgroundImage.src = imageURL;
  33             var tileWidth = backgroundImage.width;
  34             var tileHeight = backgroundImage.height;
  35
  36             if ((tileWidth == 0) || (tileHeight == 0))
  37             {
  38                 // There seems to be something wrong with the image, return directly
  39                 return;
  40             }
  41
  42             var blockWidth = parseInt(oBlock.style.width);
  43             var blockHeight = parseInt(oBlock.style.height);
  44             var wholeCols = Math.floor(blockWidth / tileWidth);
  45             var wholeRows = Math.floor(blockHeight / tileHeight);
  46             var extraWidth = blockWidth - (tileWidth * wholeCols);
  47             var extraHeight = blockHeight - (tileHeight * wholeRows);
  48
  49             if (currentBGStyle.indexOf("no-repeat") != -1)
  50             {
  51                 // The style is no-repeat, so we only place one row and column of images
  52                 wholeCols = 1;
  53                 wholeRows = 1;
  54                 extraWidth = 0;
  55                 extraHeight = 0;
  56             }
  57             else if (currentBGStyle.indexOf("repeat-x") != -1)
  58             {
  59                 // the style is repeat-x, so we only tile a single row
  60                 wholeRows = 1;
  61                 extraHeight = 0;
  62             }
  63             else if (currentBGStyle.indexOf("repeat-y") != -1)
  64             {
  65                 // the style is repeat-y, so we only tile a single column
  66                 wholeCols = 1;
  67                 extraWidth = 0;
  68             }
  69
  70             var newMarkup = "";
  71
  72             for (var currentRow = 0;
  73                  currentRow < wholeRows;
  74                  currentRow++)
  75             {
  76                 for (currentCol = 0;
  77                      currentCol < wholeCols;
  78                      currentCol++)
  79                 {
  80                     newMarkup += "<div style=" +
  81                             "\"position: absolute; line-height: 0px; " +
  82                             "width: " + tileWidth + "px; " +
  83                             "height: " + tileHeight + "px; " +
  84                             "left:" + currentCol *  tileWidth + "px; " +
  85                             "top:" + currentRow *  tileHeight + "px; " +
  86                             "filter:" + filterStyle +
  87                             "\" > </div>";
  88                 }
  89
  90                 if (extraWidth != 0)
  91                 {
  92                     // Add any extra bit required to fill out the row
  93                     newMarkup += "<div style=" +
  94                             "\"position: absolute; line-height: 0px; " +
  95                             "width: " + extraWidth + "px; " +
  96                             "height: " + tileHeight + "px; " +
  97                             "left:" + currentCol *  tileWidth + "px; " +
  98                             "top:" + currentRow *  tileHeight + "px; " +
  99                             "filter:" + filterStyle +
 100                             "\" > </div>";
 101                 }
 102             }
 103
 104             if (extraHeight != 0)
 105             {
 106                 // Add a final row with any extra bits required
 107                 for (currentCol = 0;
 108                      currentCol < wholeCols;
 109                      currentCol++)
 110                 {
 111                     newMarkup += "<div style=" +
 112                             "\"position: absolute; line-height: 0px; " +
 113                             "width: " + tileWidth + "px; " +
 114                             "height: " + extraHeight + "px; " +
 115                             "left:" + currentCol *  tileWidth + "px; " +
 116                             "top:" + currentRow *  tileHeight + "px; " +
 117                             "filter:" + filterStyle +
 118                             "\" > </div>";
 119                 }
 120
 121                 if (extraWidth != 0)
 122                 {
 123                     // Add any extra bit required to fill out the row
 124                     newMarkup += "<div style=" +
 125                             "\"position: absolute; line-height: 0px; " +
 126                             "width: " + extraWidth + "px; " +
 127                             "height: " + extraHeight + "px; " +
 128                             "left:" + currentCol *  tileWidth + "px; " +
 129                             "top:" + currentRow *  tileHeight + "px; " +
 130                             "filter:" + filterStyle +
 131                             "\" > </div>";
 132                 }
 133             }
 134
 135             // wrap the old content in an inner div to force it on top of the tiled images
 136             newMarkup += "<div style=" +
 137                             "\"position: absolute; line-height: 0px; " +
 138                             "z-index: 1;" +
 139                             "width: " + blockWidth + "px; " +
 140                             "height: " + blockHeight + "px; " +
 141                             "left: 0px; " +
 142                             "top: 0px; " +
 143                             "\" >";
 144
 145             oBlock.innerHTML = newMarkup + oBlock.innerHTML + "</div>";
 146         }
 147     }
 148 }
 149
 150 function onPageLoad()
 151 {
 152     detectBrowser();
 153     fixupIEPNGBG("id1");
 154     fixupIEPNGBG("id2");
 155     fixupIEPNGBG("id3");
 156     fixupIEPNGBG("id4");
 157     return true;
 158 }
 159