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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Counting Animation with JS, run when visible

    i have a problem, the counting animation im using now on multiple elements, only starts once for the first element.

    And im also trying to set the "counting-to"-value in the html. is there is an easy way to load them into the js for each element?

    in the end im trying to get the counting up animation starting when the div is visible for the user by scrolling down. when its visible it should stay as it is after running the animation once.

    Only if the user scroll the element out of the visibility, then it should reset and starting again if its get visible again.

    Has anybody an idea how i can solved that?

    heres the code:

    http://jsfiddle.net/drfux88/aJrj4/32/

    Code:
    function animateValue(id, start, end, duration) {
        var obj = document.getElementById(id);
        var range = end - start;
        var minTimer = 50;
        var stepTime = Math.abs(Math.floor(duration / range));
        stepTime = Math.max(stepTime, minTimer);
        var startTime = new Date().getTime();
        var endTime = startTime + duration;
        var timer;
    
        function run() {
            var now = new Date().getTime();
            var remaining = Math.max((endTime - now) / duration, 0);
            var value = Math.round(end - (remaining * range));
            obj.innerHTML = value;
            if (value == end) {
                clearInterval(timer);
            }
        }
    
        timer = setInterval(run, stepTime);
        run();
    }
    
    animateValue("value", 0, 75, 2000);

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    I believe this code meets the
    specifications you have laid out
    (div3 resets with visibility)
    Please ask for explanation
    of code.
    This works for me in IE11,
    I would be very interested
    to know which browsers it
    fails in.
    I would be very happy to
    receive advice on improving
    the code.


    Code:
     
     <!DOCTYPE html>
    <html>
    <body>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <div id="div1">0</div>
    <br><br><br><br><br><br><br><br>
    <div id="div3">0</div>
    <script>
    function posY(elm) {
        var test = elm, top = 0;
        while(!!test && test.tagName.toLowerCase() !== "body") {
            top += test.offsetTop;
            test = test.offsetParent;
        }
        return top;
    }
     function viewPortHeight() {
        var de = document.documentElement;
        if(!!window.innerWidth)
        { return window.innerHeight; }
        else if( de && !isNaN(de.clientHeight) )
        { return de.clientHeight; }
        return 0;
    }
     function scrollY() {
        if( window.pageYOffset ) { return window.pageYOffset; }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    }
     function checkvisible( elm ) {
        var vpH = viewPortHeight(), // Viewport Height
            st = scrollY(), // Scroll Top
            y = posY(elm);
        return !(y > (vpH + st));
    }
      
     function animateValue(obj, start, end, duration) { 
     var that=this;
     this.doit=true;
        var range = end - start;
        var minTimer = 50;
        var stepTime = Math.abs(Math.floor(duration / range));
        stepTime = Math.max(stepTime, minTimer);
        var startTime = new Date().getTime();
        var endTime = startTime + duration;
        var value = null;
        this.run = function run() {
            var now = new Date().getTime();
            var remaining = Math.max((endTime - now) / duration, 0);
            var value = Math.round(end - (remaining * range));
            obj.innerHTML = value;      
            if (value != end) {
               if(that.doit) setTimeout(run, stepTime);
            }
        }
    }
     div1.ani = new animateValue(div1, 0, 90, 20000);
    div1.ani.run();
     div3.ani = new animateValue(div3, 0, 75, 30000);
    div3.ani.run();
     div3.flag = checkvisible( div3 );
    window.onscroll=window.onresize=function(){        
         if(!div3.flag && checkvisible( div3 )){
            div3.flag=true;
            if(div3.ani)div3.ani.doit=false;
            div3.ani=null;
            div3.ani = new animateValue(div3, 0, 75, 30000);
            div3.ani.run();      
         } 
         if(div3.flag && !checkvisible( div3 )){
            div3.flag=false; 
         }       
               }
     
    </script>
    </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    DrFux (12-20-2013)

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much, that work very fine.
    But is it possible to import the number the js should counting to from the html.

    So that for example
    The div3 said
    <div id="div1">75</div>

    So its start alltime from 0 and go in this example to 75

    and if the div is:
    <div id="div1">25</div>
    it would go to 25.

    Is that possible?

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by DrFux View Post
    Thank you very much, that work very fine.
    But is it possible to import the number the js should counting to from the html.

    So that for example
    The div3 said
    <div id="div1">75</div>

    So its start alltime from 0 and go in this example to 75

    and if the div is:
    <div id="div1">25</div>
    it would go to 25.

    Is that possible?

    Sure. this is very over simplified.

    Please ask for explanations.

    Code:
      <!DOCTYPE html>
    <html>
    <body>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <div id="div1"></div>
    <br><br><br><br><br><br><br><br>
    <div id="div3" data-ani="div3.start=0,div3.end=20,div3.duration=20000"></div>
    <script>
    function posY(elm) {
        var test = elm, top = 0;
        while(!!test && test.tagName.toLowerCase() !== "body") {
            top += test.offsetTop;
            test = test.offsetParent;
        }
        return top;
    }
     function viewPortHeight() {
        var de = document.documentElement;
        if(!!window.innerWidth)
        { return window.innerHeight; }
        else if( de && !isNaN(de.clientHeight) )
        { return de.clientHeight; }
        return 0;
    }
     function scrollY() {
        if( window.pageYOffset ) { return window.pageYOffset; }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    }
     function checkvisible( elm ) {
        var vpH = viewPortHeight(), // Viewport Height
            st = scrollY(), // Scroll Top
            y = posY(elm);
        return !(y > (vpH + st));
    }
      
     function animateValue(obj, start, end, duration) { 
     var that=this;
     this.doit=true;
        var range = end - start;
        var minTimer = 50;
        var stepTime = Math.abs(Math.floor(duration / range));
        stepTime = Math.max(stepTime, minTimer);
        var startTime = new Date().getTime();
        var endTime = startTime + duration;
        var value = null;
        this.run = function run() {
            var now = new Date().getTime();
            var remaining = Math.max((endTime - now) / duration, 0);
            var value = Math.round(end - (remaining * range));
            obj.innerHTML = value;      
            if (value != end) {
               if(that.doit) setTimeout(run, stepTime);
            }
        }
    }
    div1.start=0;
    div1.end=75;
    div1.duration=20000
    eval(div3.dataset.ani)
     div1.ani = new animateValue(div1, div1.start, div1.end, div1.duration);
    div1.ani.run();
     div3.ani = new animateValue(div3, div3.start, div3.end, div3.duration);
    div3.ani.run();
     div3.flag = checkvisible( div3 );
    window.onscroll=window.onresize=function(){        
         if(!div3.flag && checkvisible( div3 )){
            div3.flag=true;
            if(div3.ani)div3.ani.doit=false;
            div3.ani=null;
            div3.ani = new animateValue(div3, div3.start, div3.end, div3.duration);
            div3.ani.run();      
         } 
         if(div3.flag && !checkvisible( div3 )){
            div3.flag=false; 
         }       
               }
     
    </script>
    </body>
    </html>
    Last edited by DaveyErwin; 12-22-2013 at 04:14 PM.

  • Users who have thanked DaveyErwin for this post:

    DrFux (01-03-2014)

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    209
    Thanks
    52
    Thanked 1 Time in 1 Post

    question about that=this

    Hi from posting regarding the use of "that=this" in object constructor function
    re posting http://www.codingforums.com/showthre...44#post1381744

    In the following code you are declaring "that" as a variable
    Code:
    function animateValue(obj, start, end, duration) { 
     var that=this;
     this.doit=true;
        var range = end - start;
        var minTimer = 50;
        var stepTime = Math.abs(Math.floor(duration / range));
        stepTime = Math.max(stepTime, minTimer);
        var startTime = new Date().getTime();
        var endTime = startTime + duration;
        var value = null;
        this.run = function run() {
            var now = new Date().getTime();
            var remaining = Math.max((endTime - now) / duration, 0);
            var value = Math.round(end - (remaining * range));
            obj.innerHTML = value;      
            if (value != end) {
               if(that.doit) setTimeout(run, stepTime);
            }
        }
    }
    How is this different than in my hypothetical situation that did not
    include an explicit declaration of the "that" variable in the suggested revision.
    I realize that the function
    you present here is in the global scope and not a method of a declared object.
    I guess I have an inadequate understanding of context as opposed to scope.
    Last edited by anotherJEK; 12-25-2013 at 08:08 PM. Reason: rectify syntax

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by anotherJEK View Post
    I realize that the function
    you present here is in the global scope and not a method of a declared object.
    the function animateValue
    is used as a Constructor.

    Instances are created and their 'method's
    named 'run' are called here ...

    div1.ani = new animateValue(div1, div1.start, div1.end, div1.duration);
    div1.ani.run();
    div3.ani = new animateValue(div3, div3.start, div3.end, div3.duration);
    div3.ani.run();

    Quote Originally Posted by anotherJEK View Post
    I realize that the function
    you present here is in the global scope and not a method of a declared object.
    I don't know what you mean here ?

    Constructors are not executed in the global scope.
    They are executed in the scope of the newly
    created Object.

    <script>
    function b(){alert(this)}
    b();// global scope, alerts window
    a = new b();// Object scope, alerts object
    </script>
    Last edited by DaveyErwin; 12-26-2013 at 04:27 AM.

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Sorry, I said scope when
    I should have said context

    Quote:
    Originally Posted by anotherJEK
    I realize that the function
    you present here is in the global scope and not a method of a declared object.


    I don't know what you mean by the above ?

    Constructors are not executed in the global context.
    They are executed in the context of the newly
    created Object.

    <script>
    function b(){alert(this)}
    b();// global context, alerts window
    a = new b();// Object context, alerts object
    </script>[/QUOTE]

  • #8
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    First thank you for your help. I think i need you again:

    I need this counting up animation for an cirlce progress bar, which display a value.

    Under http://jsfiddle.net/drfux88/5H8fK/ you see what i did so far.

    I have few problems:

    1. I need to create for every div i want an counting up animation extra code rows, as you see under the url above.

    2. I cant figure out how to start the progress bar at view too. Just like the counting animation.

    3. And last: I used a other counting by the progress bar, as you used by the numbers, cause of that both things end at different times. I try to relplicate your calculation code for the progress bar, but it didn't work.

    Have you any ideas, how to fix it?


  •  

    Posting Permissions

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