We Keep Coding

Changing div left property set in % using javascript/jQuery?

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>

Text Center on Progress Bar

I am trying to place the percentage total in the center of the colored progress bar but am struggling to do so.
I have tried placing the <p> tag within the different <div> tags but can't quite work it out.
Can anyone help?
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
vertical-align: middle;
line-height: 50px;
padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
</div>
<p class="progress-value progress-size alt text-center">25%</p>

You can just position the text absolutely inside the bar and then set the right to 100 minus the percentage:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
right: 100 - $('.progress-wrap').data('progress-percent') + '%'
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 100%;
text-align:center;
margin:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value alt text-center">25%</p>
</div>

You don't need positioning here. Simply put your .progress-value element into the wrapper and use the padding-left attribute to animate the percentage value as well. To center the value, you can i.e. use an offset and half of your total progress value: (progressTotal-15)/2
Here is the working example:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
paddingLeft: (progressTotal-15)/2
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value progress-size alt text-center">25%</p>
</div>

Please check, hope this will helpful form you
https://codepen.io/Thakur92411/pen/aRoEoa1
<div class="progress-wrap" data-progress-percent="25">
<div class="valuetext">25%</div>
<div class="progress-bar progress-value progress-size"></div>
</div>

Limit a DIV to appear within another DIV of specific size

I'm currently working on this small project that randomly displays a div (#box) of 100px width and height. I want this div to appear ONLY in another div (#boxBorder) so it appears to be limited to a specific area on the page.
Here is the content of my HTML:
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder"></div>
<div id="box"></div>
Here is the CSS:
#boxBorder {
height: 500px;
width: 500px;
margin: 20px auto;
left: 0;
right: 0;
background-color: white;
border: 1px black solid;
position: absolute;
z-index: 0;
}
#box {
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
display: none;
border-radius: 50px;
position: relative;
z-index: 1;
}
h1 {
margin: 15px 0 0 0;
}
#directions {
margin: 0;
padding: 5px;
font-size: 0.8em;
}
#scoreT, #scoreC {
font-weight: bold;
margin: 10px 50px 0 0;
}
#tScore, #cScore {
font-weight: normal;
}
h1, #directions, #scoreT, #scoreC {
width: 100%;
text-align: center;
}
And lastly, the javascript function for random position:
//Get random position
function getRandomPos() {
var pos = Math.floor((Math.random() * 500) + 1);
console.log("POS: " + pos + "px");
return pos + "px";
}
Which I call within a timeout method:
setTimeout(function() {
createdTime = Date.now();
console.log("make box: " + createdTime);
document.getElementById("box").style.top=getRandomPos();
document.getElementById("box").style.left=getRandomPos();
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.borderRadius=getRandomShape();
document.getElementById("box").style.display="block";
}, rTime);
I'm not very skilled in positioning and I can't seem to get these two divs to align so that the #box div can recognize the size of the #boxBorder div and stay within those limits. Any help would be appreciated!

Couple things wrong here:
You need the box div nested inside the borderBox div if you want to use the relative positioning.
<div id="boxBorder">
<div id="box"></div>
</div>
The randomPos function needs to take into account the size of the box, so only multiply by 400 instead of 500.
function getRandomPos() {
var pos = Math.floor((Math.random() * 400));
return pos + "px";
}
Set the style to inline-block, not block for the box.
Use setInterval instead of setTimeout to have it repeat.
var rTime = 1000;
function getRandomPos() {
var pos = Math.floor((Math.random() * 400));
console.log("POS: " + pos + "px");
return pos + "px";
}
function getRandomColor() {
return ['#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#96b5b4', '#8fa1b3', '#b48ead'][(Math.floor(Math.random() * 7))];
}
function randomizeBox() {
createdTime = Date.now();
console.log("make box: " + createdTime);
document.getElementById("box").style.top = getRandomPos();
document.getElementById("box").style.left = getRandomPos();
document.getElementById("box").style.backgroundColor = getRandomColor();
}
setInterval(randomizeBox, rTime);
#boxBorder {
height: 500px;
width: 500px;
margin: 20px auto;
left: 0;
right: 0;
background-color: white;
border: 1px black solid;
position: absolute;
z-index: 0;
}
#box {
margin: 0 auto;
height: 100px;
width: 100px;
border-radius: 50px;
position: relative;
z-index: 1;
display: inline-block;
}
h1 {
margin: 15px 0 0 0;
}
#directions {
margin: 0;
padding: 5px;
font-size: 0.8em;
}
#scoreT,
#scoreC {
font-weight: bold;
margin: 10px 50px 0 0;
}
#tScore,
#cScore {
font-weight: normal;
}
h1,
#directions,
#scoreT,
#scoreC {
width: 100%;
text-align: center;
}
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder">
<div id="box"></div>
</div>

lightbox with 2 different progress bar inside

I have created a lightbox in javascript and I have placed inside it a progress bar that I have also created it in javascript. My problem is that when I was trying to insert a second progress bar inside my lightbox only the first works. Any idea how to fix this?
this is my jsfiddle :http://jsfiddle.net/QHMKk/3/
and my code is this:
my javascript is:
function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
this is my html:
OPEN
<div id="light" class="white_content_stats">
<div class="prog">
<div id="filler" class="filler"></div>
</div>
</br>
<div class="prog2">
<div id="filler2" class="filler2"></div>
</div>
<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">
</br>CLOSE</a>
and this is my CSS:
.black_overlay_stats{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
z-index:1001;
-moz-opacity: 0.6;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content_stats {
display: none;
position:fixed;
top: 15%;
width: 300px;
padding: 30px;
margin-left:10px;
background-color:#F2F2F2;
border-radius: 0px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);
z-index:1002;
}
.prog {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
.prog2 {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler2 {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}

You define 2 functions with the same name start, so the second will be used and only it will be run, hence you can see only 1 progress bar works. You can modify the function start to make it accept an argument of id like this:
function start(id) {
//...
var filler = document.getElementById(id)
//...
}
Then call both start('filler') and start('filler2'):
OPEN
Updated Demo.
Note that you should not use inline event property.

Trouble with the CSS to change start position on a slider

I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.
However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?
Here's the CSS that I have so far:
.testprojbody
{
background-color: black;
padding: 0;
overflow: hidden;
}
.slider-holder
{
width: 98%;
height: 665px;
border: 2px black solid;
background-color: white;
float: center;
margin-left: 9px;
}
.slider
{
width: 987px;
height: 610px;
overflow: hidden;
float:center;
margin-top: 25px;
border: 2px black solid;
margin-left: 35px;
}
.holder
{
width: 200%;
height: 200%;
position: relative;
}
.slide
{
float: left;
width: 987px;
height: 610px;
position: relative;
}
.slider-navright
{
text-align: center;
margin: 310px 0 0 1030px;
position: absolute;
}
.slider-navright a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #999;
}
.slider-navleft {
text-align: center;
margin: 310px 0 0 12px;
position: absolute;
}
.slider-navleft a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #999;
}
.slider-navtop {
text-align: center;
margin: 2px 0 0 501px;
position: absolute;
}
.slider-navtop a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #999;
}
.slider-navbot {
text-align: center;
margin: 642px 0 0 501px;
position: absolute;
}
.slider-navbot a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 20px solid #999;
}
Here's the Javascript, which allows for nav & animation and so on:
<script type="text/javascript">
var positionH = 0
var positionV = 0
$(document).ready(function(){
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNavRight: $(".slider-navright"),
sliderNavLeft: $(".slider-navleft"),
sliderNavTop: $(".slider-navtop"),
sliderNavBot: $(".slider-navbot"),
},
timing: 400,
slideWidth: 987,
slideHeight: 610,
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// nav code
this.el.sliderNavRight.on("click", "a", function(event) {
slider.handleNavRightClick(event, this);
});
this.el.sliderNavLeft.on("click", "a", function(event) {
slider.handleNavLeftClick(event, this);
});
this.el.sliderNavTop.on("click", "a", function(event) {
slider.handleNavTopClick(event, this);
});
this.el.sliderNavBot.on("click", "a", function(event) {
slider.handleNavBotClick(event, this);
});
},
handleNavRightClick: function(event, el) {
positionH+=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavLeftClick: function(event, el) {
positionH-=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavTopClick: function(event, el) {
event.preventDefault();
positionV--;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
handleNavBotClick: function(event, el) {
event.preventDefault();
positionV++;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
};
slider.init();});
</script>
<script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
if (event.keyCode == 39){
//go right
event.preventDefault();
$('.slider-navright a')
.click();
} else if (event.keyCode == 37){
//go left
event.preventDefault();
$('.slider-navleft a')
.click();
} else if (event.keyCode == 38){
//go up
event.preventDefault();
$('.slider-navtop a')
.click();
} else if (event.keyCode == 40){
//go down
event.preventDefault();
$('.slider-navbot a')
.click();
}
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
</script>
and here's the relevant HTML:
<body class="testprojbody">
<div class="slider-holder">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-x0y0"></div>
<div class="slide" id="slide-x1y0"></div>
<div class="slide" id="slide-x0yA"></div>
<div class="slide" id="slide-x0y0"></div>
</div>
</div>
<nav class="slider-navright">
Move Right
</nav>
<nav class="slider-navleft">
Move Left
</nav>
<nav class="slider-navtop">
Move Up
</nav>
<nav class="slider-navbot">
Move Down
</nav>
</div>
</body>
</html>
Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!
Thanks.

Looks like the first lines on your JavaScript could be what you're looking for.
Have you tried changing the values of
var positionH = 0
var positionV = 0
to the positions you want?
EDIT
Okay so following on you can use those variables you'll just need to add a little more code to your init method...
init: function() {
this.bindUIEvents();
this.el.slider.scrollLeft(positionH);
this.el.slider.scrollTop(positionV);
}
Then change the positionH and positionV variables.