CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-plugins
jane
jane

Reputation: 241

jQuery count to a target number only when the section appears in the browser view

In this website, if you scroll down to the "medal part"

pic for help

and refresh the page,you will see the numbers roll and stop at a target.

Now the problem is can we have the numbers roll only when the medal section appears in the browser view.

What is happening is that when the user loads the website, the numbers roll perfectly but they happen in the background. The user when he/she scrolls down to the medal section, that effect is not visible as it gets over by then and he needs to refresh the page to see the effect.

One guy from the community suggested this jQuery Plugin. I tried using the plugin in my JavaScript (please follow the comment in the JavaScript part of the fiddle or code)

Code involved :

(function($) {
  $.fn.countTo = function(options) {
    options = options || {};

    return $(this).each(function() {
      // set options for current element
      var settings = $.extend({}, $.fn.countTo.defaults, {
        from: $(this).data('from'),
        to: $(this).data('to'),
        speed: $(this).data('speed'),
        refreshInterval: $(this).data('refresh-interval'),
        decimals: $(this).data('decimals')
      }, options);

      // how many times to update the value, and how much to increment the value on each update
      var loops = Math.ceil(settings.speed / settings.refreshInterval),
        increment = (settings.to - settings.from) / loops;

      // references & variables that will change with each update
      var self = this,
        $self = $(this),
        loopCount = 0,
        value = settings.from,
        data = $self.data('countTo') || {};

      $self.data('countTo', data);

      // if an existing interval can be found, clear it first
      if (data.interval) {
        clearInterval(data.interval);
      }
      data.interval = setInterval(updateTimer, settings.refreshInterval);

      // initialize the element with the starting value
      render(value);

      function updateTimer() {
        value += increment;
        loopCount++;

        render(value);

        if (typeof(settings.onUpdate) == 'function') {
          settings.onUpdate.call(self, value);
        }

        if (loopCount >= loops) {
          // remove the interval
          $self.removeData('countTo');
          clearInterval(data.interval);
          value = settings.to;

          if (typeof(settings.onComplete) == 'function') {
            settings.onComplete.call(self, value);
          }
        }
      }

      function render(value) {
        var formattedValue = settings.formatter.call(self, value, settings);
        $self.html(formattedValue);
      }
    });
  };

  $.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 0, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    formatter: formatter, // handler for formatting the value before rendering
    onUpdate: null, // callback method for every time the element is updated
    onComplete: null // callback method for when the element finishes updating
  };

  function formatter(value, settings) {
    return value.toFixed(settings.decimals);
  }
}(jQuery));

jQuery(function($) {
  // custom formatting example
  $('#count-number').data('countToOptions', {
    formatter: function(value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});



// plugin for appear/disappear events which are fired when an element became visible/invisible in the browser viewport.

// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
  // initialise the counters
  var counters = {};
  var i = 0;
  if (singleRun) {
    // track each of the counters
    $(".timer").each(function() {
      counters[this.id] = $(this).data("to");
      i++;
    });
    // animate the counters
    $.each(counters, function(key, val) {
      $({
        countVal: 0
      }).animate({
        countVal: val
      }, {
        duration: 1500,
        easing: "linear",
        step: function() {
          // update the display
          $("#" + key).text(Math.floor(this.countVal));
        }
      });
    });
    singleRun = false;
  }
});
/* CSS Document */

/* Float Elements
---------------------------------*/

.fl-lt {
  float: left;
}
.fl-rt {
  float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.figure {
  margin: 0px;
}
img {
  max-width: 100%;
}
a,
a:hover,
a:active {
  outline: 0px !important
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #888888;
  margin: 0;
}
h2 {
  font-size: 34px;
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}
h3 {
  font-family: 'Montserrat', sans-serif;
  color: #222222;
  font-size: 16px;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  font-weight: 400;
}
h6 {
  font-size: 16px;
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  margin: 0 0 60px 0;
}
p {
  line-height: 24px;
  margin: 0;
}
/* Header Styles
---------------------------------*/

.header {
  text-align: center;
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 280px 0;
}
.logo {
  width: 130px;
  margin: 0 auto 35px;
}
.header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0 0 22px 0;
  color: #fff;
}
.we-create {
  padding: 0;
  margin: 35px 0 55px;
}
.wp-pic {
  margin-bottom: 20px;
}
.we-create li {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #bcbcbc;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 5px 0 0;
  padding: 0 0 0 15px;
}
.we-create li:first-child {
  background: none;
}
.start-button {
  padding-left: 0px;
}
.start-button li a {
  color: #fff;
}
.link {
  padding: 15px 35px;
  background: #7cc576;
  color: #fff !important;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 25px;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
  text-decoration: none;
  color: #7cc576 !important;
  background: #fff;
}
.link:active,
.link:focus {
  background: #7cc576;
  text-decoration: none;
  color: #fff !important;
}
/* Team
---------------------------------*/

.team-leader-block {
  max-width: 993px;
  margin: 0 auto;
}
.team-leader-box {
  width: 30.66%;
  margin-right: 3.82979%;
  height: 490px;
  overflow: hidden;
  text-align: center;
  float: left;
}
.team-leader-box span {
  margin-bottom: 24px;
  display: block;
}
.team-leader-box:nth-of-type(3n+0) {
  margin: 0;
}
.team-leader {
  width: auto;
  height: auto;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
  margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 50%;
}
.team-leader-shadow a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease-in-out;
  font-size: 20px;
  opacity: 0;
  color: #fff;
  text-decoration: none;
}
.team-leader:hover .team-leader-shadow {
  box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover .team-leader-shadow a {
  opacity: 1;
}
/*.team-leader:hover ul {
  display: block;
  opacity: 7
}*/

.team-leader img {
  display: block;
  border-radius: 50%;
}
.team-leader ul {
  display: block;
  opacity: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: -14px;
  z-index: 15;
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/

.team-leader ul p2 {
  display: inline;
  font-size: 25px;
  color: blue;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}
.
/* Footer
---------------------------------*/

.footer {
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 35px 0 35px;
}
.footer-logo {
  margin: 15px auto 35px;
  width: 76px;
}
.copyright,
.credits {
  color: #cccccc;
  font-size: 14px;
  display: block;
  text-align: center;
}
.copyright a,
.credits a {
  color: #7cc576;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.delay-03s {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.delay-04s {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.delay-06s {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.delay-07s {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}
.delay-08s {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.delay-09s {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}
.delay-1s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.delay-12s {
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
#team.main-section.team {
  background-color: #e6e6e6;
}
/*css related to the points box*/

body {
  font-family: Arial;
  padding: 25px;
  background-color: #f5f5f5;
  color: #808080;
  text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */

/* Column Grids */

/*-=-=-=-=-=-=-=-=-=-=-=- */

.team-leader-box {
  .col_half {
    width: 49%;
  }
  .col_third {
    width: 32%;
  }
  .col_fourth {
    width: 23.5%;
  }
  .col_fifth {
    width: 18.4%;
  }
  .col_sixth {
    width: 15%;
  }
  .col_three_fourth {
    width: 74.5%;
  }
  .col_twothird {
    width: 66%;
  }
  .col_half,
  .col_third,
  .col_twothird,
  .col_fourth,
  .col_three_fourth,
  .col_fifth {
    position: relative;
    display: inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  .end {
    margin-right: 0 !important;
  }
  /* Column Grids End */
  .wrapper {
    width: 980px;
    margin: 30px auto;
    position: relative;
  }
  .counter {
    background-color: #808080;
    padding: 10px 0;
    border-radius: 5px;
  }
  .count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
  }
}
.counter.col_fourth {
  background-color: #fff;
  border-radius: 10px;
}
.counter.col_fourth :hover {
  cursor: pointer;
  cursor: hand;
  color: blue;
}
.counter.col_fourth :hover {
  display: block;
  opacity: 1
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1">

  <title>Homepage</title>
  <link rel="icon" href="favicon.png" type="image/png">
  <link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
  <!-- related to number count -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>

  <link rel="stylesheet" href="css/style1.css">

  <!-- number count ends -->

  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>

  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="css/responsive.css" rel="stylesheet" type="text/css">
  <link href="css/animate.css" rel="stylesheet" type="text/css">

  <!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->

  <!-- <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script> -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.js"></script>
  <script type="text/javascript" src="js/wow.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>
  <script src="contactform/contactform.js"></script>


</head>

<body>
  <header class="header" id="header">
    <!--header-start-->

  </header>
  <!--header-end-->

  <section class="main-section paddind" id="Portfolio">
    <!--main-section-start-->
    <div class="container">
      <h2>Portfolio</h2>
      <h6>Fresh portfolio of designs that will keep you wanting more.</h6>
      <div class="portfolioFilter">
        <ul class="Portfolio-nav wow fadeIn delay-02s">
          <li><a href="#" data-filter="*" class="current">All</a>
          </li>
          <li><a href="#" data-filter=".branding">Branding</a>
          </li>
          <li><a href="#" data-filter=".webdesign">Web design</a>
          </li>
          <li><a href="#" data-filter=".printdesign">Print design</a>
          </li>
          <li><a href="#" data-filter=".photography">Photography</a>
          </li>
        </ul>
      </div>

    </div>
    <div class="portfolioContainer wow fadeInUp delay-04s">
      <div class=" Portfolio-box printdesign">
        <a href="#">
          <img src="img/Portfolio-pic1.jpg" alt="">
        </a>
        <h3>Foto Album</h3>
        <p>Print Design</p>
      </div>
      <div class="Portfolio-box webdesign">
        <a href="#">
          <img src="img/Portfolio-pic2.jpg" alt="">
        </a>
        <h3>Luca Theme</h3>
        <p>Web Design</p>
      </div>
      <div class=" Portfolio-box branding">
        <a href="#">
          <img src="img/Portfolio-pic3.jpg" alt="">
        </a>
        <h3>Uni Sans</h3>
        <p>Branding</p>
      </div>
      <div class=" Portfolio-box photography">
        <a href="#">
          <img src="img/Portfolio-pic4.jpg" alt="">
        </a>
        <h3>Vinyl Record</h3>
        <p>Photography</p>
      </div>
      <div class=" Portfolio-box branding">
        <a href="#">
          <img src="img/Portfolio-pic5.jpg" alt="">
        </a>
        <h3>Hipster</h3>
        <p>Branding</p>
      </div>
      <div class=" Portfolio-box photography">
        <a href="#">
          <img src="img/Portfolio-pic6.jpg" alt="">
        </a>
        <h3>Windmills</h3>
        <p>Photography</p>
      </div>
    </div>
  </section>
  <!--main-section-end-->



  <section class="main-section team" id="team">
    <!--main-section team-start-->
    <div class="container">
      <h2>Medals</h2>
      <h6></h6>
      <div class="team-leader-block clearfix">
        <div class="team-leader-box">
          <div class="team-leader wow fadeInDown delay-03s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal1"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">

          </div>


          <!-- Modal -->
          <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Gold Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>


          <div class="wrapper wow fadeInDown delay-05s">
            <div class="counter col_fourth">
              <i class="fa fa-check fa-2x"></i>
              <h2 class="timer count-title" id="count-number1" data-to="50" data-speed="1500"></h2>
              <p class="count-text ">points</p>

            </div>
          </div>

        </div>
        <!-- update this code -->
        <div class="team-leader-box">
          <div class="team-leader  wow fadeInDown delay-06s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal2"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
            <!-- <ul> Remove this
              <p2>Click For Details</p2>
            </ul> -->
          </div>

          <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Silver Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>

          <div class="wrapper wow fadeInDown delay-05s">
            <div class="counter col_fourth">
              <i class="fa fa-check fa-2x"></i>
              <h2 class="timer count-title" id="count-number2" data-to="30" data-speed="1500"></h2>
              <p class="count-text ">points</p>
            </div>
          </div>
        </div>
        <div class="team-leader-box">
          <div class="team-leader  wow fadeInDown delay-06s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal3"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
            <!-- <ul> Remove this
							<p2>Click For Details</p2>
						</ul> -->
          </div>

          <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Bronze Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>
          <div class="wrapper wow fadeInDown delay-05s">
            <div class="counter col_fourth">
              <i class="fa fa-check fa-2x"></i>
              <h2 class="timer count-title" id="count-number3" data-to="10" data-speed="1500"></h2>
              <p class="count-text ">points</p>
            </div>
          </div>



        </div>
        <!-- team-leader-box div ends -->
      </div>
      <!-- team-leader-block clearfix div ends -->



      <!-- popup div ends -->
    </div>
    <!-- container div ends -->
  </section>
  <!--main-section team-end-->

  <footer class="footer">
    <div class="container">
      <div class="footer-logo">
        <a href="#">
          <img src="img/footer-logo.png" alt="">
        </a>
      </div>
      <span class="copyright">&copy; Knight Theme. All Rights Reserved</span>
      <div class="credits">

        <a href="https://bootstrapmade.com/free-business-bootstrap-themes-website-templates/">Business Bootstrap Themes</a> by <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </div>
  </footer>

  <script src="js1/index1.js">
  </script>
</body>

</html>

Fiddle link for above: https://jsfiddle.net/L3tntu6a/

Help from the community: Stack Overflow similar links

Upvotes: 2

Views: 2998

Answers (2)

Braeden Orchard
Braeden Orchard

Reputation: 245

You need to check when the user is either scrolling through or just about to scroll through the div. For example:

$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (x > y) {
     //Put your effect functions in here.
  }
});

You can also add effects when the user scrolls back up or more effects with more if/else blocks.

Upvotes: 4

Mussaib Siddiqui
Mussaib Siddiqui

Reputation: 199

You have to put these medals in a div and make it show when you scroll to it. here is a example

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.yourDiv').fadeIn();
  } else {
    $('.yourDiv').fadeOut();
  }
});

you can see working example below

http://jsfiddle.net/apaul34208/ZyKar/3/

Upvotes: 1

Related Questions