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.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is the problem in this code (setTimeout function Does not work)

    Hello everybody
    I need your help in this problem

    At first, this is the code used


    HTML Code

    PHP Code:
    <input  type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div><br />
    <
    input  type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div

    JavaScript Code
    PHP Code:
    function fadeIn(elem){
          
    element elem.nextSibling;
          
    elemOpacity element.style.opacity;
          
    element.innerHTML elemOpacity;
          if (
    elemOpacity 1.0
                
    element.style.opacity parseFloat(elemOpacity) + 0.1;
          
    timeIn setTimeout(fadeIn100);



    I have used the opacity property to make fading element like fadeIn() function in jquery , and i have used
    onfocus event to execute the code .
    Problem exists in
    setTimeout function, this function Does not work But the code works without this function

    What is the cause of the problem , Please help me




  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    The problem is that the fadeIn function you are using in the timeout needs an argument (elem) but setTimeout doesn't provide it. Try this:
    Code:
    timeIn = setTimeout(function() {fadeIn(elem);}, 100);
    For cleaner code, I would recommend making your fadeIn function take the element that is to be faded, not the sibling of the element.
    Code:
    function fadeIn(element){
          elemOpacity = element.style.opacity;
          element.innerHTML = elemOpacity;
          if (elemOpacity < 1.0) 
                element.style.opacity = parseFloat(elemOpacity) + 0.1;
          timeIn = setTimeout(fadeIn, 100);
    }
    I would then either pass this.nextSibling:
    Code:
    <input  type="text" onfocus="fadeIn(this.nextSibling)" /><div class="box" style="opacity: 0.0"></div><br />
    or create an event handler:
    Code:
    function focus_fadeHandler(elem) {
      fadeIn(elem.nextSibling);
    }
    
    <input  type="text" onfocus="focus_fadeHandler(this);" /><div class="box" style="opacity: 0.0"></div><br />

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    with only some marginal changes, an adorable bit of elegance.
    Code:
    function fadeIn() {
          var element = this.nextSibling,
              elemOpacity = element.style.opacity;
          element.innerHTML = elemOpacity;
          if (elemOpacity < 1.0) {
                element.style.opacity = parseFloat(elemOpacity) + 0.1;
                timeIn = setTimeout(fadeIn.bind(this), 100);
          }
    }
    requires to be attached by JavaScript, not by HTML
    Code:
    document.getElementById(…).addEventListener("click", fadeIn, false);
    and of course an implementation of .bind()
    PHP Code:
    Function.prototype.bind = function (obj) {
        var 
    fn this;
        return function () {
            return 
    fn.apply(objarguments);
        }
    }; 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    Beagle (07-29-2010)

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Hey, .bind()!

    Great idea, will save me much cruft!

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    yea, .bind() is awesome.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I used to think that opacity does not work in IE... And I'm sure it still does not
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    I wouldn’t be surprised, if it didn’t work, either. it’s IE, after all.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It doesn't. Furthermore, IE8 has now another syntax. Moreover, IE8-as-IE7 does not see it as IE7 in some circumstances

    http://www.quirksmode.org/css/opacity.html
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You Mr Beagle and Mr Dormilich I thank everyone and I thank everyone who help me!

    the easy way for me
    PHP Code:
    timeIn setTimeout(function() {fadeIn(elem);}, 100
    work fine


  •  

    Posting Permissions

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