PDA

View Full Version : Modified 'gradual highligh' script - works on safari now



Courthold
06-11-2005, 06:22 PM
Hi all. While coding my site I came across the gradual highlight script (and then the modification at http://www.dynamicdrive.com/forums/showthread.php?t=1527 to fade out as well. However as a Mac user, it has to work on safari, so I modified it slightly so it will work.

Javascript:


<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=30

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


function slowlow(which2){
cleartimer();
setTimeout(function() {gradualfadeout(which2);}, 50);
}

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

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

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

function gradualfadeout(cur3){
cr3=setTimeout(function() {gradualfadeout(cur3);}, 50)
if (browserdetect=="mozilla" && cur3.style.MozOpacity>0.3)
cur3.style.MozOpacity=Math.min(parseFloat(cur3.style.MozOpacity)-0.1)
else if (browserdetect=="ie" && cur3.filters.alpha.opacity>30)
cur3.filters.alpha.opacity=cur3.filters.alpha.opacity-10
else if (cur3.style.opacity>0.3)
cur3.style.opacity=Math.min(parseFloat(cur3.style.opacity)-0.1)
if (browserdetect=="mozilla" && cur3.style.MozOpacity<=0.3)
clearTimeout(cr3);
else if (browserdetect=="ie" && cur3.filters.alpha.opacity<=30)
clearTimeout(cr3);
else if (cur3.style.opacity<=0.3)
clearTimeout(cr3);
}

</script>


CSS:


.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}

cr3ative
06-11-2005, 06:40 PM
Excellent news - glad to see some interest in the script and modification.

I'm currently planning on purchasing an iBook before Apple ruin their computers with Intel processors, so I may well soon be able to help out more on the Mac side of things.

cr3ative
(You couldn't put the notice back in the copyright area that says I modified it, could you? Ta. :) It'd be a good idea to put your own mark in that area too, to keep track of usage online.)

mwinter
06-16-2005, 02:14 AM
While coding my site I came across the gradual highlight script (and then the modification at http://www.dynamicdrive.com/forums/showthread.php?t=1527 to fade out as well. However as a Mac user, it has to work on safari, so I modified it slightly so it will work.To be honest, I'd have sincerely hoped that if you did read that thread, you'd have incorporated the much desired improvements I suggested. The script already contained duplicated code and bizarre string-based browser detection.

In the thread you reference, I posted a link to code that contains at least the principle of a good design. Unfortunately, it doesn't work as is because Konqueror and Safari don't support the getComputedStyle method. Removing that particular usage would just mean that the opacity couldn't be inherited from a style sheet; it would have to specified inline, or during a call to the fade script.

Mike

Livia
08-10-2005, 07:33 PM
I tried your script in Safari and Firefox on Mac and the image stays dull... Did I do something wrong? :confused:

I entered the first part into the head of my page and the css part into my css - all I did was change the class to the img tag so that it affects all images... :confused:

Thanks for any help!

Livia
08-10-2005, 08:07 PM
Duh.... ok... I put the CSS part into the image:hover in my css and now the image is bright when the page loads and becomes dull when I hover over it...

But I thought the script would do it the other way round?? :confused:

That's what I need... :( and it should work on mac / safari ... :(

ddadmin
08-11-2005, 09:48 AM
I'll try and run the modified script through Safari later in the week, and if it checks out fine, may incorporate the changes to the script.

Livia
08-13-2005, 09:46 AM
:confused:

I didn't really understand that...
does that mean there's a possibility to get it the way I need it??

That would be great!! Thanks!!! :)

cr3ative
08-13-2005, 11:37 AM
clearTimeout(cr3);
Heh, I knew I had left a tag in the code somewhere.

Livia
08-18-2005, 12:36 PM
I'll try and run the modified script through Safari later in the week, and if it checks out fine, may incorporate the changes to the script.

Are there any news about this script yet??

Livia
08-18-2005, 02:13 PM
... :o oh my god - am I stupid or what???

I entered
img:hover{
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}into my css... as advised by Courthold...and the image was bright and turned dull on rollover...

But when I entered
img{
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}and
img:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}it worked...
I really don't know why I didn't think about that earlier... :(

except one thing:
I have a white background with padding applied on my images to have a white border around them.
Default status, the border is dull, too - but when I hover, the border stays dull...

Why??