Opacity in IE does not work after I run certain JavaScript functions …

Opacity in IE(6) does not always work well, but workarounds are suggested. The following is one of them; http://www.makemineatriple.com/2007/05/opacity_text_issues. This suggests to set

position: relative;

Or …

background-color: #xxyyzz;

I tried this, but it did not work in my particular case. When I run the following JavaScript functions, …

<script type="text/javascript">
// ==================================================
//        ===== 3D parallax navigator ====
// script written by Gerard Ferrandez - January 2007
// http://www.dhteumeuleu.com
// ==================================================

var prx = {
	cx  : 0,
	cy  : 0,
	X   : 0,
	Y   : 0,
	CX  : 0,
	CY  : 0,
	FO  : 6, // focal
	RS  : .05, // speed
	RC  : 1,
	/* ==== mouse move event ==== */
	mousemove : function (e) {
		if (window.event) e = window.event;
		prx.xm = (e.x || e.clientX) - prx.nx + (prx.nw * .5);
		prx.ym = (e.y || e.clientY) - prx.ny + (prx.nh * .5);
	},
	/* ==== window resize event ==== */
	resize : function () {
		prx.nx = pxLeft(prx.scr);
		prx.ny = pxTop(prx.scr);
		prx.nw = prx.scr.offsetWidth;
		prx.nh = prx.scr.offsetHeight;
	},
	/* ==== main loop ==== */
	run : function () {
		/* ==== mouse soften ==== */
		prx.cx += (prx.xm - prx.cx) * (prx.RS * 2 * prx.RC);
		prx.cy += (prx.ym - prx.cy) * (prx.RS * 2 * prx.RC);
		/* ==== goto soften ==== */
		prx.CX += (prx.X - prx.CX) * (prx.RS * prx.RC);
		prx.CY += (prx.Y - prx.CY) * (prx.RS * prx.RC);
		/* ==== prx move ==== */
		for (var i = 0; i < prx.N; i++) {
			var o = prx.spa[i];
			o.style.left = px(o.m + prx.nw * .5 + (o.X - prx.cx * .5 - prx.CX) * o.d);
			o.style.top  = px(o.m + prx.nh * .5 + (o.Y - prx.cy * .5 - prx.CY) * o.d);
		}
		setTimeout(prx.run, 16);
	},
	/* ==== init script ==== */
	init : function (container) {
		this.scr = id(container);
		this.ref = {};
		this.spa = [];
		var k = 0;
		var r = this.scr.childNodes;
		for (var i = 0, n = r.length; i < n; i++) {
			/* ==== for each group ==== */
			var o = r[i];
			if (o.id) {
				/* ==== save coordinates ==== */
				var X = o.offsetLeft;
				var Y = o.offsetTop;
				this.ref[o.id] = {};
				this.ref[o.id].X = X;
				this.ref[o.id].Y = Y;
				this.ref[o.id].W = o.offsetWidth;
				this.ref[o.id].H = o.offsetHeight;
				o.style.position = 'static';
				var c = o.getElementsByTagName('*');
				for (var j = 0, m = c.length; j < m; j++) {
					/* ==== for each parallax object [class="prx"] ==== */
					if (c[j].className.indexOf('prx') >= 0) {
						var s = this.spa[k] = c[j];
						/* ==== zIndex = parallax level ==== */
						s.Z = s.style.zIndex;
						s.d = Math.min(prx.FO, prx.FO / (prx.FO + 1 - s.Z));
						/* ==== x,y coordinates - group + local ==== */
						s.X = X + s.offsetLeft;
						s.Y = Y + s.offsetTop;
						/* ==== zoom factor (% sizes only) ==== */
						s.W = s.offsetWidth * ((!s.style.width || s.style.width.indexOf('px') > 0) ? 1 : s.d);
						s.H = s.offsetHeight * ((!s.style.height || s.style.width.indexOf('px') > 0) ? 1 : s.d);
						s.style.width  = px(s.W);
						s.style.height = px(s.H);
						/* ==== buttons/links ==== */
						if(s.onclick) {
							s.style.cursor = 'pointer';
							s.style.zIndex = 100;
							s.onmouseover  = function() {
								this.m = 2;
								prx.RC = .5;
							}
							s.onmouseout   = function() {
								this.m = 0;
								prx.RC = 1;
							}
						}
						/* ==== navigation functions ==== */
						s.goto = function (o, ret) {
							prx.RC = 1;
							if (!ret) id(o).O = this.oid;
							id(o).style.visibility = 'visible';
							prx.X = prx.ref[o].X - .5 * (prx.nw - prx.ref[o].W);
							prx.Y = prx.ref[o].Y - .5 * (prx.nh - prx.ref[o].H);
						}
						s.ret = function () {
							this.goto(this.p.O, true);
						}
						s.hide = function () {
							setTimeout('id("' + this.oid + '").style.visibility = "hidden";', 500);
						}
						s.oid = o.id;
						s.p = o;
						s.m = 0;
						k++;
					}
				}			
			}
		}
		this.N = this.spa.length;
		/* ==== resize & mouse events ==== */
		addEvent(window, 'resize', this.resize);
		addEvent(window.document, 'mousemove', this.mousemove);
		/* ==== start ==== */
		this.resize();
		this.xm = this.nw;
		this.ym = this.nh;
		this.scr.style.visibility = 'visible';
		this.run();
	}
}

onload = function() {
	/* ==== init ==== */
	setTimeout("prx.init('screen')", 500);
} 

</script>

Code (markup):

(By the way, this code is used in this DHTML website; http://www.dhteumeuleu.com/dhtml/nav-3D.html.)

… opacity in IE gets messed up. Well, it just doesn’t work. Why??? How can I fix this problem?

 

Have you considered using Scritaculous(http://script.aculo.us/) or Mootools (http://mootools.net/)? These are javascript libraries that handle cross browser issues internally and allow you to set things like Opacity without having to worry about cross browser issues.


Your site is very interesting....very different...but interesting...if you'd like some suggestions that would increase performance let me know and I may be able to give you a few pointers.

Good work through.

 

Funny, you mentioned it. I was actually playing with Mootools and trying to see if I can incorporate it. I love how it works, but the problem is that, once I put this inside this 3D framework, it apparently overwrites Mootools objects' behaviors.

Actually, my site is this. I plan to update this today; I was just working on this. But it still doesn't address the problem that I just described. I'd certainly appreciate your input, particularly, how I can possibly get around this problem.

 

Here is how to set opacity in IE:

filter:alpha(opacity=20);

Code (markup):

and firefox:

opacity:0.2

Code (markup):

I threw together a quick example here:

http://www.dotcomunity.com/opacity.html

Hope that helps! Good luck.

one more thing - you should check out YSlow to speed up your site....your site currently makes 34 HTTP requests to load and is over 600K. even a browser with a primed cache will make 34 HTTP requests on your site. YSlow can help you figure out what to do to reduce some of those.

 

Just a quick note, there is a bug in IE related to opacity (at least dynamically applied opacity) and relative elements. This has nothing to do with how you set it... its a bug.

Not sure exactly why, but as near as I have been able to tell the issue is when you apply opacity to an element that has relatively positioned elements inside it. For some reason the opacity is applied to the container, but any relative elements inside it seem to operate in a style neutral bubble... its like when you have floats on content and remove them from the z-index, relative removes the elements from the styling object.

So the fix is to not have relative elements inside boxes you want to opacitify. Yeah, I know, WTF IS THAT?!?

You could also write your scripts in a way that they follow the node paths and apply the filter to all the internal elements. However, that could be both intensive (for large containers with lots of children) and a PITA.

Good luck,
rt

 

Is this just IE6 or both IE6 and 7?