I am doing svg path animation in it works fine in all browsers except safari and IE
svg example
<svg
v-if="waveid == 6"
class="gotthard-red-pipe"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 732.36 411.6"
>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_20" data-name="Ebene 20">
<rect class="bg-transparent" width="732.36" height="411.6" />
</g>
<g id="_2._Roehre" data-name="2. Roehre">
<g id="_2._Roehre_right_to_left" data-name="2. Roehre right to left">
<g id="_2_Roehre_bg" data-name="2_Roehre_bg">
<path
:id="'wave' + waveid"
filter="url(#innershadow)"
class="gothard-p3"
stroke="url(#img1)"
d="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
/>
</g>
<g style="transform: translateY(-55px);">
<foreignObject
width="30"
height="80"
transform="translate(-12 -24)"
>
<div class="valueSpan-wrapper">
<div
xmlns="http://www.w3.org/1999/xhtml"
class="valueSpan"
:id="'valueSpan' + waveid"
></div>
</div>
</foreignObject>
<animateMotion
:id="'motion' + waveid"
dur="1s"
:repeatCount=" percentageCustom / 100"
fill="freeze"
path="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
></animateMotion>
</g>
</g>
</g>
</g></svg
this code is done in vue.js
Problem is in Foreign object, it should animate on path which is same d = path in animateMotion, repeat count make path move in value what user set up in craftcms
css
.gotthard-blue-pipe,
.gotthard-green-pipe,
.gotthard-red-pipe {
position: absolute;
width: 100%;
left: 50%;
transform: translate(-50%, 0);
}
.textContainer {
width: 90%;
}
.z1{
position: absolute;
z-index: 999;
}
.z2{
position: absolute;
z-index: 998;
}
.valueSpan-wrapper{
width: 100%;
height: 100%;
position: relative;
}
.valueSpan {
position: absolute;
background-color: white;
border: 1px solid $color4;
padding: 2px;
transform: skew(15deg, 320deg) rotate(15deg);
z-index: 99;
color: #4b4d53;
font-weight: 600;
width: 30px;
font-size: 8px;
text-align: center;
bottom: 30px;
left: 0 !important;
.stand {
height: 1px;
width: 50px;
background: #87888d;
position: absolute;
transform: rotate(90deg) translateX(28px) translateY(25px);
}
}
is it possible to animate foreign object with this way also in safari or I have to use different approach?
I am having a hard time figuring out how to have my mobile menu icon animate on click. It would be ideal if I could click the menu icon and the menu would just slide in using animate.css fadeInDown and then when clicked again to exit the menu if it used animate.css fadeOutUp. Is there any way to do this using JS too? I really want to learn.
Here is the html:
<header>
<div id="pic-1">
<img id="top" src="css/Unknown.png" class="log animated fadeInDown">
<nav>
<a class="burger-nav animated fadeInDown"><i class="fas fa-bars"></i>
</a>
<ul class="li animated fadeInDown">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Contact Us</a></li>
<li><a>Volunteer</a></li>
</ul>
</nav>
</div>
</header>
Here is the CSS (media queries):
/* Mobile 1 */
#media only screen and (min-width : 320px) {}
.checkBox {
display: none;
}
.logo {
display: none;
}
.log {
position: fixed;
z-index: 999;
left: -2%;
height: 10%;
width: 35%;
padding-top: 2%;
padding-right: 33%;
padding-left: 33%;
border: solid white;
background-color: white;
}
.burger-nav {
position: fixed;
z-index: 999;
left: 85%;
top: 1%;
font-size: 300%;
}
header nav ul {
overflow: hidden;
height: 0;
margin-top: 70px;
width: 100%;
margin-left: -40px;
position: fixed;
z-index: 999;
}
header nav ul.open {
height: auto;
}
header nav ul li {
text-align: center;
width: 100%;
margin: 0;
list-style-type: none;
font-family: Jazz LET, fantasy;
font-size: 17px;
word-spacing: 7px;
letter-spacing: 5px;
font-weight: bold;
}
header nav ul li a:hover {
}
header nav ul li a {
color: #FF6103;
padding: 10px;
border-bottom: 1px solid white;
display: block;
background-color: black;
opacity: .5;
}
.li {
-webkit-animation-duration: 1s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: 1;
-o-animation-duration: 1s;
-o-animation-delay: 1s;
-o-animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: 1;
}
.fas {
color: purple;
}
#pic-1 {
background-size: 120% 100%;
}
#pic-2 {
background-size: 123% 100%;
}
#pic-3 {
background-size: 120% 100%;
}
.social {
display: none;
}
.circle {
display: none;
}
}
And here is some JS I've used:
$(document).ready(function(){
$(".burger-nav").on("click", function(){
$("header nav ul").toggleClass("open")
});
});
I hope someone can help! Thank you!
Well css-animations are a bit tricky. But nothing that can't be solved. First of all you should use #keyframes. A good explanation can be found here. The trick is to toggle two classes (.open and .close) which will handle your opening and closing animation. Important is the animation-fill-mode attribute to keep your animation sticking with it's final state. Also you can not use height: auto; because it needs to be a real value. max-height: 1000px; will do the trick. So you animate from max-height: 0; to max-height: 1000px; and vice versa. Here is your simplified code as a runnable snippet:
$(document).ready (function() {
$('.burger-nav').on ('click', function () {
//check if class open is already set then toggle
if ($('header nav ul').hasClass ('open'))
$('header nav ul').toggleClass ('close open');
else {
$('header nav ul').removeClass ('close');
$('header nav ul').addClass ('open');
}
});
});
header nav ul {
overflow: hidden;
max-height: 0; //<-- this needs to be changed
margin-top: 70px;
width: 100%;
margin-left: -40px;
position: fixed;
z-index: 999;
}
header nav ul li {
text-align: center;
width: 100%;
margin: 0;
list-style-type: none;
font-family: Jazz LET, fantasy;
font-size: 17px;
word-spacing: 7px;
letter-spacing: 5px;
font-weight: bold;
}
header nav ul li a {
color: #FF6103;
padding: 10px;
border-bottom: 1px solid white;
display: block;
background-color: black;
opacity: .5;
}
.li {
-webkit-animation-duration: 1s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: 1;
-o-animation-duration: 1s;
-o-animation-delay: 1s;
-o-animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: 1;
}
header nav ul.open {
animation-name: open;
animation-name: open;
animation-fill-mode: forwards;
}
#keyframes open {
from {max-height: 0;}
to {max-height: 1000px;}
}
header nav ul.close {
animation-name: close;
animation-name: close;
animation-fill-mode: both;
}
#keyframes close {
from {max-height: 1000px;}
to {max-height: 0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
click_me
<ul class="li animated fadeInDown">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Contact Us</a></li>
<li><a>Volunteer</a></li>
</ul>
</nav>
</header>
take a look at the two images below:
Desktop:
iPad:
Notice the colors of the outer rings? Why are they inverted on the iPad?
.statistic-container {
display: inline-block;
position: relative;
width: 100%;
overflow: hidden;
max-width: 326px;
margin-bottom: 20px;
}
.statistic-container:before {
content: '';
padding-bottom: 100%;
display: block;
}
.statistic-container svg {
fill: transparent;
display: inline-block;
position: absolute;
top: 0;
right: 0;
transform: rotate(270deg);
}
.statistic-container__outer-circle {
stroke: #385fd1;
stroke-width: 16;
stroke-dasharray: 1607;
stroke-dashoffset: -530;
}
.statistic-container__inner-circle {
stroke: #02158b;
stroke-width: 16;
stroke-dasharray: 1607;
}
<div class="statistic-wrapper">
<div class="statistic-container">
<svg viewBox="0 0 500 500">
<circle cx="250" cy="250" r="242" class="statistic-container__inner-circle"></circle>
<circle cx="250" cy="250" r="242" class="statistic-container__outer-circle"></circle>
</svg>
</div>
</div>
Thank you to Paulie_D for the tip.
It looks like ipad doesn't play well when you use negative values on stroke-dashoffset.
The following fixed my issue:
.statistic-container__outer-circle {
stroke: #385fd1;
stroke-width: 16;
stroke-dasharray: 1607;
}
.statistic-container__inner-circle {
stroke: #02158b;
stroke-width: 16;
stroke-dasharray: 1607;
stroke-dashoffset: 1077;
}
I removed the negative offset from the outer circle and added a positive offset on the inner circle.
I have build a pretty simple animation with CSS (just moving an image a few pixels) which works fine on all browser I had available for testing EXCEPT the iPad mobile Safari (iOS 8.1).
On the iPad nothing even slightly moves. The image sits still.
Has anybody else encountered such a bug or behaviour with iOS? ... or am I missing something important with webkit here?
Thanks for hints ;o)
This is what I did so far:
body { font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; text-align:left;
SCROLLBAR-FACE-COLOR: #001428; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #001428;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #001428; text-align:center; width:100%; margin:0 auto}
.BodyHeader {background-image: url(../images/Header-Singleton.jpg); background-repeat: repeat-x; position:absolute; height:90px; width:100%; border: 0px solid #cc0033;}
.BodyHeaderPic { background-image: url(../images/Header.jpg); background-repeat: repeat-x; position:absolute; right:200; height: 90px; width:322px; border:0px solid #cc0033;}
.BodyScroller {position:absolute; left:1%; top:90px; width:98%; bottom:10px; overflow:auto; border: 0px solid #FF9933;}
.BodyMain { position:absolute; left:0; top: 30px; width:70%; border:opx solid #cc0033; text-align:left; vertical-align:text-top; z-index:1}
.Footer { position:absolute; width:640px; left:50%; margin-left:-320px; bottom: 5px; height:25px; border:1px solid #dcdcdc; text-align:center; font-size:10px; color:#7896be; z-index:9999;}
.Footer p { margin:5px;}
a {font:Arial, Helvetica, sans-serif; color:#2d5578; text-decoration:none; border: none}
a:hover {font:Arial, Helvetica, sans-serif; color:#7896be; text-decoration:underline; border: none}
a:active {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
a:selected {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
img {border: none;}
h1 {font-style:normal; font-variant:normal; font-size:12pt; font-family:Arial; color:#2d5578; padding-top:5px; padding-bottom:5px; margin:0px; }
h2 {font-style:normal; font-variant:normal; font-size:11pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
h3 {font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
.vbar-lightblue {width:300px; height:2px; background-image:url(../images/vbar-lightblue.jpg); background-repeat:no-repeat}
.HPflyInImages {position:absolute; left:50%; margin-left:200px; top: 220px; width:217px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:999;}
.HPflyInImagesCrossFrame1 {position:absolute; left:50%; margin-left:135px; top: 180px; width:317px; height:241px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:100; background-image:url(../images/imageCrossFrame.png)}
.image1 {position: relative; right:-200px; top:00px; border: 0px solid #cc0033; text-align:right; width:200px;}
.CrossFrameSmall1 {position:absolute; right:50px; top: 150px;z-index:100;}
.CrossFrameSmall1MoveImage{position:absolute; right:150px; top: 205px;z-index:99;
-moz-animation-name: moveImage;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: moveImage;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-name: moveImage;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards
}
#-moz-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#-webkit-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
.HPflyInImagesSmall {position:absolute; right:50px; top: 200px; border: 1px solid #cc0033; overflow:hidden;}
.HPflyInImagesCrossFrameSmall1 {width:200px; height:180px; border: 1px solid #cc0033; overflow:visible; text-align:right; }
.HPflyInImagesCrossFrameSmall2 {width:195px; height:180px; border: 1px solid #cc0033; overflow:hidden; background-image:url(../images/imageCrossFrameSmall.png)}
.CrossFrameSmallMoveImage { }
/* *** Menu *** */
.Menubar {position: absolute; left:0px; top:90px; width:100%; background-color:#cc0033; text-align:left; background-image:url(../images/MenueBackground.jpg); background-repeat:repeat-x; }
.Menubar ul { left:10px;}
/* *** MAIN *** */
.mainHephy {position:absolute; right:100px; width:170px; height:220px; top:20px; background-image:url(../images/mainHephy.jpg); background-repeat:no-repeat; border: 0px solid #cc0033;}
.wiseSpell {position:relative; top: 310px; border:0px solid #996600; text-align:left; width: 95%;}
.quotation { font-size:8px; margin:0px; padding:5px; color:#7896be}
.mainGreetings {position: relative; top: -50px; text-align:left; width:400px; padding-left:50px; }
/* *** PRIVATE *** */
.tdHeader { font-weight:bold; color:#325f82}
.moreBody { width:600px;}
.imageGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** AVIATION *** */
.FlightBooklet {position:absolute; left:50%; margin-left:100px; top: 80px; width:244px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:101;}
.imageAVGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** CONTACT *** */
.FMS-TextLine { width:400px;}
.FMS-TextField { width:600px; height:150px;}
.FMS-Button { width:100px;}
and this is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/CSS/CSS3Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<link rel="stylesheet" type="text/css" href="/CSS/ASW.css">
<title>ASW 15</title>
</head>
<body ontouchstart="">
<div class="BodyHeader"></div>
<div class="BodyHeaderPic"></div>
<script language="javascript" type="text/javascript" src="/JS/ASW-MenueEmbed.js"></script>
<script language="javascript" type="text/javascript" src="/JS/ASW-FooterEmbed.js"></script>
<div class="BodyScroller">
<div class="BodyMain">
<br />
<div class="moreBody">
<h1>... more</h1>
<br />
</div>
</div>
</div>
<img src="../images/imageCrossFrameSmall.png" alt="Hephy" class="CrossFrameSmall1"/>
<img src="../images/more01.jpg" alt="Hephy" class="CrossFrameSmall1MoveImage"/>
</body>
</html>
At the moment I have a check list that updates the progress bar once a check-box is clicked, however, I want the progress bar to update according to whatever the percentage is on the check-box. I have spent hours looking for a solution and trying different things but have had no luck. Any help or advice?
DEMO= http://jsfiddle.net/UznQe/
<!DOCTYPE html>
<html>
<head>
<title>Bars for checklist</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="themes/theme1.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />
<script src="jqm/demos/js/jquery.js">
</script>
<script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).on('pagebeforeshow', '#checklist', function () {
$('input[type="checkbox"]').each(function () {
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
var total = $("#theList input[type=checkbox]").length;
var numChecked = $("#theList input[type=checkbox]:checked").length;
if (numChecked == 1) {
$("#progress").css('background', 'red');
} else if (numChecked == 2) {
$("#progress").css('background', 'orange');
} else if (numChecked == 3) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
var prog = numChecked * 100 / total;
$("#progress").css("width", prog + "%");
});
</script>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Task list</h1>
<div data-role="content">
<ul data-role="listview" id="theList" data-inset="true">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
Task 1 (15%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
</div>
Task 2 (40%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
</div>
Task 3 (5%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
</div>
Task 4 (10%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
</div>
Task 5 (15%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
Task 6 (15%)
</li>
</ul>
</div>
</div>
<div class="meter green nostripes">
<span id="progress" style="width: 0%"></span>
</div>
</div>
<style>
.detailListText{
margin: 0 0 0 20px;
}
.checkBoxLeft{
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.hidden-checkbox {
display: none;
}
.not-checked {
background-position: 18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;
background-color:#6496bc;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
</style>
</div>
</body>
</html>
Updated FIDDLE
Instead of counting the number of checked checkboxes, you add up the values of the checked checkboxes:
//calculate percentage
perc = 0;
$("#theList input[type=checkbox]:checked").each(function( index ) {
perc += parseInt($(this).val());
});
if (perc < 15) {
$("#progress").css('background', 'red');
} else if (perc < 30) {
$("#progress").css('background', 'orange');
} else if (perc < 60) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
$("#progress").css("width", perc + "%");
parseInt($(this).val()) gives you an integer representation of the value.
Here is one example in codepen check this.
<form>
<p>
<input type="checkbox" name = "box1"/>
<input type="checkbox"name = "box2" />
<input type="checkbox" name = "box3"/>
</p>
</form>
<div class="progressbar-container">
<div class="progressbar-bar"></div>
<div class="progressbar-label"></div>
</div>
<div class = "ready"></div>
Here is the javascript for this
$(document).ready(function() {
// get box count
var count = 0;
var checked = 0;
function countBoxes() {
count = $("input[type='checkbox']").length;
console.log(count);
}
countBoxes();
$(":checkbox").click(countBoxes);
// count checks
function countChecked() {
checked = $("input:checked").length;
var percentage = parseInt(((checked / count) * 100),10);
$(".progressbar-bar").progressbar({
value: percentage
});
$(".progressbar-label").text(percentage + "%");
}
countChecked();
$(":checkbox").click(countChecked);
});
The changes of the progress bar applied through CSS.
body { margin: 20px 50px; }
h1 { font-size: 1.5em; }
p { margin: 0; }
input[type="checkbox"] {
height: 20px;
width: 20px;
margin-right: 10px;
}
.ready { font-size: 1.5em; }
.ui-progressbar-value { background: lightgreen; }
.progressbar-container {
position: relative;
width: 350px;
}
.progressbar-bar {
height: 25px;
margin: 10px 0;
border-radius: 7px;
}
.progressbar-label {
position: absolute;
top: 2px;
left: 45%;
z-index: 2;
}