מדיה ויקי:Gadget-matchToResolution.js

/*
* This function goes up the document's tree, and searches for div elements
* To prevent taking up system resources, the function only goes up 5 elements.
* When a div element is found, if it's width is same as the size given as the oldSize parameter,
* it resizes it to the newSize parameter.
* Written by [[User:רציונל]]
*/
function resizeParentNodes(element, oldSize, newSize) {
  var parent=element.parentNode;
  var i=0;
  var margin = 0.1
  while(parent && i<5) {
    if(parent.tagName == 'DIV') {
	  div_wid = parseInt(parent.style.width);
	  //if div wid is within 'margin' range of picture, we associate it with the picture.
	  
	  if(((div_wid/oldSize) < 1 + margin) && ((div_wid/oldSize) > 1 - margin)) {
	    //maintain original difference, so we won't hurt frames etc.
	    parent.style.width = (newSize+(div_wid-oldSize))+'px';
	  }
	}
	parent = parent.parentNode;
	i = i+1;
  }
}

function matchToResolution() {
  var wid, hei;
  //Identify user's resolution.
  if (self.screen) {
    wid = screen.width
    hei = screen.height
  }
  else if (self.java) {
    var jkit = java.awt.Toolkit.getDefaultToolkit();
    var scrsize = jkit.getScreenSize();
    wid = scrsize.width;
    hei = scrsize.height;
  }
  else{
    //no java
    return;
  }
  //the number here decides which percentage of the screen resolution should be taken as max image size
  var maxSize = wid*0.7;
  //for debug on high res. browsers, uncomment the following line.
  //maxSize = 800*0.7;
 
  for (x=0;x<document.images.length;x++){
     var iHeight = document.images[x].height;
     var iWidth = document.images[x].width;

     if (iHeight > iWidth){
        sizeGuide = iHeight;
        size2 = iWidth;
     }else{
        sizeGuide = iWidth;
        size2 = iHeight;
     }

    if (sizeGuide > maxSize){
		
		resizeParentNodes(document.images[x], sizeGuide, maxSize);
		
        sizeRatio = sizeGuide / size2;
        newSize1 = maxSize;
        newSize2 = newSize1 / sizeRatio;

        if (iHeight > iWidth){
           document.images[x].height = newSize1;
           document.images[x].width = newSize2;
        }else{
           document.images[x].width = newSize1;
           document.images[x].height = newSize2;
        }
     }
  }
}
$(matchToResolution);