PDA

View Full Version : Opacity Issue in IE6



dp_texas
28 Jul 2009, 3:51 PM
I'm encountering what appears to be an IE-specific bug when using some of the built-in Ext Core effects.

Specifically, I've built something like a modal functionality to handle some interactions in the web application I'm working with. I'm using a semi-transparent, absolutely positioned div to highlight the modal and prevent interaction with the rest of the page.

In Firefox/Chrome/Safari, this background div behaves properly: it goes from hidden to about 50% opacity when activated. When deactivated, it disappears instantly until reactivated.

In IE 6, it behaves perfectly the first time it is activated. After that, it no longer fades back in when reactivated. At first I thought that my logic was causing it to remain set to visibility: hidden, but some checking in the Developer Toolbar revealed that in all other aspects than transparency, it was behaving perfectly. The Developer Toolbar even informed me that the proprietary filter: alpha(opacity) css property is properly set to 50.

In other words, it behaves exactly as expected in all other respects than actually being visible. All attributes are exactly the same as the first time is is activated, when it does appear.

I'm at a loss. Has anyone else had this experience while building a modal type function?

Here is the relevant section of my code.


Ext.Ajax.on('modalupdated',function(response,callback){
popup.update(response.responseText);
if(Ext.isFunction(callback))
callback();
popup.show();
if(!that.active){
overlay.fadeIn({
endOpacity: .5,
duration: .4
})
}
popup.center();
RA.imgRolls(popup);
that.active = true;
},this)

evant
28 Jul 2009, 9:51 PM
There was a bug in the core release for opacity in IE. Have you tried grabbing the latest from SVN?

http://extjs.com/products/extcore/download.php

dp_texas
29 Jul 2009, 6:27 AM
Thanks for the quick response, Evan. It kinda forces me to ask some really beginner-level questions -- I apologize if this stuff is common knowledge. How do I go about incorporating changes from the SVN? Right now, I'm linking directly to the Google-hosted scripts (https://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js). I've only seen links to download the Ext Core 3.0 SDK, which I suspect would be the same as the Google version. What am I missing?

Joe
29 Jul 2009, 8:07 AM
I am not an official person, but this may help ...

The SVN has the latest 'source code' and google api's has the 'release versions', which are not the same. They do not publish a release for each fix they put in, so if you want fixes before they are in the next release, you pull that from the SVN directly and build your own.

Note: I generally link to a local copy of ext-core.js to be sure something won't change mid stream.

Here is a really quick rundown on how I use the SVN / JSBuilder. If someone has a better process / more details or can correct something I say, please chime in. There are most likely tutorials, etc on using this stuff, but here is the 30K overview that may get you there.

Links
For a nice SVN client see http://tortoisesvn.net/downloads to download a SVN client.

Download and install JSBuilder. See this forum for details on JSBuilder.
See http://www.extjs.com/forum/forumdisplay.php?f=8

Summary of how to create your own ext-core.js from the SVN:

Download and install the SVN client.

Create a new directory on your computer, right click it and select SVN Checkout ...
In the URL field enter: http://svn.extjs.com/svn/ext-core

This will pull the latest source code into the directory you just created, open it and go into trunk/src directory and find ext-core.jsb. Open that file using JSBuilder. Select the Output Directory tab and update to your desired output directory (i.e. C:\ext\core\svn\ ).

Select Build - Build Project.

Now look in the output directory and you should have a minified and debug version.

Hope that helps

dp_texas
29 Jul 2009, 1:24 PM
Joe, thanks for the great SVN explanation. I haven't used SVN before, but I was able to download and compile the source code without any problems.

Well, other than the problem that the original problem still exists. Unless I'm generating the code incorrectly, it appears all the original symptoms are extant.

Any other suggestions, or is this something I'll just have to work around in IE?

nanotron
30 Jul 2009, 3:00 AM
maybe this (http://extjs.com/forum/showthread.php?t=69663) thread will help.

regards