Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: A img fader

  1. #1
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Last edited by JAVAEOC; 02-17-2004 at 11:45 PM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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&#58;alert(Smiley3) in the address bar in your demo page.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    .....Willy

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    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 -
    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
        }
      }
    5. Firefox seems to fade down faster than IE

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Willy: thanks....

    thanks for all the replies

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cute
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Cincinnati, OH
    Posts
    545
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 )

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ).

  • #10
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ask liorean I am sure one of his sig link must lead to an explanation of how to do it

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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...
    Code:
    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.

  • #13
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    for(i=0; i<=length; i++){
    window['Smiley'+i]=new fade('img'+i)
    }

    How can i write this in array form?

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    //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

  • #15
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •