Hope you can help me!! So I have a div inside another div and I'd like to move the second one back and forth with a step of 14.5% left and right stopping it before the black edges. I've managed to do it setting the left property in px but I'd like to to that with percentages..how can I do that? Thanks in advance!
PS. of course now the code doesn't work well because of the px changing..for this reason I'd like to work with %s...
$(document).ready(function() {
$('#min_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left<99.495){
$('.highlighted').css('left',left);
}
else{
left= left - 103.108;
$('.highlighted').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left>411.111){
$('#highlighted').css('left',left);
}
else{
left= left + 103.108;
$('#highlighted').css('left',left);
}
});
});
.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id=highlight class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>
First, your highlighted id is missing " and you're are trying to get your element by calling the id attribute with the class value.
You can get the container width with .width() function, and then calculate the percentage by multiplying it by 0.145.
$(document).ready(function() {
$('#min_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left < step){
$('#highlight').css('left',left);
}
else{
left= left - step;
$('#highlight').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left > (containerWidth - (2*step))){
$('#highlight').css('left',left);
}
else{
left = left + step;
$('#highlight').css('left',left);
}
});
});
.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id="highlight" class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>
Related
I'm trying to change the css position from fixed to static and viceversa, based on pixel scrolled...
The script works fine as espected, but at the point to change css position, there is a sort of lag.
If i scroll slow till at the point of switch, from the console i see the position switch fast from fixed to static and from static to fixed.
Anyway, look in the snippet, scroll near the end, and see what happen... I'm not able to figure out the reason. Hope in your help! Thanks!
Open the snipped in fullscreen to see better!
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var add_px = $('body').height();
var px_scroll = scrolled + add_px;
var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;
if ( px_scroll > total ) {
$('#act_btns').css({'position':'static'});
} else {
$('#act_btns').css({'position':'fixed'});
}
});
html, body { height: 100%; margin:0; padding: 0; }
#main_container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
text-align: center;
}
#act_btns {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 50px;
}
#act_btns input {
color: #fff;
border: 0px;
width: 100px;
height: 40px;
margin: 0 5px;
box-shadow: 0 0 5px 5px #000;
}
#footer {
position: absolute;
bottom: 0;
margin-bottom: -200px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px 7px 15px 7px;
box-sizing: border-box;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<div id="main_container">
<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>
<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>
<div id="footer"><p id="copyright">Copyright © 2016 - 2021</p></div>
</div>
</body>
</html>
The problem you are facing is: You calculate the total value on every change of the scroll position. So when you scroll and change the position of the element from fixed to static you will add the height (60px) to total. (This is visible if you console.log(scrolled, total)). Because fixed position elements do not take up any space.
The most simple fix is to calculate the total when the page is loaded. And then, if it doesn't change you're good to go with that height forever. So the only change I did from your code is to move the calculation of total outside of the scroll function.
var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var add_px = $('body').height();
var px_scroll = scrolled + add_px;
if ( px_scroll > total ) {
$('#act_btns').css({'position':'static'});
} else {
$('#act_btns').css({'position':'fixed'});
}
});
html, body { height: 100%; margin:0; padding: 0; }
#main_container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
text-align: center;
}
#act_btns {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 50px;
}
#act_btns input {
color: #fff;
border: 0px;
width: 100px;
height: 40px;
margin: 0 5px;
box-shadow: 0 0 5px 5px #000;
}
#footer {
position: absolute;
bottom: 0;
margin-bottom: -200px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px 7px 15px 7px;
box-sizing: border-box;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<div id="main_container">
<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>
<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>
<div id="footer"><p id="copyright">Copyright © 2016 - 2021 VirtualCode.Net</p></div>
</div>
</body>
</html>
This could lead to some problems if you are loading images and what not which may take up more space (height) when completely loaded and the calculation already happened. To never face that issue you can wrap the calculation inside
$(window).load(function(){
// add total calculation code here
});
I'm doing progress bar the problem is bar animation is not working. I want bar track moves left to right simultaneously % also moves I try but not working animation is not working properly.
can anyone suggest.
thanks.
$(document).ready(function() {
function ProgressBar() {
$('.progress-bar').each(function() {
var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
$(this).find('.progress-bar--barTrack').css('width', percent + '%');
$(this).find('.progress-bar--label').append(percent + '%');
$('.progress-bar--barTrack').animate({
width: $(this).percent,
}, 5000);
});
}
ProgressBar();
});
.progress-bar {
position: relative;
}
.progress-bar-s1 .progress--barTitle {
padding: 1% 1% 3% 0;
width: 15%;
}
.progress-bar-s1 .progress-bar--inner {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
background-color: #ebebeb;
}
.progress-bar-s1 .progress-bar--barTrack {
position: relative;
display: block;
padding: 20px 0;
width: 0;
background-color: #F7CA18;
}
.progress-bar-s1 span.progress-bar--label {
position: absolute;
top: 35%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
<div class="progress--barTitle">Integrity</div>
<div class="progress-bar--inner">
<span class="progress-bar--barTrack" data-width="60"></span>
</div>
<span class="progress-bar--label"></span>
</div>
Don't set the width of barTrack using .css() method and use correct variable i.e. percent instead of $(this).percent to set width in the animate method.
As per comment i want to move 60% also simultanously
You need to animate .progress-bar--label also and also modify its CSS rules.
$(document).ready(function() {
function ProgressBar() {
$('.progress-bar').each(function() {
var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
$(this).find('.progress-bar--label').text(percent + '%');
$(this).find('.progress-bar--barTrack, .progress-bar--label').animate({
width: percent + '%'
}, 5000);
});
}
ProgressBar();
});
.progress-bar {
position: relative;
}
.progress-bar-s1 .progress--barTitle {
padding: 1% 1% 3% 0;
width: 15%;
}
.progress-bar-s1 .progress-bar--inner {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
background-color: #ebebeb;
}
.progress-bar-s1 .progress-bar--barTrack {
position: relative;
display: block;
padding: 20px 0;
width: 0;
background-color: #F7CA18;
}
.progress-bar-s1 span.progress-bar--label {
position: relative;
text-align:right;
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
<div class="progress--barTitle">Integrity</div>
<span class="progress-bar--label"></span>
<div class="progress-bar--inner">
<span class="progress-bar--barTrack" data-width="60"></span>
</div>
</div>
Trying to move a position:fixed div on scroll by changing the top: css value in javascript. The div won't move though, not sure why.
html:
<div id="red">
<div id="blue"></div>
</div>
css:
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
js:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.body.scrollTop / 10));
//console.log("yPos = " + yPos); //output is correct
document.getElementById('blue').style.top = yPos + 'px';
//document.getElementById('blue').setAttribute('top',yPos); //also tried this
});
https://jsfiddle.net/akzx43yL/
Why isn't the top css value changing and how can I get it to do so? No jquery please.
Two things:
Instead of document.documentElement.scrollTop, you should use window.pageYOffset (scrollTop doesn't play nicely in Chrome).
You need to add a unit of measurement after you update top; values other than 0 should have px appened to them.
This can be seen in the following:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(window.pageYOffset / 10));
document.getElementById('blue').style.top = yPos + "px";
// Optionally log the `top` value
//console.log(document.getElementById('blue').style.top);
});
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: absolute;
top: -10px;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
<div id="red">
<div id="blue"></div>
</div>
Hope this helps! :)
If you check your console, you will be see your console.log("yPos = " + yPos) is always 0 you most update your code as follow:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.documentElement.scrollTop / 10));
console.log("yPos = " + yPos);
document.getElementById('blue').style.top = yPos + "px";
});
Tip:
Ways to get srollTop (pure js):
var top = window.pageYOffset || document.documentElement.scrollTop;
This is what worked for me:
document.getElementById('blue').style.top = yPos + "px";
I've got six questions in a div and when a user answers question a progress bar adjusts according to the percentage of the amount of inputs that were filled in and has value on blur. Right now I think I have a logic problem. In my code 180 = width of the container of the progress bar divided by the 6 questions. I'm trying to set i so that you could multiply i times 180 to animate the width of the progress bar 0 * 180 should be 0 if the input box for the first one is filled in . I don't want the width to be 0 i want the width to be 180 so that's why i put arrayAnswerd =i+1;but when I remove the input text from all the boxes the progress bar doesn't go down to 0 width because I'm assuming arrayAnswerd =1.
Help me make this progress bar please. I got to adjust the i so when there is nothing filled in the width is 0 You see that in the beginning in the demo but if I type 2 inputs and erase them the width stays at 180 I believe i doesn't go back to 0
$(function(){
var nFilledIN = 0;
var ratio = 0;
var questions = $(".part input")
var nQuestion = questions.length;
var started = false;
var arrayAnswerd;
questions.on("change", function(){
questions.each(function(i){
if($(this).val()){
arrayAnswerd =i+1;
}
})
console.log(arrayAnswerd)
if(arrayAnswerd == 0){
// ratio = 1/ nQuestion
// arrayAnswerd = 1
}
else{
// ratio = parseInt($(".progressQs").outerWidth()) / nQuestion
}
ratio = parseInt($(".progressQs").outerWidth()) / nQuestion
console.log(ratio)
$(".progressBarQs").animate({
width : "+" + arrayAnswerd * ratio
})
if($(this).val()){
nFilledIN++
}else if (nFilledIN > 0){
nFilledIN--
}
})
})
background: #3EABC0;
}
.form{
/*width:80%;*/
width: 1080px;
margin: 0 auto;
height:500px;
background: #ccc;
overflow: hidden;
}
.slider{
width: 300%;
}
.part{
width: 33.33%;
display: inline-block;
background: #e1f2f5;
height: 500px;
float: left;
}
.part2{
background: blue;
}
.part3{
background: orange;
}
.buttonWrapper{
text-align: center;
}
.progressQs{
width: 1080px;
background: #bbb;
margin: 0 auto;
/*padding: 10px 0px;*/
/*overflow: hidden;*/
position: relative;
background: lightgreen;
}
.progressBarQs{
display: block;
width: 0px;
height: 20px;
/*content: "";*/
/*position: absolute;
top: 0; left: 0; bottom: 0; right: 0;*/
background: limegreen;
background-image: 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;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-radius:0px 20px 20px 0px;
/*overflow: hidden;*/
position: relative;
}
.reportPrecentage{
display: inline-block;
position: absolute;
right: 50%;
top: -50%;
width: 40px;
height: 40px;
border-radius: 50%;
background: red;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="progressQs">
<span class="progressBarQs"><span class="reportPrecentage"></span></span>
</div>
<div class="form">
<div class="slider">
<div class="part part1">part1
Name: <input type="text">
Address: <input type="text">
location: <input type="text">
Gender: <input type="text">
How Long: <input type="text">
date: <input type="text">
</div>
<div class="part part2">part2</div>
<div class="part part3">part3</div>
</div>
</div>
<div class="buttonWrapper">
<button id="left">Left</button>
<button id="right">Right</button>
</div>
Where you have
questions.on("change", function(){
questions.each(function(i){
if($(this).val()){
arrayAnswerd =i+1;
}
I would do:
questions.on("change", function(){
arrayAnswerd = 0;
questions.each(function(i){
if($(this).val()){
arrayAnswerd++;
}
Which is similar to your:
if($(this).val()){
nFilledIN++
}else if (nFilledIN > 0){
nFilledIN--
}
but I can't see that you are using nFilledIN anywhere...
I have a form that I am using to calculate the sum and average of an array of numbers. I am using a button to trigger the form to appear and then users can add extra input fields to enter as many values as they wish. When they click the 'Calc' button, they receive an alert of the sum and average. This much is working fine. The problem is when I click the trigger again to close and then to reopen the form, the same number of input fields as the user selected appear and, despite having been able to clear their values, I have not been able to empty the associated array. Thus, when the user inputs values the second time and attempts to perform the calculation, the previous values are being added to these new ones.
On top of this, I would like for the the dynamically added inputs to appear one on top of the other and for the '.remove-field' div (or at least the icon it contains) to appear to the right of each input field. I have tried various display values, positioning, etc. but nothing seems to produce a consistent look.
Here is my HTML markup:
<button class="form-launch" data-icon="">AVG</button>
<div class="form-space">
<form role="form" action="/wohoo" method="POST" class="form-add-remove">
<label class="label">Average Calculation</label>
<div id="horizontal_bar"></div>
<div class="multi-field-wrapper">
<div class="add-field"><i class="fa fa-plus-circle"></i></div>
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]" class="input-field"/>
<div class="remove-field"><i class="fa fa-minus-circle"></i></div>
</div>
</div>
</div>
<button type="button" class="check">Calc</button>
</form>
</div>
My CSS:
.form-launch {
position: absolute;
top: 20px;
left: 20px;
}
.form-space {
opacity: 0;
}
.form-add-remove {
font-family: "DJB Chalk It Up";
color: #FFF;
font-size: 30px;
width: 600px;
height: 300px;
padding: 20px;
border: 2px solid #FFF;
border-radius: 25px;
box-shadow: 0px 0px 10px 5px #000;
background: transparent url("http://mrlambertsmathpage.weebly.com/files/theme/blackboard.jpeg") repeat-y scroll left center;
text-align: center;
vertical-align: middle;
display: inline-flex;
-moz-box-pack: center;
justify-content: center;
align-items: center;
-moz-box-orient: vertical;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -125px;
display: inline-block;
}
.label {
position: absolute;
top: 20px;
left: 20px;
}
#horizontal_bar {
position: absolute;
top: 60px;
left: 0px;
width: 95%;
height: 4px;
border-radius: 2px;
background: #00A2E8 none repeat scroll 0% 0%;
margin: 2.5%;
box-shadow: 0px 0px 6px 3px #000, 0px 0px 1px #000 inset;
}
.multi-field-wrapper {
height: 130px;
width: 90%;
padding: 20px;
margin-left: 0px;
margin-top: 80px;
border: 2px dashed rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 1.5s ease-in-out 0.5S;
overflow-y: scroll;
}
.multi-field-wrapper:hover {
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 1.5s ease-in-out 0s;
}
.multi-field {
display: inline-block;
}
.add-field {
position: absolute;
right: 20px;
bottom: 20px;
}
i {
color: #00a2e8;
}
.calc {
position: absolute;
left: 20px;
bottom: 20px;
}
input {
font-family: "Borders Divide, But Hearts Shall Conquer";
border-radius: 5px;
border: 2px inset rgba(0, 0, 0, 0.4);
width: 100px;
text-align: right;
padding-right: 10px;
}
And my jQuery:
var launchCount = 0;
var arr = [],
sum = 0;
$('.form-launch').click(function() {
launchCount++;
if ((launchCount % 2) == 1) {
$('.form-space').css('opacity', '1');
// Initialize Average Form
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
$(".calc").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
});
// End Average Form
} else if ((launchCount % 2) == 0) {
$('.form-space').css('opacity', '0');
$('.form-add-remove').find("input[type=text]").val('');
if ($('.multi-field', $wrapper).length > 1) {
$(this).parent('.multi-field').remove(); // does not seem to work!
}
arr = []; // also does not seem to work
}
});
I have commented a few lines at the bottom of my jQuery to illustrate what I have tried. I also looked at setting the array length to 0, but I was not able to get that to work either.
Obviously, this is a work in progress. My jsfiddle is here: http://jsfiddle.net/e3b9bopz/77/
Can you try this?
$(".calc").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
arr = []; # How about putting your reset here?
sum = 0; # reinitialized the sum
});
I think you need to reset the arr after you make a calculation.
Not exactly what you need, but move $(".check").click out of $('.form-launch').click, and wrap the whole thing in a jquery ready.
$(function() {
$(".check").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
arr = [];
});
})
JSFiddle