A img fader

Please tell me anything usefull you think about this script: http://www34.brinkster.com/dgothe/fader.htm

Do you think it is usefull or not?

What u will notice is that the image fader is activated without YOU having to assign the img a onmouse over or onmouseout nor do u have to give it an id.

It also works in NS and IE.
And the only thing the user has to chage is the speedUp variable and the speedDown (they tell my programm the fading speeds :))

a lot of thanks goes to:
Garadon
Willy Duitt
beetle
glenngv
and also some to JAVAEOC (and is his small js book)

well .... hope somebody can use it :thumbsup:

The condition in the for-loop

length=imgclass.length;
for(i=0; i<=length; i++){
window['Smiley'+i]=new fade('img'+i)
}

should be:

for(i=0; i<length; i++)

otherwise, there is an excess and unused fade object created.
In your case, Smiley3 is an object when the objects should only be up to Smiley2 only (Smiley0-2). To verify this, type javascript:alert(Smiley3) in the address bar in your demo page.

I just want to compliment you on applying everything you have learned here these last few monthes. You have come a long way. Good job! :thumbsup:

.....Willy

My general improvement suggestions.

1. make it an object :).
2. attach/append to event's instead of hooking an event, makes ur script easier usable with others.
3. Why didn't you make an Smiley Array instead of smiley1,smiley2 etc..
4. Just my opinion but huge indents in code don't make it easy to read, small indents make it easy to read.

example
ur code

this.fadeUp=function(){
if(me.i<(.99-SpeedUp) && me.UD==1){
me.i+=SpeedUp
document.getElementById(me.imgId).style.MozOpacity=me.i;
document.getElementById(me.imgId).style.filter='alpha(opacity='+me.i*100+')';
setTimeout(me.fadeUp, 10)
}
else{me.stopFU}
}
How I would write it :)-

this.fadeUp=function()
{
if(me.i<(.99-SpeedUp) && me.UD==1)
{
me.i+=SpeedUp
document.getElementById(me.imgId).style.MozOpacity=me.i;
document.getElementById(me.imgId).style.filter='alpha(opacity='+me.i*100+')';
setTimeout(me.fadeUp, 10)
}
else
{
me.stopFU
}
}


5. Firefox seems to fade down faster than IE

Glenn: this is because i start i at 0 right....
Garadon:
1. make it an object .
2. attach/append to event's instead of hooking an event, makes ur script easier usable with others.
3. Why didn't you make an Smiley Array instead of smiley1,smiley2 etc..
4. Just my opinion but huge indents in code don't make it easy to read, small indents make it easy to read.
1. How is it not an object? I thought i based it on OOP, didnt I?
2. attach/append to event's instead of hooking an event... what do u mean?
3. Mainly because i am not that good with arrays and I do not know how it would improve the script.
4. Yes i have heard that from many other people that my js scripting style is not the best, but whyn i format MY scripts I make it so that I can read them as easy as possible, I never intendet to make it easy to read for the user(and it is supposed to be in one line anyways, but i have not yet done that :))
5. Not on my pc :confused:

Willy: thanks....

thanks for all the replies :)

cute :)

Do you think it is usefull or not?


It may be useful on a site where you are comparing different items. When you roll over one it fades in while the other fade out. If you had different block elements on the page when someone is working inside one you could highlight the block (if ithe bg was a graphic maybe) and fade out the others. I think the fade is a bit slow but I also drink a lot of coffee.

lol
you can chage the fade time tho... really easy
And the only thing the user has to chage is the speedUp variable and the speedDown (they tell my programm the fading speeds )

this is what I call hooking only cause I don't know if it has a real name.
document.onmouseout=function(){
basicly you hook onto an event, this has the effect of cancelling all previous uses of the event,and if any script i loaded subsequently that does the same ur hook dissapears.
There are functions that make you able to append/attach functions to events so that you don't overwrite other scripts usage of these(can't remember their names :)).

I see... i have tried it and yes it would give a conflict with any script that uses document.onmouseover anywhere, but how could i fix this?

ask liorean I am sure one of his sig link must lead to an explanation of how to do it :)

Originally posted by JAVAEOC
Glenn: this is because i start i at 0 right....

Yeah I know. If you have 3 images, the variables would be Smiley0, Smiley1, Smiley2. In the code below...

length=imgclass.length;
for(i=0; i<=length; i++){
window['Smiley'+i]=new fade('img'+i)
}
...
for(i=0; i<=length; i++){
if(e.id==('img'+i)){
window['Smiley'+i].stopFU();
}
}

...if length is 3, the smiley variables are Smiley0, Smiley1, Smiley2, Smiley3. So you have one unused variable.

for(i=0; i<=length; i++){
window['Smiley'+i]=new fade('img'+i)
}

How can i write this in array form?

//declare as global
var Smiley = new Array();

then:

for(i=0; i<length; i++){
Smiley[ i ]=new fade('img'+i);
}

Take note of the condition in the for-loop

thanks

looks good i like it im going to use it on my web page.

gtvanderwood:looks good i like it im going to use it on my web page.

cool

maybe you can give me a link to ur site....:thumbsup: