I'm trying to do a calculator and every time I click on different div with the same class, I'd like to be able to get different values too. For example,
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
a = +$('.append').text();
});
I wanna do the same but getting different value so I can set it as var b.
Right now, I'm getting the same value showing up twice. Any idea?
My working Jsfiddle
Also, right now, whenever I click on number 1, it didn't convert to a number for some reason. Other numbers are fine though.
Updated.
Is there anyone smart enough to help me out with this?! I don't want to do array first off. Second off, I know why it shows double the number. I'd like it to stop at the first click, save that value to var a. Then second click will show new value and save it to var b.
Here's one that doesn't need to do array.
https://github.com/meherchandan/Calculator/blob/master/calculator.js
Forget my previous answer. The problem is that you have two identical functions. Delete the first one.
Here: http://jsfiddle.net/y4jxvxub/9/
Example:
$(document).ready(function () {
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
a = +$('.append').text();
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case 'x':
result = a * b;
break;
case '÷':
result = a / b;
break;
case '=':
$('.append').remove();
$('#result').append('<span class="append">' + result + '</span>');
}
});
$('#clear').click(function () {
$('.append').remove();
});
});
.head {
height: 125px;
width: 130px;
background: #9e532a;
border-radius: 100%;
margin: 20px auto;
position: relative;
border: 5px solid #63341a;
}
.eyes {
height: 20px;
width: 13px;
background: black;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 40px;
}
.ears {
height: 40px;
width: 40px;
background: #9e532a;
border-radius: 100%;
border: 10px solid #63341a;
top: -10px;
z-index: -1;
position: absolute;
display: inline-block;
}
.left_ear {
left: -20px;
}
.left_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear {
right: -20px;
}
.right_eye {
right: 30px
}
.left_eye {
left: 30px;
}
.nose {
height: 20px;
width: 30px;
background: #63341a;
position: absolute;
top: 70px;
left: 49px;
border-radius: 60%;
}
.nose_bridge {
height: 15px;
width: 3px;
background: black;
position: absolute;
top: 20px;
left: 13px;
}
.mouth {
width: 60px;
height: 10px;
position: absolute;
top: 90px;
left: 33px;
border-bottom: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0 0 50px 50px;
}
.body {
height: 450px;
width: 300px;
background: #63341a;
position: absolute;
top: 120px;
left: -85px;
z-index: -1;
}
.head:before {
content:"";
width: 400px;
height: 40px;
background: #63341a;
position: absolute;
top: 100px;
z-index:-1;
border-radius: 100%;
left: -130px;
}
.body:after {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
right: 0;
border-radius: 0 0 30px 30px;
}
.body:before {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
left: 0;
border-radius: 0 0 30px 30px;
}
#result {
height: 50px;
width: 248px;
background: white;
position: absolute;
top: 30px;
left: 25px;
box-shadow: 1px 1px 10px 1px black;
line-height: 50px;
font-size: 30px;
}
#calculator {
width: 248px;
position: absolute;
top: 100px;
left: 24px;
border-left: 1px solid black;
border-top: 1px solid black;
}
.numbers {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.numbers:hover {
background: #DDD2BE;
}
.operators {
background: #F27B17;
width: 61px;
height: 62px;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.operators:hover {
background: orange;
}
/*#split {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.append {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<div class="head">
<div class="left_ear ears"></div>
<div class="right_ear ears"></div>
<div class="left_eye eyes"></div>
<div class="right_eye eyes"></div>
<div class="nose">
<div class="nose_bridge"></div>
</div>
<div class="mouth"></div>
<div class="body">
<div id="result"></div>
<div id="calculator">
<div class="numbers" id="n1"><span>1</span>
</div>
<div class="numbers" id="n2">2</div>
<div class="numbers" id="n3">3</div>
<div class="operators" id="add">+</div>
<div class="numbers" id="n4">4</div>
<div class="numbers" id="n5">5</div>
<div class="numbers" id="n6">6</div>
<div class="operators" id="minus">-</div>
<div class="numbers" id="n7">7</div>
<div class="numbers" id="n8">8</div>
<div class="numbers" id="n9">9</div>
<div class="operators" id="multiply">x</div>
<div class="numbers" style="width: 123px" id="n0">0</div>
<div class="numbers split">.</div>
<div class="operators" id="divide">÷</div>
<div class="numbers" style="width:185px" id="clear">CLEAR</div>
<div class="operators equal">=</div>
</div>
</div>
</div>
</div>
</body>
Working as a normal calculator:
http://jsfiddle.net/y4jxvxub/45/
$(document).ready(function () {
var number=0, buffer="", result=0, operator="";
$('.numbers').click(function () {
$('#result').text($('#result').text() + $(this).text());
buffer = buffer + $(this).text();
});
$('.operators').click(function () {
number = parseFloat(buffer);
buffer = "";
switch (operator) {
case '+':
number = result + number;
break;
case '-':
number = result - number;
break;
case 'x':
number = result * number;
break;
case '÷':
number = result / number;
break;
}
operator = $(this).text();
result = number;
$('#result').text($('#result').text() + operator);
if ($(this).text()=='=') {
buffer = result;
$('#result').text(result);
}
});
$('#clear').click(function () {
number=0, buffer="", result=0, operator="";
$('#result').text("");
});
});
working code without array, I tweaked your code a bit, since <span class="append"></span> is not necessary.
http://jsfiddle.net/y4jxvxub/15/
My little tweak, this is only good for simple math operations ... you need to spend more time for complex case like: 1 + 3 + 3 ....
Hope this helps!
$(document).ready(function () {
$.screen = $('#result');
var a,c;
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
b = +$('.append').text();
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
operator='+';
a = parseInt(b);
$.screen.text('');
break;
case '-':
operator='-';
a = parseInt(b);
$.screen.text('');
break;
case 'x':
operator='*';
a = parseInt(b);
$.screen.text('');
break;
case '÷':
operator='/';
a = parseInt(b);
$.screen.text('');
break;
case '=':
c= parseInt(b);
$.screen.text('');
if(operator=='+'){
$.screen.text(a+c);
}else if(operator=='-'){
$.screen.text(a-c);
}else if(operator=='*'){
$.screen.text(a*c);
}else if(operator=='/'){
$.screen.text(a/c);
}
}
});
$('#clear').click(function () {
$('#result').empty();
});
});
.head {
height: 125px;
width: 130px;
background: #9e532a;
border-radius: 100%;
margin: 20px auto;
position: relative;
border: 5px solid #63341a;
}
.eyes {
height: 20px;
width: 13px;
background: black;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 40px;
}
.ears {
height: 40px;
width: 40px;
background: #9e532a;
border-radius: 100%;
border: 10px solid #63341a;
top: -10px;
z-index: -1;
position: absolute;
display: inline-block;
}
.left_ear {
left: -20px;
}
.left_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear {
right: -20px;
}
.right_eye {
right: 30px
}
.left_eye {
left: 30px;
}
.nose {
height: 20px;
width: 30px;
background: #63341a;
position: absolute;
top: 70px;
left: 49px;
border-radius: 60%;
}
.nose_bridge {
height: 15px;
width: 3px;
background: black;
position: absolute;
top: 20px;
left: 13px;
}
.mouth {
width: 60px;
height: 10px;
position: absolute;
top: 90px;
left: 33px;
border-bottom: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0 0 50px 50px;
}
.body {
height: 450px;
width: 300px;
background: #63341a;
position: absolute;
top: 120px;
left: -85px;
z-index: -1;
}
.head:before {
content:"";
width: 400px;
height: 40px;
background: #63341a;
position: absolute;
top: 100px;
z-index:-1;
border-radius: 100%;
left: -130px;
}
.body:after {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
right: 0;
border-radius: 0 0 30px 30px;
}
.body:before {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
left: 0;
border-radius: 0 0 30px 30px;
}
#result {
height: 50px;
width: 248px;
background: white;
position: absolute;
top: 30px;
left: 25px;
box-shadow: 1px 1px 10px 1px black;
line-height: 50px;
font-size: 30px;
}
#calculator {
width: 248px;
position: absolute;
top: 100px;
left: 24px;
border-left: 1px solid black;
border-top: 1px solid black;
}
.numbers {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.numbers:hover {
background: #DDD2BE;
}
.operators {
background: #F27B17;
width: 61px;
height: 62px;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.operators:hover {
background: orange;
}
/*#split {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.append {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
<div id="container">
<div class="head">
<div class="left_ear ears"></div>
<div class="right_ear ears"></div>
<div class="left_eye eyes"></div>
<div class="right_eye eyes"></div>
<div class="nose">
<div class="nose_bridge"></div>
</div>
<div class="mouth"></div>
<div class="body">
<div id="result"></div>
<div id="calculator">
<div class="numbers" id="n1">1</div>
<div class="numbers" id="n2">2</div>
<div class="numbers" id="n3">3</div>
<div class="operators" id="add">+</div>
<div class="numbers" id="n4">4</div>
<div class="numbers" id="n5">5</div>
<div class="numbers" id="n6">6</div>
<div class="operators" id="minus">-</div>
<div class="numbers" id="n7">7</div>
<div class="numbers" id="n8">8</div>
<div class="numbers" id="n9">9</div>
<div class="operators" id="multiply">x</div>
<div class="numbers" style="width: 123px" id="n0">0</div>
<div class="numbers split">.</div>
<div class="operators" id="divide">÷</div>
<div class="numbers" style="width:185px" id="clear">CLEAR</div>
<div class="operators equal">=</div>
</div>
</div>
</div>
</div>
</body>
Try this. http://jsfiddle.net/y4jxvxub/11/
$(document).ready(function () {
var a ;
var b ;
var result;
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
if(a==undefined){
a = parseInt($(this).text());
} else {
b = parseInt($(this).text());
}
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case 'x':
result = a * b;
break;
case '÷':
result = a / b;
break;
case '=':
$('.append').remove();
$('#result').append('<span class="append">' + result + '</span>');
}
});
$('#clear').click(function () {
$('.append').remove();
});
});
You can try this a small change in your code. You have to select the 2 single digit numbers first and then the operator and then "=".
Related
I made this mini game and I want that my "player" named div to move to left and right inside of the "game" div but I'm stuck. Can someone help me? I think my error is inside of the JavaScript file... Also if my "player" div moves, will my "gun" div move with it too?
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
const {
style
} = player;
switch (event.key) {
case 'ArrowRight':
style.left = `${parseInt(style.left) - modifier}px`;
break;
case 'ArrowLeft':
style.left = `${parseInt(style.left) + modifier}px`;
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
<script src="js.js"></script>
You need to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowRight':
player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px";
break;
case 'ArrowLeft':
player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px";
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
HTML elements CSS property values acquired by .style aswell as per getComputedStyle() will be returned by Javascript as strings like 10px for div { left: 10px}, containing unit types depending on the CSS property.
You will have to substract the unit types from those strings and then your parseInt should work:
parseInt(style.left.replace('px', ''))
My first question on Stackoverflow :) I have this situation. I build a slider trying to get with js the value and displaying in a box. Additionally I want to hide the slider thumb and replace it with my icon.. in Chrome is all nice and good but the in Firefox the original thumb of the slider is still rendered and displayed.
Any I dean what I'm doing wrong in CSS? Thanks in advance!
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function () {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>
Chrome:
Firefox:
Make background and border disappear with -moz-range-thumb pseudo selector.
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
It looks broken in the snippet, but I think it would work in your code.
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function() {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>
``` in the end I was able to solve it like this! Thx all for support! ``
#slider_qt::-moz-range-thumb {
-webkit-appearance: none;
background: transparent;
border-color: transparent;
color: transparent;
width: 20px;
height: 20px;
cursor: pointer;
}
I created a jsfiddle showing a simple range slider, with a max range of 4.
What I'm trying to achieve is to animate the number in the output, so for example if you're currently at 1 and you choose 4, 1 will go down and fade out, while 4 will come from the top and fade in. On the other hand, if you choose a lower number, the opposite will happen.
Thanks ahead for your help!
jsfiddle: https://jsfiddle.net/hm0gxs54/12/
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="range-slider-wrap range-slider-lg">
<input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">
<output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>
</div>
</div>
</div>
</div>
</div>
CSS
.range-slider-output {
position: relative;
display: inline-block;
padding: 0.2em 0.75em 0.25em;
color: #fff;
text-align: center;
background: #666;
border-radius: 3px;
width: 100%;
left: calc(50%);
flex: 0 0 5%;
align-self: center;
margin: 0;
font-size: 28px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -92px;
}
.range-slider-output::before {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.range-slider-lg .range-slider-output::before {
top: 48px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #666 transparent transparent transparent;
transition: all 0.7s ease-out;
}
.range-slider-wrap {
min-width: 100px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
padding-top: 90px;
}
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
-webkit-appearance: none;
padding: 0 0.5rem;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
-webkit-appearance: none;
}
input[type='range']::-moz-range-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
}
JS
$(function() {
var slider = document.getElementById("range-slider");
var output = document.getElementById("range-slider-output");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
I am trying to use jquery resizable handlers with absolute position square divs
but when I click the "north" and "west" button(only this two direction) and drag just a little for resizing, the box itself became smaller by 1 or 2px
in north handler case, like (top:100px,height:100px => top:99px,height:99px)
what did I do wrong??
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
Here's a demo link!
when I drag "keeper" item to "screen" and move north resize handler little, the square makes problem
Please change box-sizing: border-box; to box-sizing: content-box;.
https://jsfiddle.net/6h02cmvf/
$(document).ready(function() {
$('#container > .ui-element-libraries-container > .ui-element-container').draggable({
opacity: 0.5,
helper: "clone",
appendTo: '#full',
cursor: "move",
revert: true
})
$('#screen').droppable({
drop: (event,ui)=>{
let layoutOffset=$('#screen').offset()
let element=ui.helper.clone().css({
'position': 'absolute',
'opacity': 1,
'left': (ui.position.left-layoutOffset.left)+'px',
'top': (ui.position.top-layoutOffset.top)+'px',
})
element.toggleClass('ui-element-container ui-element')
element.empty()
element.append("<div class='ui-resizable-handle ui-resizable-n'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-s'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-e'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-w'></div>")
element.appendTo('#screen')
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
ui.helper.remove()
}
})
})
.pane{
color: black;
background-color: white;
position: absolute;
display: block;
overflow: hidden;
border: 2px solid black;
}
#container{
margin: 0px;
left: 300px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
#screen{
margin: 0px;
left: 0px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
.ui-element-libraries-container{
width:100%;
}
.ui-element-container{
color: black;
background-color: yellow;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 33.3%;
min-width: 80px;
max-width: 90px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
overflow: hidden;
cursor: move;
}
.ui-element{
color: black;
background-color: white;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 100px;
height: 100px;
box-sizing: content-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
cursor: move;
}
.ui-resizable-handle{
position: absolute;
width: 7px;
height: 7px;
border: 1px solid blue;
background: white;
display: block;
}
.ui-resizable-n{
top: -4px;
bottom: auto;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-s{
top: auto;
bottom: -4px;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-e{
top: 50%;
bottom: auto;
left: auto;
right: -4px;
margin-top: -4px;
cursor: ew-resize;
}
.ui-resizable-w{
top: 50%;
bottom: auto;
left: -4px;
right: auto;
margin-top: -4px;
cursor: ew-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="full">
<div id="screen" class="pane">
screen
</div>
<div id="container" class="pane">
keeper
<div class="ui-element-libraries-container">
<div class="ui-element-container">
<div>
b
</div>
</div>
</div>
</div>
</div>
I made few divs with data-line attribute. I want to loop each divs and take the own value from data-line attribute and apply to width as % but it takes only last value and apply it all of them.
You can look at my code here.
(function processLine() {
var processBar = $('.process');
var percent = $('.process-percent .percentage');
//var id = setInterval(frame, 15);
function frame() {
var arrData = [];
processBar.each(function() {
var processData = $(this).data('line');
if (arrData.indexOf(processData) !== processData) {
arrData.push(processData);
}
});
for (var i = 0; i < arrData.length; i++) {
processBar.css({
'width': arrData[i] + '%'
});
}
}
frame();
})();
.process-bar {
position: relative;
max-width: 265px;
height: 15px;
background-color: #e4e4e4;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#sidebar-left .process-bar {
width: 265px;
}
.process {
position: relative;
width: 70%;
height: 15px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #aab3c3;
}
.process-percent {
display: block;
text-align: right;
font-size: 9px;
color: #f9f9f9;
padding-right: 5%;
font-weight: 400;
}
.yaris-arrow-progress .process-bar-container {
margin-bottom: 16px;
}
.yaris-arrow-progress .process-bar-container:last-child {
margin-bottom: 0;
}
.yaris-arrow-progress .process-bar {
max-width: 90%;
width: 90%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
display: flex;
align-items: center;
}
.yaris-arrow-progress .process-bar::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-left: 18px solid #e4e4e4;
border-bottom: 9px solid transparent;
top: 0;
left: 100%;
}
.yaris-arrow-progress .process-bar::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 10px solid #f9f9f9;
border-left: 20px solid transparent;
border-right: 120px solid #f9f9f9;
border-top: 10px solid #f9f9f9;
z-index: 2;
}
.yaris-arrow-progress .process {
width: 70%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #f8981d;
}
.yaris-arrow-progress .process .bike {
display: block;
text-align: right;
font-size: 16px;
color: #f9f9f9;
padding-right: 2%;
line-height: 0;
}
.yaris-arrow-progress .process::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #f8981d;
border-bottom: 10px solid transparent;
top: 0;
left: 100%;
z-index: 1;
}
.yaris-arrow-progress .lap-xp {
position: absolute;
z-index: 3;
font-size: 10px;
margin-left: 40px;
}
<div class="yaris-arrow-progress">
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="10">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="65">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="83">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar">
<div class="process" data-line="95">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You are using processBar inside the for loop to update the CSS width. Since processBar is the collection of all the .process elements, when you call .css on it, all the elements get changed. Try to use .eq(i) to change only the element at the i-th index of that collection.
Plus I don't see why you're using two loops. You can apply CSS directly inside each (where you can use $(this) to target the current element:
function frame() {
processBar.each(function() {
var processData = $(this).data('line');
$(this).css({
// ^^^^ instead of processBar which changes the whole collection
'width': processData + '%'
});
});
}
(function processLine() {
var processBar = $('.process');
var percent = $('.process-percent .percentage');
function frame() {
processBar.each(function() {
var processData = $(this).data('line');
$(this).css({
'width': processData + '%'
});
});
}
frame();
})();
.process-bar {
position: relative;
max-width: 265px;
height: 15px;
background-color: #e4e4e4;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#sidebar-left .process-bar {
width: 265px;
}
.process {
position: relative;
width: 70%;
height: 15px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #aab3c3;
}
.process-percent {
display: block;
text-align: right;
font-size: 9px;
color: #f9f9f9;
padding-right: 5%;
font-weight: 400;
}
.yaris-arrow-progress .process-bar-container {
margin-bottom: 16px;
}
.yaris-arrow-progress .process-bar-container:last-child {
margin-bottom: 0;
}
.yaris-arrow-progress .process-bar {
max-width: 90%;
width: 90%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
display: flex;
align-items: center;
}
.yaris-arrow-progress .process-bar::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-left: 18px solid #e4e4e4;
border-bottom: 9px solid transparent;
top: 0;
left: 100%;
}
.yaris-arrow-progress .process-bar::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 10px solid #f9f9f9;
border-left: 20px solid transparent;
border-right: 120px solid #f9f9f9;
border-top: 10px solid #f9f9f9;
z-index: 2;
}
.yaris-arrow-progress .process {
width: 70%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #f8981d;
}
.yaris-arrow-progress .process .bike {
display: block;
text-align: right;
font-size: 16px;
color: #f9f9f9;
padding-right: 2%;
line-height: 0;
}
.yaris-arrow-progress .process::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #f8981d;
border-bottom: 10px solid transparent;
top: 0;
left: 100%;
z-index: 1;
}
.yaris-arrow-progress .lap-xp {
position: absolute;
z-index: 3;
font-size: 10px;
margin-left: 40px;
}
<div class="yaris-arrow-progress">
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="10">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="65">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="83">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar">
<div class="process" data-line="95">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can do this with a very simple code. No need to write so much long functions.
$('.process').each(function(){
var width = $(this).data('line');
$(this).css('width',width+'%');
});