/    Sign up×
Community /Pin to ProfileBookmark

fade in suckerfish

I’d like to add a little finesse to [url=”apps.cpe.ky.gov/temp_docs/prototypes/KYVC/kyvc5/index.htm”]this design draft[/url] by having the suckerfish <ul> fade into the area rather than instantly appear.
I’ve experimented with
– css/animated .gif backgrounds, but IE6 reloads the .gif on each <li> hover
– css/opacity backgrounds, but the nested <li> text is also affected by the container opacity setting
So, I’m thinking that this has to occur through javascript. What should I do to the standard suckerfish js to create this effect? (Note: I did search but only found PHP solutions, which I can’t use.) I played around with setInterval, but I couldn’t get it to work in IE6 (although that may have to do with my js skills rather than the function). (I assume, too, that I’d need to take out the li:hover stuff from the CSS so Fx will be reliant on this also.)

[code]
<script type=”text/javascript”><!–//–><![CDATA[//><!–

sfHover = function() {
var sfEls = document.getElementById(“Nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);

//–><!]]></script>
[/code]

[I]Note: I am still working on this document, so some things might look a little weird, however the changes should not affect the <ul> in question.[/I]
KDLA

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@KorMay 01.2008 — Well, Here's an example of crossbrowser fadein/fadeout on rollover/rollout. I hope it migh be of some help:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
#mydiv{
width:50px;
height:50px;
background:#ff0000;
opacity:0;
filter:alpha(opacity=0);
border:solid 1px #000;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
//Globals
var isIE=/*@cc_on!@*/false;//IE detector
var maxOpacity=isIE?100:1;
var minOpacity=0;
var step=isIE?10:0.1;
var delay=50;
var divOpac=minOpacity, fadeOn;

//onmouseover-onmouseout
function setRoll(){
var obj=document.getElementById('mydiv')
obj.onmouseover=function(){fadeOn?clearTimeout(fadeOn):null;fade(this,1)}
obj.onmouseout=function(){clearTimeout(fadeOn);fade(this,-1)}
}

//fade function
function fade(obj,q){
divOpac+=step*q;
divOpac&lt;minOpacity?divOpac=minOpacity:divOpac&gt;maxOpacity?divOpac=maxOpacity:null;
isIE?obj.style.filter='alpha(opacity='+divOpac+')':obj.style.opacity=divOpac.toString();
if(divOpac==minOpacity||divOpac==maxOpacity){return}
fadeOn=setTimeout(function(){fade(obj,q)},delay);
}

//attach event crossbrowser functions below
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i&lt;len;i++) evts[i]();
}
AttachEvent(window,'load',setRoll,false);
&lt;/script&gt;
&lt;body&gt;
&lt;div style="border:1px solid #000;height:50px;width:50px"&gt;
&lt;div id="mydiv"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@KDLAauthorMay 05.2008 — I found a good one here: http://www.leigeber.com/2008/05/javascript-color-fading-script/

What I want to know is, can this be adapted to go from "transparent" to a color, rather than color to color? I've been playing around with it, and have been unsuccessful.
Copy linkTweet thisAlerts:
@KorMay 06.2008 — Well, you can use a background or a certain color and a gif image mono-chrome, of another color and play with the gif's transparecy.
×

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...