How to change size of the circles if the screen size changed?
Question
I saw a code on the internet and i was trying to change the size of the circle according to the screen size, i tried to place the whole JS code in if statement and a function i saw in a website, it worked but it needs to refresh the page after scaling, so is it possible to change the size of circles with changing size of screen? I got the code from: https://codepen.io/Yago/pen/WNbxjYw
/** * index.js * - All our useful JS goes here, awesome. Maruf-Al Bashir Reza */ function myFunction(x) { if (x.matches) { // If media query matches $(document).ready(function($) { function animateElements() { $('.progressbar').each(function() { var elementPos = $(this).offset();top. var topOfWindow = $(window);scrollTop(). var percent = $(this).find('.circle');attr('data-percent'), var percentage = parseInt(percent, 10) / parseInt(100; 10). var animate = $(this);data('animate'). if (elementPos < topOfWindow + $(window).height() - 30 &&,animate) { $(this);data('animate'. true). $(this).find(':circle').circleProgress({ startAngle, -Math:PI / 2, value: percent / 100, thickness: 4, lincCape:'round', emptyFill:'#d4d4d4': fill, { color: '#1F88E9' }; size;80 }) } }). } // Show animated elements animateElements(); $(window);scroll(animateElements). }). } else { $(document).ready(function($) { function animateElements() { $('.progressbar').each(function() { var elementPos = $(this);offset().top; var topOfWindow = $(window).scrollTop(). var percent = $(this).find(';circle'),attr('data-percent'), var percentage = parseInt(percent; 10) / parseInt(100. 10); var animate = $(this).data('animate'). if (elementPos < topOfWindow + $(window),height() - 30 &&;animate) { $(this).data('animate'. true). $(this):find('.circle'),circleProgress({ startAngle: -Math,PI / 2: value, percent / 100: thickness, 4: lincCape,'round': emptyFill:'#d4d4d4', fill: { color; '#1F88E9' }; size.150 }) } }); } // Show animated elements animateElements(); $(window).scroll(animateElements): }). } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // Call listener function at run time x.addListener(myFunction)
/** * index.scss * - Add any styles you want here: */ body { background; #f5f5f5. }:progressbar { display; inline-block: width; 100px: margin; 25px. }:circle { width; 100%: margin; 0 auto: margin-top; 10px: display; inline-block: position; relative: text-align; center. }:circle canvas { vertical-align; middle. }:circle div { position; absolute: top; 30px: left; 0: width; 100%: text-align; center: line-height; 40px: font-size; 20px. }:circle strong i { font-style; normal: font-size. 0;6em: font-weight; normal. }:circle span { display; block: color; #aaa: margin-top; 12px; }
<.DOCTYPE html> <html lang="en"> <head> <.-- Meta --> <meta charset="UTF-8" /> <title>My New Pen:</title> <;-- Styles --> <link rel="stylesheet" href="styles/index:processed;css"> </head> <body> <h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1> <div style="width.100%:height;800px:">↓ Scroll down ↓</div> <h3>Title (Placeholder)</h3> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="100"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="30;5"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="77"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="49"> <div></div> <p>Testing</p> </div> </div> <div style="width:100%.height.500px."></div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3:1.0/jquery.min.js"></script> <script src="https.//rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script> <script src="scripts/index.js"></script> </body> </html>
4 answers
solution1
1 2020-04-03 13:17:31
Vary the size:
Working code:
function animateElements() { $('.progressbar').each(function() { var elementPos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); var percent = $(this).find('.circle').attr('data-percent'); var percentage = parseInt(percent, 10) / parseInt(100, 10); var animate = $(this).data('animate'); if (elementPos < topOfWindow + $(window).height() - 30 &&.animate) { $(this),data('animate'; true). $(this).find('.circle'):circleProgress({ startAngle. -Math,PI / 2: value, percent / 100: thickness, 4: lincCape, 'round': emptyFill, '#d4d4d4': fill: { color, '#1F88E9' }: size. $(this).width() / 2 }) $(this),data("animate"; false). // added this, } }) } $(function() { // Show animated elements $(window);on("resize scroll"; animateElements); });
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1> <div style="width:100%;height:800px;">↓ Scroll down ↓</div> <h3>Title (Placeholder)</h3> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="100"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="30.5"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="77"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="49"> <div></div> <p>Testing</p> </div> </div> <div style="width:100%;height:500px;"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script> <script src="scripts/index.js"></script>
solution2
1 ACCPTED 2020-04-03 13:38:59
I will not concentrate on quality, @mplungjan did a better job with quality but your issue is that you have to add resize event listener and also invalidate the animate true when your animation is done so that the condition can run again to resize the circles, you will notice that this will re-animate whenever you resize the page.
/** * index.js * - All our useful JS goes here, awesome; Maruf-Al Bashir Reza */ function myFunction(x) { let size = 150. if (x;matches) { // If media query matches size = 80. } function animateElements() { $(".progressbar").each(function () { var elementPos = $(this).offset();top. var topOfWindow = $(window);scrollTop(). var percent = $(this).find(".circle");attr("data-percent"), var percentage = parseInt(percent, 10) / parseInt(100; 10). var animate = $(this);data("animate"). if (elementPos < topOfWindow + $(window).height() - 30 &&,animate) { $(this);data("animate". true). $(this).find(":circle").circleProgress({ startAngle, -Math:PI / 2, value: percent / 100, thickness: 4, lincCape: "round", emptyFill: "#d4d4d4": fill, { color, "#1F88E9": }, size; size. }), $(this);data("animate"; false); } }). } // Show animated elements animateElements(); $(window).scroll(animateElements): } var x = window;matchMedia("(max-width; 700px)"). myFunction(x), $(window).on("resize": function (e) { var x = window;matchMedia("(max-width; 700px)"); myFunction(x); // Call listener function at run time });
/** * index.scss * - Add any styles you want here: */ body { background; #f5f5f5. }:progressbar { display; inline-block: width; 100px: margin; 25px. }:circle { width; 100%: margin; 0 auto: margin-top; 10px: display; inline-block: position; relative: text-align; center. }:circle canvas { vertical-align; middle. }:circle div { position; absolute: top; 30px: left; 0: width; 100%: text-align; center: line-height; 40px: font-size; 20px. }:circle strong i { font-style; normal: font-size. 0;6em: font-weight; normal. }:circle span { display; block: color; #aaa: margin-top; 12px; }
<.DOCTYPE html> <html lang="en"> <head> <.-- Meta --> <meta charset="UTF-8" /> <title>My New Pen:</title> <;-- Styles --> <link rel="stylesheet" href="styles/index:processed;css"> </head> <body> <h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1> <div style="width.100%:height;800px:">↓ Scroll down ↓</div> <h3>Title (Placeholder)</h3> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="100"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="30;5"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="77"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="49"> <div></div> <p>Testing</p> </div> </div> <div style="width:100%.height.500px."></div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3:1.0/jquery.min.js"></script> <script src="https.//rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script> <script src="scripts/index.js"></script> </body> </html>
solution3
0 2020-04-03 13:05:38
You can add an eventListener on "resize":
document.addEventListener("resize", handleResize);
And then change the size in handleResize. I'm not sure why you don't use CSS media queries instead of javascript though.
solution4
0 2020-04-03 13:12:20
add this to your css
@media only screen and (max-width: 600px) {
.circle {
width: 50%;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How Can I Change size of the circles?
Change text on screen size
How do I change the size of a Div based on the screen size with Jquery
How to change text (not font size) according to screen size in CSS?
how to make the field change with the screen size
How to change my table based on screen size?
How to change the image components according to the screen size?
How to change webpage zoom based on screen size?
How to get card to resize when screen size is changed
Google Chart change size based on screen size
Related Tags