Current time: 04-24-2014, 03:11 PM Hello There, Guest! (LoginRegister)

Post Reply 
img Opacity fade not working
04-20-2008, 05:13 PM
Post: #1
img Opacity fade not working
Hi,

I am trying to make an image fade in, but it is not working in FF or Opera (haven't tried Safari, but I figure the code is probably wrong already so no need to try). It works just fine in IE, but of course in IE I have used their version of the opacity... anyway, here's the code.

Code:
<script type="text/javascript">
var logoEffectInterval;
function addLogoImgOpacity() {
clearInterval(logoEffectInterval);
var filterOpacity = document.getElementById('kufitlogoheading').filters.alpha.opacity;
var regulrOpacity = document.getElementById('kufitlogoheading').style.opacity;
document.getElementById('kufitlogoheading').style.opacity = 1;
if(filterOpacity < 5 || regulrOpacity < 0.1) {
document.getElementById('kufitlogoheading').filters.alpha.opacity += 5;
document.getElementById('kufitlogoheading').style.opacity += 0.1;
logoEffectInterval = setInterval("addLogoImgOpacity()", 1200);
}
else if(filterOpacity < 20 || regulrOpacity < 0.4) {
document.getElementById('kufitlogoheading').filters.alpha.opacity += 10;
document.getElementById('kufitlogoheading').style.opacity += 0.1;
logoEffectInterval = setInterval("addLogoImgOpacity()", 220);
}
else if(filterOpacity < 55 || regulrOpacity < 0.7) {
document.getElementById('kufitlogoheading').filters.alpha.opacity += 15;
document.getElementById('kufitlogoheading').style.opacity += 0.2;
logoEffectInterval = setInterval("addLogoImgOpacity()", 150);
}
else if(filterOpacity < 100 || regulrOpacity < 1.0) {
document.getElementById('kufitlogoheading').filters.alpha.opacity += 20;
document.getElementById('kufitlogoheading').style.opacity += 0.2;
logoEffectInterval = setInterval("addLogoImgOpacity()", 100);
}
}
document.write('<img src="http://www.kustomfitness.com/KFbanner3.png" id="kufitlogoheading" alt="Kustom Fitness" onload="addLogoImgOpacity()" style="filter:alpha(opacity=0);opacity:0.0"');
</script>
<noscript>
<img src="http://www.kustomfitness.com/KFbanner3.png" id="kufitlogoheading" alt="Kustom Fitness">
</noscript>
So I figure if the browser does not support a version of the opacity filter, then it will just kind of be ignored (since it probably also then does not have a way of detecting what the opacity is set at and thus would not cause an infinite loop).

I have no idea why this isn't working, so any help would be appreciated.

Thanks.
Find all posts by this user
Quote this message in a reply
04-21-2008, 05:50 PM
Post: #2
img Opacity fade not working
This works....

Code:
<html>
<head>    
<script type="text/javascript">
var logoEffectOpacity = 0;  // 0 to 100
var logoEffectInterval;    
var logoEffectDuration = 0; // milliseconds

// The following function graciously stolen from:
// http://clagnut.com/sandbox/imagefades/
// Onload image fades without Flash

function setOpacity(element, opacity) {
// Avoid flicker in Firefox
opacity = (opacity == 100) ? 99.999 : opacity;

// IE/Win
element.style.filter = "alpha(opacity:" opacity ")";

// Safari<1.2, Konqueror
element.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
element.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
element.style.opacity = opacity/100;
}

function addLogoImgOpacity() {
clearInterval(logoEffectInterval);
var element = document.getElementById('kufitlogoheading');
logoEffectDuration = 0;
if (logoEffectOpacity < 5) {
logoEffectOpacity  = 5;
logoEffectDuration = 1200;
}
else if (logoEffectOpacity < 20) {
logoEffectOpacity  = 10;
logoEffectDuration = 220;
}
else if (logoEffectOpacity < 55) {
logoEffectOpacity  = 15;
logoEffectDuration = 150;
}
else if (logoEffectOpacity < 100) {
logoEffectOpacity  = 20;
logoEffectDuration = 100;
}
setOpacity(element, logoEffectOpacity);
if (logoEffectDuration > 0) {
logoEffectInterval = setInterval("addLogoImgOpacity()", logoEffectDuration);
}
}
</script>
</head>
<body>
<script type="text/javascript">
document.write('<img src="KFbanner3.png" id="kufitlogoheading" '  
'alt="Kustom Fitness" onload="addLogoImgOpacity()" style="filter'  
':alpha(opacity=0);opacity:0.0"');
</script>
<noscript>
<img src="KFbanner3.png" id="kufitlogoheading" alt="Kustom Fitness">
</noscript>
</body>
</html>
Cool openvein.org -//- One-time $50.00 discount on DreamHost plans: Use ATROPOS7
Visit this user's website Find all posts by this user
Quote this message in a reply
04-22-2008, 02:46 PM
Post: #3
img Opacity fade not working
Hey,

Thanks a lot for your help. I acutally just figured out a couple minutes ago that if the browser was not internet explorer and it had .filters.alpha.opacity in the script that it stopped the script (I was about to just use an if IE conditional comment for it).

Also, I was not aware of this "KHTMLopacity" so thanks for that too.
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: