Plate visuals now get added on calculation.
Plate visuals now get added each time you calculate a weight. Still need to have the plates be animated. Instead of putting in a string it needs to append and add the weights each time. Make a function to append and then animate each weight.
This commit is contained in:
@@ -130,6 +130,7 @@ p.subheading {
|
||||
|
||||
.b-platevisual__plates{
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
|
||||
}
|
||||
|
||||
@@ -137,6 +138,7 @@ p.subheading {
|
||||
top: 50%;
|
||||
transform: translate(-100%, -50%);
|
||||
left: 21%;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
}
|
||||
|
||||
@@ -146,6 +148,12 @@ p.subheading {
|
||||
left: 79%;
|
||||
}
|
||||
|
||||
.b-platevisual__plate{
|
||||
position: relative;
|
||||
margin: 0px 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.b-calulatorinputs {
|
||||
height: 40vh;
|
||||
width: auto;
|
||||
|
||||
BIN
images/.DS_Store
vendored
Normal file
BIN
images/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -1 +1 @@
|
||||
<svg height="32" viewBox="0 0 8 32" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="32" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1" y="20">2</tspan> <tspan x="2.491699" y="23">.</tspan> <tspan x="11.175781" y="33.561523"/><tspan x="11.175781" y="36.561523"/> <tspan x="1" y="32">5</tspan></text></g></svg>
|
||||
<svg height="32" viewBox="0 0 8 32" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="32" rx="4" width="8"/><g fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 7 4)"><text><tspan x="0" y="9">2</tspan></text><text><tspan x="1.491699" y="12">.</tspan></text><text><tspan x="0" y="21">5</tspan></text></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 512 B After Width: | Height: | Size: 469 B |
@@ -1,3 +1,4 @@
|
||||
// jQuery( document ).ready(function() {
|
||||
// calculation function starts here
|
||||
|
||||
function startcalc() {
|
||||
@@ -40,8 +41,12 @@
|
||||
|
||||
}
|
||||
|
||||
// var plateloader = jQuery(".b-platevisual__plates").html('<img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">');
|
||||
// console.log(plateloader);
|
||||
|
||||
//plate calulation function
|
||||
function platecalculator ( plateWeights, platesAvailable, target, finalWeight) {
|
||||
var weighthtml = "";
|
||||
//iterates though the plates availble.
|
||||
for (var i = 0; i < platesAvailable.length; i++) {
|
||||
//checks if the plate is less than or equal to the weight of plates needed
|
||||
@@ -59,6 +64,7 @@
|
||||
//Adds plates required
|
||||
if (weightToAdd > 0) {
|
||||
jQuery(".input-weightsneeded").eq(i).val(weightToAdd);
|
||||
//instead of putting in a string and updating all at once. append the weights each time. Make function and append and then animate. Replace this block.
|
||||
}
|
||||
|
||||
//sets the offset
|
||||
@@ -69,31 +75,34 @@
|
||||
|
||||
}
|
||||
}
|
||||
//replaces html for plates required to bar.
|
||||
jQuery(".b-platevisual__plates").html(weighthtml);
|
||||
}
|
||||
|
||||
//Smooth Scrolling
|
||||
//Smooth Scrolling
|
||||
|
||||
$(document).ready(function(){
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function(event) {
|
||||
$(document).ready(function(){
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function(event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function(){
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function(){
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
});
|
||||
});
|
||||
// });
|
||||
@@ -41,8 +41,20 @@
|
||||
<div class="b-platevisual__weight">
|
||||
<img src="images/BarBell.svg" class="b-platevisual__barbell">
|
||||
<div class="b-platevisual__plates b-platevisual__plates--left">
|
||||
<!-- <img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">
|
||||
<img src="images/35lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--35">
|
||||
<img src="images/25lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--25">
|
||||
<img src="images/10lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--10">
|
||||
<img src="images/5lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--5">
|
||||
<img src="images/2halflbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--2half"> -->
|
||||
</div>
|
||||
<div class="b-platevisual__plates b-platevisual__plates--right">
|
||||
<!-- <img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">
|
||||
<img src="images/35lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--35">
|
||||
<img src="images/25lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--25">
|
||||
<img src="images/10lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--10">
|
||||
<img src="images/5lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--5">
|
||||
<img src="images/2halflbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--2half"> -->
|
||||
</div>
|
||||
</div>
|
||||
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
|
||||
|
||||
Reference in New Issue
Block a user