SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member lionking2's Avatar
    Join Date
    May 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,837
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    When the setTimeout calls fadeIn() it is doing so without passing a value for elem.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member lionking2's Avatar
    Join Date
    May 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have try to add elem with setTimeout function and without elem but also doesn't work fine

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    You can pass the value to an anonymous function, which then returns an inner function (which remembers the passed value) which properly calls fadein

    Code javascript:
    timeIn = setTimeout(function () {
        return function () {
            fadeIn(elem);
        };
    }(elem), 100);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member lionking2's Avatar
    Join Date
    May 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Thank You very much Mr pmw57 for solution
    And i have found the solution that you typed is the easiest solution I have seen so far .
    The code that you typed easy to understand But there is a point in the code not understood

    Code:
    timeIn = setTimeout(function () {
        return function () {
            fadeIn(elem);
        };
    }(elem), 100);
    Why do you add (elem) argument again in this place , While you have added previously fadeIn(elem) .
    This point, I did not understand well I hope to clarify more

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lionking2 View Post
    Thank You very much Mr pmw57 for solution
    And i have found the solution that you typed is the easiest solution I have seen so far .
    The code that you typed easy to understand But there is a point in the code not understood

    Code:
    timeIn = setTimeout(function () {
        return function () {
            fadeIn(elem);
        };
    }(elem), 100);
    Why do you add (elem) argument again in this place , While you have added previously fadeIn(elem) .
    This point, I did not understand well I hope to clarify more
    Sometimes the content of the inner function can be quite complex, so when you revisit the code later on, it can be tricky to determine the reason for why this design of code has been done. By calling the outer function with the variable(s) that you need to retain, that helps to inform you about why such a technique is used.

    It also means that the inner function is not relying on an assumption that the variables that it requires will be available at some higher scoped level. Instead, you are explicitly making sure that the requirements for the inner function are provided, which is a better type of coding technique to apply.
    Last edited by paul_wilkins; Jul 29, 2010 at 22:20.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member lionking2's Avatar
    Join Date
    May 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank Mr pmw57 for Help

  8. #8
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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