advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

section31 on 07/09/08


Tagged


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

SpinZ
sherakama
chippper


SuperSleight

Published in: JavaScript 

URL: http://24ways.org/2007/supersleight-transparent-png-in-ie6

SuperSleight adds a number of new and useful features that have come from the day-to-day needs of working with PNGs.

* Works with both inline and background images, replacing the need for both sleight and bgsleight
* Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
* Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
* Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
* Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

Download SuperSleight

Plain TextExpand 
  1. var supersleight	= function() {
  2.  
  3. 	var root = false;
  4. 	var applyPositioning = true;
  5.  
  6. 	// Path to a transparent GIF image
  7. 	var shim			= 'images/x.gif';
  8.  
  9. 	// RegExp to match above GIF image name
  10. 	var shim_pattern	= /images\/x\.gif$/i;
  11.  
  12.  
  13.  
  14. 	var fnLoadPngs = function() { 
  15. 		if (root) {
  16. 			root = document.getElementById(root);
  17. 		}else{
  18. 			root = document;
  19. 		}
  20. 		for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
  21. 			// background pngs
  22. 			if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
  23. 				bg_fnFixPng(obj);
  24. 			}
  25. 			// image elements
  26. 			if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
  27. 				el_fnFixPng(obj);
  28. 			}
  29. 			// apply position to 'active' elements
  30. 			if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
  31. 				obj.style.position = 'relative';
  32. 			}
  33. 		}
  34. 	};
  35.  
  36. 	var bg_fnFixPng = function(obj) {
  37. 		var mode = 'scale';
  38. 		var bg	= obj.currentStyle.backgroundImage;
  39. 		var src = bg.substring(5,bg.length-2);
  40. 		if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
  41. 			mode = 'crop';
  42. 		}
  43. 		obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
  44. 		obj.style.backgroundImage = 'url('+shim+')';
  45. 	};
  46.  
  47. 	var el_fnFixPng = function(img) {
  48. 		var src = img.src;
  49. 		img.style.width = img.width + "px";
  50. 		img.style.height = img.height + "px";
  51. 		img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
  52. 		img.src = shim;
  53. 	};
  54.  
  55. 	var addLoadEvent = function(func) {
  56. 		var oldonload = window.onload;
  57. 		if (typeof window.onload != 'function') {
  58. 			window.onload = func;
  59. 		} else {
  60. 			window.onload = function() {
  61. 				if (oldonload) {
  62. 					oldonload();
  63. 				}
  64. 				func();
  65. 			};
  66. 		}
  67. 	};
  68.  
  69. 	return {
  70. 		init: function() { 
  71. 			addLoadEvent(fnLoadPngs);
  72. 		},
  73.  
  74. 		limitTo: function(el) {
  75. 			root = el;
  76. 		},
  77.  
  78. 		run: function() {
  79. 			fnLoadPngs();
  80. 		}
  81. 	};
  82. }();
  83.  
  84. // limit to part of the page ... pass an ID to limitTo:
  85. // supersleight.limitTo('header');
  86.  
  87. supersleight.init();

Report this snippet 

You need to login to post a comment.