perkiset

Transparency using CSS is sketchy because IE, FF and Safari all deal with it differently. Fortunately, the CSS directives that each one uses do not mess with the others, so it's rather trivial to affect transparency in a browser-agnostic way.

I'm working with a new site where they wanted to fade-in and fade-out photos, but are uncomfortable with Flash. So I put together a demo for them and they loved it. It's somewhat inelegant, but works reliably across the 3 major browsers. You can see it demod here:

http://demos.perkiset.org/fader.html

Here is the code:

<html><body>

<style>
.trans0 { opacity:.0; filter: alpha(opacity=0); -moz-opacity: 0.0; }
.trans5 { opacity:.05; filter: alpha(opacity=5); -moz-opacity: 0.05; }
.trans10 { opacity:.10; filter: alpha(opacity=10); -moz-opacity: 0.1; }
.trans15 { opacity:.15; filter: alpha(opacity=15); -moz-opacity: 0.15; }
.trans20 { opacity:.20; filter: alpha(opacity=20); -moz-opacity: 0.20; }
.trans25 { opacity:.25; filter: alpha(opacity=25); -moz-opacity: 0.25; }
.trans30 { opacity:.30; filter: alpha(opacity=30); -moz-opacity: 0.30; }
.trans35 { opacity:.35; filter: alpha(opacity=35); -moz-opacity: 0.35; }
.trans40 { opacity:.40; filter: alpha(opacity=40); -moz-opacity: 0.40; }
.trans45 { opacity:.45; filter: alpha(opacity=45); -moz-opacity: 0.45; }
.trans50 { opacity:.50; filter: alpha(opacity=50); -moz-opacity: 0.50; }
.trans55 { opacity:.55; filter: alpha(opacity=55); -moz-opacity: 0.55; }
.trans60 { opacity:.60; filter: alpha(opacity=60); -moz-opacity: 0.60; }
.trans65 { opacity:.65; filter: alpha(opacity=65); -moz-opacity: 0.65; }
.trans70 { opacity:.70; filter: alpha(opacity=70); -moz-opacity: 0.70; }
.trans75 { opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; }
.trans80 { opacity:.80; filter: alpha(opacity=80); -moz-opacity: 0.80; }
.trans85 { opacity:.85; filter: alpha(opacity=85); -moz-opacity: 0.85; }
.trans90 { opacity:.90; filter: alpha(opacity=90); -moz-opacity: 0.90; }
.trans95 { opacity:.95; filter: alpha(opacity=95); -moz-opacity: 0.95; }
.trans100 { opacity:1.0; filter: alpha(opacity=100); -moz-opacity: 1.00; }
</style>

<table cellpadding="0" cellspacing="20" border="0" width="100">
<tr valign="top">
<td width="120" align="right">
<img src="/graphics/dot_clear.gif" height="1" width="120">
<input id="execButton" type="button" value="Fade In >>>" onClick="fade()">
</td>
<td><img id="test" src="/redcar.jpg" height="500" width="376" class="trans0"></td>
</tr>
</table>

<script>
step = 0;
adv = true;

function fade()
{
var target = document.getElementById('test');
var time = 20;
if (adv)
{
if (step < 100)
{
step += 5;
target.className = 'trans' + step;
setTimeout('fade()', time);
} else {
adv = false;
document.getElementById('execButton').value = 'Fade Out >>>';
}
} else {
if (step > 0)
{
step -= 5;
target.className = 'trans' + step;
setTimeout('fade()', time);
} else {
adv = true;
document.getElementById('execButton').value = 'Fade In >>>';
}
}
}
</script>

</body></html>

perkiset

Forgot to mention: this technique works with any DOM element, including entire divs. CAVEAT: You must "position" the div in one way or another or text divs wont do anything - so a simple position: relative should do it. You can modify the transparency while an object is on the move as well... so you could do a moving fade-in of an ad for example... it's a pretty neat effect and rather underused thus far.

/p

arms

that's pretty cool.
i've been putting off my dive back into js but it i really have to do some refreshing and catching up.

m0nkeymafia

Cool
Ive done it in the past just with JS, heres the code if you wanna look [works on all browser i tested]

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    changeLoc(opacity, id);

    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + "Applause";
}

perkiset

quote author=m0nkeymafia link=topic=489.msg3168#msg3168 date=1189112867

//change the opacity for different browsers
function changeOpac(opacity, id) {
    changeLoc(opacity, id);

    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + "Applause";
}



THAT's what I was looking for... was having trouble with style.mozOpacity and such... the standards just made no sense with it. Thanks for the add... that's WAY better than mine.

Gonna add a couple bells and whistles for my clients, probably classify it and I'll post whatever funness comes of it Thanks again for the add MM, nice work

/p

m0nkeymafia

no worries dude, everyones got their own way of doing things aint they
what i like about here is that you always get another good opinion that makes you think "Fish why didnt i think that" lol

hope it works well Applause


Perkiset's Place Home   Politics @ Perkiset's