Web Analytics Made Easy -
StatCounter A img fader - CodingForum

Announcement

Collapse
No announcement yet.

A img fader

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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; Feb 17, 2004, 06:45 PM.
    http://www.bluephoenix.uni.cc/

  • #2
    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.
    Glenn
    vBulletin Mods That Rock!

    Comment


    • #3
      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

      Comment


      • #4
        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

        Comment


        • #5
          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
          http://www.bluephoenix.uni.cc/

          Comment


          • #6
            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

            Comment


            • #7
              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.
              does this sig match?

              Comment


              • #8
                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 )
                http://www.bluephoenix.uni.cc/

                Comment


                • #9
                  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 ).

                  Comment


                  • #10
                    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?
                    http://www.bluephoenix.uni.cc/

                    Comment


                    • #11
                      ask liorean I am sure one of his sig link must lead to an explanation of how to do it

                      Comment


                      • #12
                        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<[color=red]=[/color]length; i++){
                          window['Smiley'+i]=new fade('img'+i)
                        }
                        ...
                        for(i=0; i<[color=red]=[/color]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.
                        Glenn
                        vBulletin Mods That Rock!

                        Comment


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

                          How can i write this in array form?
                          http://www.bluephoenix.uni.cc/

                          Comment


                          • #14
                            //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
                            Glenn
                            vBulletin Mods That Rock!

                            Comment


                            • #15
                              thanks
                              http://www.bluephoenix.uni.cc/

                              Comment

                              Working...
                              X