Log in

View Full Version : Ajax fade opacity in Safari


exia109
07-31-2008, 06:49 AM
Hi Guys,

I'm new here.

I got this code here form this site. This code fades-in something gradually (a div, image, etc.) when you mouseover a link. So I edited it, so that when you mouseout of the link it fades out. problem is it's working fine for IE and Mozilla, but it's not working for Safari. Well the fade out in safari is working smoothly, but the fade in part is not.

Here's the code:

<html>
<head>
<style type="text/css">

.gradualshine{
filter:alpha(opacity=0);
-moz-opacity:0.0;
opacity:0;
}

</style>

<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=0

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",30)
}

function slowlow(which2){
cleartimer()
//instantset(100)
highlighting=setInterval("gradualfadeout(imgobj)",30)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
else if (this.navigator.vendor.indexOf('Apple') == 0)
imgobj.style.opacity=degree/100
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<.8)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<80)
cur2.filters.alpha.opacity+=10
else if (this.navigator.vendor.indexOf('Apple') == 0 && cur2.style.opacity < .9)
cur2.style.opacity+=.5 //////////this is the part where everything went wrong
else if (window.highlighting)
clearInterval(highlighting)
}

function gradualfadeout(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity>0)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)-0.1, 0.9)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity>0)
cur2.filters.alpha.opacity-=10
else if (this.navigator.vendor.indexOf('Apple') == 0 && cur2.style.opacity > 0)
cur2.style.opacity-=.1
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

</head>

<body>

<table>
<tr>
<td width="276" height="110" background="http://www.google.com/intl/en_ALL/images/logo.gif">
<div id="test" class="gradualshine" style="width:600px; height:450px; font-weight:bold; color:#FFFFFF; background:#000000;"> test caption </div>
</td>
</tr>
</table>

<a href="#" onMouseover="slowhigh(test)" onMouseout="slowlow(test)">test</a><br>

</body>
</html>

It seems in the gradualfade function, the line :
else if (this.navigator.vendor.indexOf('Apple') == 0 && cur2.style.opacity < .9)
cur2.style.opacity+=.5

is not looping, it should add .5 to the opacity until it exceeds .9

The weird thing is, in the gradualfadeout function, it's working perfectly.

Any input would be appreciated.
jscheuer1
07-31-2008, 07:13 AM
Opacity is a string. If you add to it - say it was 0 and you add .5, it becomes 0.5, but if you then add .5 again, it becomes 0.5.5 - no longer a valid value or even a number. When you subtract though, the browser will convert it to a number automatically if at all possible. Anyway, this works:


<html>
<head>
<style type="text/css">

.gradualshine{
filter:alpha(opacity=0);
-moz-opacity:0.0;
opacity:0;
}

</style>

<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=0

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : typeof which2.style.opacity=="string"? "other" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",30)
}

function slowlow(which2){
cleartimer()
//instantset(100)
highlighting=setInterval("gradualfadeout(imgobj)",30)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
else if (browserdetect=="other")
imgobj.style.opacity=degree/100
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<.8)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<80)
cur2.filters.alpha.opacity+=10
else if (browserdetect=="other" && cur2.style.opacity < .8)
cur2.style.opacity=Math.min(parseFloat(cur2.style.opacity)+0.1, 0.99)
else if (window.highlighting)
clearInterval(highlighting)
}

function gradualfadeout(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity>0)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)-0.1, 0.9)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity>0)
cur2.filters.alpha.opacity-=10
else if (browserdetect=="other" && cur2.style.opacity > 0)
cur2.style.opacity-=.1
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

</head>

<body>

<table>
<tr>
<td width="276" height="110" background="http://www.google.com/intl/en_ALL/images/logo.gif">
<div id="test" class="gradualshine" style="width:600px; height:450px; font-weight:bold; color:#FFFFFF; background:#000000;"> test caption </div>
</td>
</tr>
</table>

<a href="#" onMouseover="slowhigh(test)" onMouseout="slowlow(test)">test</a><br>

</body>
</html>
exia109
08-01-2008, 09:00 AM
Wow, that's some new insight. That explains why the gradualfadeout works because its subtracting.

Thanks, man. Really appreciate the help.