counter

PHOTO

Thu Feb 08 2024 11:42:00 GMT+0000 (Coordinated Universal Time)

Saved by @divyasoni09 #jquery

import $ from 'jquery';
import '../../node_modules/waypoints/lib/jquery.waypoints';

class StatisticsOne {
	constructor(element) {
		this.$element = $(element);
		this.$counter = this.$element.find('.counter__count');
		this.init();
	}

	init() {
		this.$counter.each((index, element) => {
			let $this = $(element);
			let countTo = $this.attr('data-count');

			$this.waypoint({
				handler: function (direction) {
					$({ countNum: $this.text() }).animate(
						{
							countNum: countTo,
						},
						{
							duration: 3000,
							easing: 'linear',
							step: function () {
								$this.text(Math.floor(this.countNum));
							},
							complete: function () {
								$this.text(
									Math.abs(this.countNum) > 999
										? Math.sign(this.countNum) *
												(Math.abs(this.countNum) / 1000).toFixed(1) +
												'K+'
										: Math.sign(this.countNum) * Math.abs(this.countNum) + '+',
								);
								Waypoint.destroyAll();
							},
						},
					);
				},
				offset: '90%',
			});
		});
	}
}

$('[data-statistics-one]').each((index, element) => new StatisticsOne(element));

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

#javascript #jquery

jQuery.post() - AJAX for post requests

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

#javascript #jquery

How to Select All Elements with jQuery

var allElements = $("*");

#javascript #jquery

How to use switchClass and toggleClass in jQuery

https://makitweb.com/how-to-use-switchclass-and-toggleclass-in-jquery/

Force an Iframe to Reloa

$('iframe').attr('src', $('iframe').attr('src'));

Better Broken Image Handling | CSS-Tricks

// Replace source
$('img').on("error", function() {
  $(this).attr('src', '/images/missing.png');
});

// Or, hide them
$("img").on("error", function() {
  $(this).hide();
});

Get Query Params as Object | CSS-Tricks

jQuery.extend({

  getQueryParameters : function(str) {
	  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }

});

Simple jQuery Accordion | CSS-Tricks

(function($) {
    
  var allPanels = $('.accordion > dd').hide();
    
  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

Calculate Distance Between Mouse and Element | CSS-Tricks

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);         
    });

})();

Move Clicked List Items To Top Of List | CSS-Tricks

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Scroll Page Horizontally With Mouse Wheel | CSS-Tricks

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

Fade Image Into Another Image | CSS-Tricks

<div id="kitten" style="background-image: url(dog.jpg);">
  <img src="/images/kitten.jpg" alt="Kitten" />
</div>

Simple Auto-Playing Slideshow | CSS-Tricks

<div id="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

#javascript #jquery

Simple Auto-Playing Slideshow

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

html - Clear all fields in a form upon going back with browser back button - Stack Overflow

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Browse more snippets >>