The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 21, 2019, 01:45:07 AM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: JS Fader Technique - no Flash necessary!  (Read 5003 times)
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« on: September 06, 2007, 09:00:50 AM »

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:
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>
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: September 06, 2007, 10:25:33 AM »

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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
arms
Expert
****
Offline Offline

Posts: 235



View Profile
« Reply #2 on: September 06, 2007, 10:46:50 AM »

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.
Logged
m0nkeymafia
Expert
****
Offline Offline

Posts: 240


Check it!


View Profile
« Reply #3 on: September 06, 2007, 02:07:47 PM »

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

Code:
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 + ")";
}
Logged

I am Tyler Durden
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: September 06, 2007, 02:18:50 PM »

Code:
//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 + ")";
}

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
« Last Edit: September 06, 2007, 02:21:50 PM by perkiset » Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
m0nkeymafia
Expert
****
Offline Offline

Posts: 240


Check it!


View Profile
« Reply #5 on: September 06, 2007, 03:07:07 PM »

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 "FUCK why didnt i think that" lol

hope it works well Cheesy
Logged

I am Tyler Durden
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!