Animated Circle Stats

[tejasamrute]

Hello Folks,

 

I am trying to edit Circliful Jquery....but i am having 2 troubles:

1. Not Compatible with IE 9,8,7 (Did not check it in ie 10 & 11 as i don't have it) and also Safari.
2. Since these stats will be at the bottom of my page.. i want the animation to start when i scroll down to the stats block (default animation starts at the load of the page).

 

https://github.com/pguso/jquery-plugin-circliful

Link of the Jquery

 

 

This is how my code looks like

 

CSS

.circliful {    position: relative;	float:left;	color:#fff;}.circle-text, .circle-info, .circle-text-half, .circle-info-half {    width: 100%;    position: absolute;    text-align: center;	vertical-align:middle;    display: inline-block;}.a5 {	height:800px;	width:100%;	background-color:#c62229;}.a1 {	height:800px;	width:100%;	background-color:blue;}.a2 {	height:800px;	width:100%;	background-color:green;}.a3 {	height:800px;	width:100%;	background-color:orange;}

HTML

<div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div><div class="a5"><div id="myStat1" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#ffffff" data-bgcolor="#d4595f"></div><div id="myStat2" data-dimension="250" data-text="48%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="48" data-fgcolor="#ffffff" data-bgcolor="#d4595f"></div><div id="myStat3" data-dimension="250" data-text="56%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="56" data-fgcolor="#ffffff" data-bgcolor="#d4595f"></div><div id="myStat4" data-dimension="250" data-text="62%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="62" data-fgcolor="#ffffff" data-bgcolor="#d4595f"></div></div><script>$( document ).ready(function() {	$('#myStat1').circliful();	$('#myStat2').circliful();	$('#myStat3').circliful();	$('#myStat4').circliful();});</script>

Help appreciated

 

 

[Ingolme]

There's no way this plug-in can work in Internet Explorer 8 and under because it requires the <canvas> element which is not supported. The reason it won't work in Internet Explorer 9 is because it uses the requestAnimationFrame() function which isn't supported in versions earlier than 10.

 

Because of the lack of a <canvas> element, the only possible workaround would be to program it in Flash.

 

You can substitute the requestAnimationFrame() with a setTimeout() call and that should fix it for Internet Explorer 9, but you'll have to account for scope.

[tejasamrute]

thanks....ingolme..i will have to find another jquery