PDA

View Full Version : [DHTML] Cross Browser Image Fader



jscheuer1
07-11-2007, 07:40 AM
1) CODE TITLE: Cross Browser Image Fader

2) AUTHOR NAME/NOTES: John Davenport Scheuer (jscheuer1)

3) DESCRIPTION: A very easy to use image fader. No knowledge of opacity styles or filters required. The script determines what the browser supports and writes the style on the fly. All you need to configure is an array of the image's id's and initial opacities, ex:


var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex: faders[x]=['image_id', initial_opacity];
faders[0]=['mona', 50];
faders[1]=['arch', 0];

Works in all browsers that support any type of opacity style or filter.

Syntax:

fade(image_element_OR_'image_id', 'in_OR_out', target_opacity, opacity_increment, timeout_interval)
Opacity, increment, and interval are optional.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/files/fade_advanced_preset_write.htm

ddadmin
07-11-2007, 09:52 AM
Wow, very nice!

jscheuer1
07-11-2007, 05:05 PM
Thanks! I just made a few minor upgrades. The only one that affects the user is that the fade() function now accepts either the image element or its quoted id value as the first argument. The code was improved to facilitate this and to make more efficient use of the image's id in its subroutines. The demo page has been updated as well. A:


////////////// Stop Editing //////////////

line was added to the script to show where the novice should start minding his/her own business.

Trinithis
07-11-2007, 06:31 PM
Can you set the fade in time to differ from the fade out time?

Anyway, looks great, but the code slows down on my computer when the arch is fading out and the mona is fading in at the same time. (Probably not a real issue.)

thetestingsite
07-11-2007, 07:37 PM
Very nice script. Seems to be very flexible as well. Nicely done.

ddadmin
07-11-2007, 08:46 PM
Can you set the fade in time to differ from the fade out time?

Anyway, looks great, but the code slows down on my computer when the arch is fading out and the mona is fading in at the same time. (Probably not a real issue.)

What's the spec on your computers? I recken when you have multiple fade instances running (as you do in this case), you may notice an increase in system resource temporarily.

Trinithis
07-11-2007, 09:06 PM
FF1.0

Windows XP
2.1 GHz
448 MB RAM

jscheuer1
07-11-2007, 09:14 PM
You might be a little low on RAM there, Trinithis. Also, the more recent versions of FF process this type of code better. FF has been, and although it is improving, continues to be a bit slow at repetitive math in javascript. Even having two javascript marquees on one page can cause it to get jerky.

To answer your other question, yes.

Twey
07-11-2007, 10:33 PM
Not so in Fx3.0, I'm happy to say -- it rivals Opera and Konqueror quite nicely.

Trinithis
07-12-2007, 09:34 PM
Sadly, I'm stuck with 1.0.7 for the time being.

I use dial-up (I know :() and for some obscure reason, more recent (and some older) versions of FF randomly hang my connection. I don't have this issue with IE or this crappy Yahoo browser (but who wants to use those?).

I've tried fixing the problem, but since I don't know what to really do, I Googled for answers that were of no help.

I've tried FF2 and it was cool because of all these neat extensions I could use, but the threat of having to re-dial was annoying enough to send me back to the dark ages. Fortunately, I have access to an old version of Adblock.

jscheuer1
07-12-2007, 09:39 PM
Try Opera then. It is a very nice browser, and may well not have the problem that you are having in FF:

http://www.opera.com/

packdragon
06-27-2008, 07:57 PM
This is a great script, nice and flexible. Works like a charm in Firefox, however it doesn't seem to work in IE7. Your sample page works in IE7, however it is fading itself when you roll on it. I need it to fade when you roll on another object. When I altered your code to have a link fade the image, it works great in Firefox, but IE7 says, " 'undefined' is null or not an object".

My code below is a text only version, which works in FF but IE7 doesn't even produce an error this time. Changing the doctype to strict didn't help either.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">

/* Cross Browser Image Fader 2007 John Davenport Scheuer
This comment must remain for Legal Use */

var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex: faders[x]=['image_id', initial_opacity];
faders[0]=['test1', 50];
faders[1]=['test2', 10];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}
if(document.documentElement&&document.documentElement.style){
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++)
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
</script>


<style type="text/css">

a.selected {
font-weight: bold;
}

a.notselected {
font-weight: normal;
}

#home, #link2 {
background-color: #8abc66
}

</style>

</head>

<body>
<div id="headercontent">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td onmouseover="fade('test1', 'in');" onmouseout="fade('test1', 'out');"><a href="" class="selected">Home</a></td>
<td onmouseover="fade('test2', 'in');" onmouseout="fade('test2', 'out');"><a href="" class="notselected">Link 2</a></td>
<td><a href="" id="link3" class="notselected">Link 3</a></td>
<td><a href="" id="link4" class="notselected">Link 4</a></td>
</tr>
</table>
<div id="test1">TESTING SUBMENU #1</div>
<div id="test2">TESTING SUBMENU #2</div>

</div>

</body>
</html>


Any suggestions would be greatly appreciated!

jscheuer1
06-28-2008, 04:39 AM
Simple answer - Use images. The script is titled:

Cross Browser Image Fader

Complicated answer -

Part One:

IE will not apply filters in most cases unless the element has 'layout'. I'm not really sure what that means, but you can find out in the MS Knowledge Base:

http://msdn.microsoft.com/en-us/library/ms531213(VS.85).aspx

Basically it means that the element needs width, or height, or zoom, or absolute position, it floats, or is a table, or is inline-block.

But there are subtleties involved sometimes. However, all images qualify.

Part Two:

In IE 6, text with a filter will appear without Clear Type anti-aliasing unless its element has background (not a requirement in IE 5.5).

In IE 7 however, even with a background, filtered text loses its anti-aliasing quality. Opera does the same thing (as it applies to faded text, even at 100% opacity) basically, even though it doesn't use filters, and its anti-aliasing isn't called Clear Type.

Since all other text on a page in IE 7 (or Opera) generally uses Clear Type (IE only) anti-aliasing (both), filtered/faded text looks bad. You can often work around this by filtering an element as a mask superimposed over the text, but then instead of fading it in, you fade it out to reveal the text beneath.

Bottom line: Use the script as it is intended, for images.

packdragon
06-28-2008, 04:46 PM
I see, I appreciate the explanation. Guess I was trying to be too clever, heh. Thanks for your time.