PDA

View Full Version : Ultimate Fade-in slideshow (v1.5) and Safari 3 for Windows



rmcape
06-27-2007, 01:15 PM
1) Script Title: Ultimate Fade-in slideshow (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Script works fine with IE 6, 7, Firefox, and Opera. I seem to remember it works with Safari 2 (I don't own a Mac). It does not work with the new Safari 3 for Windows. The space where the images should show up is blank, though sized correctly.

If I do an alert on "userAgent" in a Safari 3 window, I get:
Mozilla/5.0 (Windows; U; Windows NT 5.1;en) AppleWebKit/522.11.3 (KHTML, like Gecko) Version/3.0 Safari/522.11.3

It seems that the script depends on these variables: dom and iebrowser.

If I do an alert on "dom" in a Safari 3 window, I get:
function getElementById() { [native code] }

If I do an alert on "iebrowser" in a Safari 3 window, I get:
[objectHTMLCollection]

I don't know enough to know how to fix this.

Anyone figured this out?

Thanks!

Bob

ddadmin
06-28-2007, 05:44 AM
Ok, John has been bugging me about updating this script for some other issues he's found, but looks like I've finally found a big enough reason to get me off my behind and do it. :) This script is next in line to be updated, probably in a few days.

jscheuer1
06-28-2007, 05:56 AM
That's actually what those should return in Safari and in many other modern browsers. See:

http://www.dynamicdrive.com/forums/showthread.php?t=20221

or:

http://www.dynamicdrive.com/forums/showthread.php?t=20192

for the updated (now also works in Safari) script and/or for more information.

rmcape
07-02-2007, 09:58 PM
Thanks! I got it to work.

I compared the new version with the older version I had been using. The older one had some additional scripting at the bottom.

Perhaps because I had the script in a separate file, I did need to add the following to make it work as before (this is the additional code):
// ========================================================
// @name The Fade Anything Technique
// @namespace http://www.axentric.com/aside/fat/
// @version 1.0-RC1
// @author Adam Michela

var Fat = {
make_hex : function (r,g,b)
{
r = r.toString(16); if (r.length == 1) r = '0' + r;
g = g.toString(16); if (g.length == 1) g = '0' + g;
b = b.toString(16); if (b.length == 1) b = '0' + b;
return "#" + r + g + b;
},
fade_all : function ()
{
var a = document.getElementsByTagName("*");
for (var i = 0; i < a.length; i++)
{
var o = a[i];
var r = /fade-?(\w{3,6})?/.exec(o.className);
if (r)
{
if (!r[1]) r[1] = "";
if (o.id) Fat.fade_element(o.id,null,null,"#"+r[1]);
}
}
},
fade_element : function (id, fps, duration, from, to)
{
if (!fps) fps = 30;
if (!duration) duration = 3000;
if (!from || from=="#") from = "#FFFF33";
if (!to) to = this.get_bgcolor(id);

var frames = Math.round(fps * (duration / 1000));
var interval = duration / frames;
var delay = interval;
var frame = 0;

if (from.length < 7) from += from.substr(1,3);
if (to.length < 7) to += to.substr(1,3);

var rf = parseInt(from.substr(1,2),16);
var gf = parseInt(from.substr(3,2),16);
var bf = parseInt(from.substr(5,2),16);
var rt = parseInt(to.substr(1,2),16);
var gt = parseInt(to.substr(3,2),16);
var bt = parseInt(to.substr(5,2),16);

var r,g,b,h;
while (frame < frames)
{
r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
h = this.make_hex(r,g,b);

setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);

frame++;
delay = interval * frame;
}
setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
},
set_bgcolor : function (id, c)
{
var o = document.getElementById(id);
o.style.backgroundColor = c;
},
get_bgcolor : function (id)
{
var o = document.getElementById(id);
while(o)
{
var c;
if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "body") { break; }
o = o.parentNode;
}
if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
return c;
}
}
// ========================================================
So, now it works. It also works on Joomla.

Thanks again,

Bob