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...
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
});
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>
I am trying to rotate background image while scrolling. The effect should look like cube. Sadly I could not find a way with css and jquery to make it look like in the video. On the gif, when scrolling down from gallery to next page, there is grill background which rotates and stretches by amount of page shown.
EDIT: Rotating animation has to look like this
What have I tried so far (unsuccessfully)
$(function() {
var rotation = 0,
scrollLoc = 0;
$(window).scroll(function() {
$("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
var newLoc = $(document).scrollTop();
var diff = scrollLoc - newLoc;
rotation += diff, scrollLoc = newLoc;
var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
$("#home").css({
"-webkit-transform": rotationStr,
"-moz-transform": rotationStr,
"transform": rotationStr,
"background-size": -rotation
});
});
})
body,
html {
height: 100%;
}
body {
background-color: #090909;
}
#home {
height: 100%;
position: relative;
overflow: hidden;
}
#galerie {
color: green;
}
#home:before {
content: "";
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
background-color: grey;
background-attachment: initial;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id=box>
<div id="home">
TestText
</div>
</div>
<div id="galerie">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="gale">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
I've made the top part for you. And I'm sure you'll make the bottom one yourself (see the snippet in the Full page mode):
$(function() {
$(window).scroll(function() {
$('#home_bg').css({
'transform': 'rotateX(' + 30 * (1 + Math.PI * Math.atan($(document).scrollTop() / 300)) + 'deg)'
});
});
})
html,
body {
height: 100%; margin:0 ;padding:0
}
body {
background-color: #333;
}
#home {
height: 30vh;
position: relative;
overflow: hidden;
perspective: 300px;
color:#fff;
text-align:center;
}
#home_bg {
content: "";
background: repeating-linear-gradient(45deg, #555, #555 2px, transparent 0, transparent 60px), repeating-linear-gradient(-45deg, #555, #555 2px, transparent 0, transparent 60px) 30px 30px / 170px 170px;
position: absolute;
z-index: -1;
top: -100%;
left: -50%;
width: 200%;
height: 200%;
transform: rotateX(30deg);
transform-origin: 50% 100%;
}
#galerie {
color: green;
display: flex;
justify-content: center;
flex-flow: row wrap;
width: 50%;
margin: 0 auto 70vh;
}
#galerie img {
width: 45%;
margin: 0 auto 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="home">
<h1>Lorem ipsum?</h1>
<div id="home_bg"></div>
</div>
<div id="galerie">
<p></p>
<img src="https://picsum.photos/100/100?1">
<img src="https://picsum.photos/100/100?2">
<img src="https://picsum.photos/100/100?3">
<img src="https://picsum.photos/100/100?4">
<img src="https://picsum.photos/100/100?5">
<img src="https://picsum.photos/100/100?6">
</div>
</body>
Hope you want like this.
$(function() {
var rotation = 0;
var interval;
var gear = $('.gear');
function animate() {
gear.css('transform', 'rotate('+rotation+'deg)');
rotation += 10;
rotation %= 360;
}
function startAnim() {
if (!interval) {
interval = setInterval(animate, 50);
}
}
function stopAnim() {
clearInterval(interval);
interval = null;
}
$(document).scroll(startAnim).mouseup(stopAnim);
});
body{
height: 1000px;
}
.gear{
background: url("https://cdn.pixabay.com/photo/2016/01/03/11/24/gear-1119298_960_720.png") no-repeat;
width: 100%;
height: 100px;
position: fixed;
background-position: center center;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gear"></div>
When we execute this code, a small box appears at the top left corner of a big box at start and at the end it is at the bottom right corner of the big box and i want that a diagonal line must be shown from the top left corner to the bottom right corner since it is the path traveled by the small box(or i can say i want to highlight the path traveled by the small box) . Can someone help me with this ?
function slider()
{
var t=setInterval(display,3);
var pos=0;
var x=document.getElementById("a1");
function display()
{
if(pos==350)
clearInterval(t);
else
{
pos++;
x.style.top=pos+'px';
x.style.left=pos+'px';
}
}
}
h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
sans-serif;
text-align: center;
font-size: 50px;
color: rgb(100, 158, 13);
background-color: bisque;
border: 5px red groove;
}
body{
background-color: cornflowerblue;
}
.container{
background: black;
height: 400px;
width: 400px;
position: relative;
}
.box{
background: whitesmoke;
height: 50px;
width: 50px;
position: absolute;
}
<h2>This is my first animation code</h2>
<center>
<div class="container">
<div id="a1" class="box">
</div>
</div>
<p>
<button type="button" onclick="slider()">click here</button>
</p>
</center>
CSS is not really made for that but…
… You could fake this effect, using another element:
function slider() {
var t = setInterval(display, 3);
var pos = 0;
var a1 = document.getElementById("a1");
var path = document.getElementById("path");
function display() {
if (pos == 350)
clearInterval(t);
else {
pos++;
a1.style.top = pos + 'px';
a1.style.left = pos + 'px';
path.style.height = pos + 'px';
path.style.width = pos + 'px';
}
}
}
body {
background-color: cornflowerblue;
}
.container {
background: black;
height: 400px;
width: 400px;
position: relative;
}
.box {
position: absolute;
background: whitesmoke;
height: 50px;
width: 50px;
}
#path {
position: absolute;
height: 0;
width: 0;
margin: 25px;
background: linear-gradient(to top right, transparent 49%, red 50%, transparent 51%);
}
<div class="container">
<div id="path"></div>
<div id="a1" class="box"></div>
</div>
<button type="button" onclick="slider()">click here</button>
Of course, if you want the box to move again after that first move, you must use another element, and so on…
Hope it helps.
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>