/    Sign up×
Community /Pin to ProfileBookmark

problem with IE opacities

i’ve been researching this for a while, and dont see why what i’m doing isnt working… I’m trying to fade in text.. my code works well with FF, but failing in IE…

i’m declaring my divs as follows:

<div style=”position: relative; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; left: 0; top: 0; “id=”mytext”>texthere</div>

then calling my function in my body:
<script language=”javascript”>fade();</script>

function looks like:

<script language=”JavaScript”>
var delay = 1;
var opa=0;
var sett;

function fade(){
opa++;
var obj = document.getElementById(mytext);
if(window.sidebar){//Moz
obj.style.MozOpacity=(opa==4)?’1′:’0.’+(2*opa);
}
else{//IE
obj.style.filter = “alpha(opacity=”+(opa*
4)+”)”;
}
if(opa==4){clearTimeout(sett);
cleanplate();
checkit++;
fade();
}
else{sett = setTimeout(‘fade()’,delay)}
}

function cleanplate()
{
opa=0;
}

</script>

any ideas?

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@TheBearMayJul 18.2006 — IE's filter seems to work best with images, but something like this seems to work:
[code=php]
<script type="text/javascript">
fadeVal=100;
function fadeDiv(divName){
document.getElementById(divName).className="opaque"+fadeVal;
fadeVal-=5;
if(fadeVal > 0) setTimeout("fadeDiv('"+divName+"')",50);
}

</script>
<style type="text/css">
div.opaque0 {
width: 100%;
opacity:.00;
filter: alpha(opacity=00);
-moz-opacity: 0.00;
}
div.opaque5 {
width: 100%;
opacity:.05;
filter: alpha(opacity=05);
-moz-opacity: 0.05;
}
div.opaque10 {
width: 100%;
opacity:.10;
filter: alpha(opacity=10);
-moz-opacity: 0.10;
}
div.opaque15 {
width: 100%;
opacity:.15;
filter: alpha(opacity=15);
-moz-opacity: 0.15;
}
div.opaque20 {
width: 100%;
opacity:.20;
filter: alpha(opacity=20);
-moz-opacity: 0.20;
}
div.opaque25 {
width: 100%;
opacity:.25;
filter: alpha(opacity=25);
-moz-opacity: 0.25;
}
div.opaque30 {
width: 100%;
opacity:.30;
filter: alpha(opacity=30);
-moz-opacity: 0.30;
}
div.opaque35 {
width: 100%;
opacity:.35;
filter: alpha(opacity=35);
-moz-opacity: 0.35;
}
div.opaque40 {
width: 100%;
opacity:.40;
filter: alpha(opacity=40);
-moz-opacity: 0.40;
}
div.opaque45 {
width: 100%;
opacity:.45;
filter: alpha(opacity=45);
-moz-opacity: 0.45;
}
div.opaque50 {
width: 100%;
opacity:.50;
filter: alpha(opacity=50);
-moz-opacity: 0.50;
}
div.opaque55 {
width: 100%;
opacity:.55;
filter: alpha(opacity=55);
-moz-opacity: 0.55;
}
div.opaque60 {
width: 100%;
opacity:.60;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
}
div.opaque65 {
width: 100%;
opacity:.65;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
}
div.opaque70 {
width: 100%;
opacity:.70;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
}
div.opaque75 {
width: 100%;
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
}
div.opaque80 {
width: 100%;
opacity:.80;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
}
div.opaque85 {
width: 100%;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
}
div.opaque90 {
width: 100%;
opacity:.90;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
}
div.opaque95 {
width: 100%;
opacity:.95;
filter: alpha(opacity=95);
-moz-opacity: 0.95;
}
div.opaque100 {
width: 100%;
opacity:1.00;
filter: alpha(opacity=100);
-moz-opacity: 1.00;
}

</style>
</head>

<body>

<div id="fadeMe" onclick="fadeDiv(this.id)" >
Just some random text.
</div>[/code]
Copy linkTweet thisAlerts:
@SlykauthorJul 18.2006 — that seems like an awfully long code for what it does...

is there any other way to do it without messin with the css styles?

...i've played with it a bit more, and i've realized that the

"<div style="position: relative; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; left: 0; top: 0; "id="mytext">texthere</div>"

line is the part thats not working properly... the alpha opacities dont do anything... i start them at "0", and yet they are visible upon entering the site... is the filter:alpha(opacity=0); opacity:0; line correct???? ive read some people saying this works, but so far no luck here.
Copy linkTweet thisAlerts:
@toicontienJul 18.2006 — Internet Explorer will not apply the opacity filter to elements that do not have the hasLayout property triggered. Though "position: relative;" should do that, instead try using "zoom: 1;" The Scriptaculous JS effects library has a couple notes on that (or was it Prototype?) Meh. Either way, Scriptaculous is built on Prototype, and one of them always sets the zoom property to 1 before setting the opacity of an element. You might need to explicitly do it using the DOM rather than inline CSS styles, setting the .style.zoom property to "1"
Copy linkTweet thisAlerts:
@SlykauthorJul 18.2006 — oh **** toicontein... that worked.

i have no clue as to what the 'zoom' property does, but it sure fixed it... IE sucks. thank you much.


..the only thing now is that the text looks messed up as its fading in (when its zoomed @ 1)... i change it back to zoom: 0 at the end, but as its comin in, it looks very jagged.
Copy linkTweet thisAlerts:
@toicontienJul 19.2006 — There's another bug/quirk with IE-Win and opacities. If the element that the opacity filter is applied to doesn't have a background color set, the text seems to boldface itself until the element is rendered invisible. But, all you need to do is set the background color usually and that problem goes away -- another tip I found whilst browsing the Scriptaculous documentation.

I've run into the same problem at [url=http://www.motortopia.com/]motortopia.com[/url] with the comment boxes on people's garage pages. I've yet to fix it, mostly because I just haven't gotten around to it yet. ?

The zoom property is an IE-Win CSS property that allows you to "zoom in" or "zoom out" on a single element. I've never really played around with it, I just know it's useful for Internet Explorer 7 and tripping the hasLayout property so it renders CSS in a halfway normal fashion. It also works on IE5 and 6, but problems can sometimes arise if zoom is used too judiciously to invoke hasLayout. In your case, it won't hurt anything.
Copy linkTweet thisAlerts:
@SlykauthorJul 19.2006 — yeah... thats exactly what its doing... its going bold while i fade in my text (changing the opacity)... currently i'm changing the zoom from 0 to 1 just as i start the opacity change, and then once its at 100% opacity, i go back to 0, so it looks legit afterwards, however, during the process, the text is bolded and looks kinda harsh. I would apply a bg color to it, however, the text sits in front of a gradient menubar... any ideas off the top of ur head?
Copy linkTweet thisAlerts:
@SlykauthorJul 19.2006 — bumpin this cuz i responded late last night and still havent been able to fix this (bolding issue)...

anyone have any ideas?
Copy linkTweet thisAlerts:
@toicontienJul 19.2006 — place the gradient in the same element as the text, if possible. Then you could apply a background color. Or, you can just leave IE-Win and let it be ignorant ?

Oh, and leave the zoom set to 1. Zero might not be a valid value for zoom. Either way, zoom isn't the culprit here ?
Copy linkTweet thisAlerts:
@SlykauthorJul 19.2006 — ehh... i tried putting a bg color on both the table in which my text is located, as well as directly on the text itself... neither of them fix the bolding.

also, leaving the zoom set to 1 makes the text stay bolded even after it has been faded in... changing it back to 0 after the fade is complete is what is making the text look normal (unbolded) afterwards.... i'm assuming that the default zoom is, in fact, 0.

This whole bolding thing wouldnt bother me much, if it didnt look so bad with the text i'm trying to use (which i have to use)... it makes the text bigger,darker, and most importantly, it appears to be grainy/jagged.
×

Success!

Help @Slyk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...