Let the numerical tally commence once we arrive at said juncture

Our script is designed to count numbers, but the issue arises when the page is refreshed and the number count starts over. We want the count to start only when a user reaches that specific number or point.

Css:-

.office{padding-right: 5px; padding-left: 5px;}
.office div{margin-bottom:5px;}
.office i {margin-right:0px;}
.office i img{width: 35px; height: 35px;}
.office div span{ font-size: 36px; position: relative; top: 10px;}
.office p{ font-size: 13px; margin:0; padding:0;}

Js:-

$(document).ready(function () {
$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
});

HTML:-

<div class="row">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="col-md-12 m-b-xm">
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/office-ico.jpg" alt=""></i>
    <span class="count">10</span>
  </div>
  <p>Offices Worldwide</p>
</div>
<div class="col-xs-4 office">
  <div>
    <i><img src="images/hard-ico.jpg" alt=""></i>
    <span class="count" data-speed="1000">180</span>
  </div>
  <p>Hardworking People</p>
</div>
<div class="col-xs-4 office">
  <div>
    <i><img src="images/coun-ico.jpg" alt=""></i>
    <span class="count">06</span>
  </div>
  <p>Countries Covered</p>
</div>
<div class="clearfix"></div>
  </div>
</div>

Please check link to full working code:- Jsfiddle

Answer №1

I made some modifications to your code. Take a look at this sandbox

Here is an example of using data attributes:

<div class="total" data-total="20">20</div>

By utilizing data attributes like this, we can keep track of the total count and easily update it.

Answer №2

<div class="row">

  <div id="startcount"class="col-md-12 m-b-xm">
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/office-ico.jpg" alt=""></i>
        <span class="count">10</span>
      </div>
      <p>Offices Worldwide</p>
    </div>
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/hard-ico.jpg" alt=""></i>
        <span class="count" data-speed="1000">180</span>
      </div>
      <p>Hardworking People</p>
    </div>
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/coun-ico.jpg" alt=""></i>
        <span class="count">06</span>
      </div>
      <p>Countries Covered</p>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

JAVASCRIPT:-

$(document).ready(function () {
document.getElementById("startcount").onmouseover = function() {
 $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });  
};
});

I believe this will help you with your issue...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Ultimate Guide to Initializing Variables in UI Router State Access

In my application, I have defined 2 states. One is "tickets" which matches /tickets ... $stateProvider // defines the states of my application .state("tickets", { // assigns properties to each state url: "/tickets", // route templateUrl: "m ...

Tips on removing previously selected files from a Bootstrap 4 input file

I am currently facing an issue with a form that includes an input file implemented using Bootstrap 4. The functionality of this input file depends on Javascript: when the user clicks on the "browse files" button, a window opens for file selection, and upon ...

Effectively implementing an event observer for dynamically loaded content

I want to set up an event listener that triggers when any of the Bootstrap 3 accordions within or potentially within "#myDiv" are activated. This snippet works: $('#myDiv').on('shown.bs.collapse', function () { //code here }); Howeve ...

Display a table using Angular's md-card and md-color

Hey there! I'm currently working on printing a table that is filled with data in an md-card. The background color is set using the md-color theme picker, which you can check out here. However, I'm encountering an issue where the printed table onl ...

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

Saving sortable items in browser storage

http://jsfiddle.net/2H2rx/ Dealing with an issue retaining changes to the last item in a sortable list. $( "#sortable" ).sortable(); $( "#sortable" ).on("sortupdate",function( event, ui ) { var sorted = $( this ).sortable( "serialize"); conso ...

Confusion between modules and classes in Node.js when using CoffeeScript

I'm struggling to understand how to use Protoype in CoffeeScript, even though I am familiar with using it in standard Javascript with Node.js and modules. Imagine I have a file named mymodule.coffee: Module = {} class MyModule constructor: (para ...

What is the process for inserting a document into an array that is nested within another array?

My current dilemma revolves around a document (referred to as 'root') which contains an array of other documents ('stick'), each of which in turn contain another array of documents ('leaf'). Simply put: root{ stickChain[leaves ...

After receiving a response from the .ajax function, the message will be added to the specified

After a successful AJAX request, the returned data will include a status parameter. If the status is false (indicating no AJAX failure), the data will contain an array of element names along with their corresponding error messages. The objective here is to ...

What is the method to retrieve a JSON encoding from the render function in Symfony2?

Struggling to implement ajax in symfony, as it poses a challenge. There's a form in twig where a value is obtained for searching a product in the database: This is the form in twig: <form id="myForm" method="post" action="{{ path('my_app_gre ...

Capture every incoming request with various HTTP methods using nock

Check out the updated intercept function below: interceptWithError() { nock(baseUrl) .get(/.*/) .replyWithError(500); nock(baseUrl) .put(/.*/) .replyWithError(500); nock(baseUrl) .post(/.*/) .replyWithError(500); nock(ba ...

JQUERY confirm dialog causing AJAX malfunction

I am encountering an issue where I am trying to execute an ajax function only after the user confirms a dialogue using JQUERY confirm. Strangely, when I include the confirmation step, my code throws an error and does not function properly. It's worth ...

Encountering a rendering error with Jest while trying to load a functional child component

I encountered an error message stating Error: Uncaught [Error: Child(...): Nothing was returned from render while testing the Parent component. Below are the relevant files that were involved: /components/Page/Children/Child.js import React from "re ...

Invoking a function from a higher-level parent scope within multiple layers of nested directives

I am working with a data structure that is nested infinitely. There is a top-level object containing a collection of objects, and each of these objects can also have their own collection of objects. To iterate through this tree, I have implemented the fol ...

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

What is the reason behind fixing an overflow issue simply by moving the mouse outside of a container in IE7 and HTML?

My webpage includes a series of questions, with each question being displayed or hidden based on the answer to the previous question. Occasionally, after toggling back and forth between questions, I notice that the final question appears below its designa ...

Creating rounded corners in Firefox can result in a gap between the border and the background

I'm trying to round the corners of a div, but in Firefox there seems to be an issue with whitespace between the border and background color. Check out my demo fiddle. <div>&nbsp;</div> div { margin: 20px; width: 250px; ...

Is it possible to identify the beginning of a download using Selenium?

Currently, I am using Python and Selenium to download a large batch of files. To ensure that each file is successfully downloaded, I am implementing a basic time.sleep() function, but I want to enhance efficiency and guarantee the completion of each downlo ...

Different ways to style this form using only CSS

Consider the HTML code below: <form> <p> <label for="id_name">Name:</label> <input id="id_name" maxlength="40" name="name" type="text"> </p> <p> <label for="id_format">Fo ...

Is there a way I can put together this CSS code?

I am currently using Socialengine (Zend Framework) along with several plugins. However, one of the plugins has its own unique CSS style. There are multiple CSS cascades in use, but they are not less or sass files. The contents of my file style.css are as ...