Why do not my elements go only 3% to the side?

Question

Why do not my elements go only 3% to the side?

Navigation

#1 by (2 votes)

2

Here's my code

var move = document.getElementById('main').children;
var movel = 3;
var x = 0;
console.log(move.length);
function right(){
  for (var i = 0; i <= move.length; i++) {
	var cssPr = window.getComputedStyle(move[i], null).getPropertyValue("left");
	var ppt = cssPr.replace("px", "");
	var calc = parseFloat(ppt);
	var calcFor = calc + movel;
	move[i].style.left = calcFor+"%";
  }
			
}
function left(){
  for (var i = 0; i <= move.length; i++) {
	var cssPr = window.getComputedStyle(move[i], null).getPropertyValue("left");
	var ppt = cssPr.replace("px", "");
	var calc = parseFloat(ppt);
	var calcFor = calc - movel;
	move[i].style.left = calcFor+"%";
  }
 			
}

.main {margin-left: 0%; width: 100%; max-height: 100px; position: relative; padding: 2%;}
.main div{width: 100px; height: 100px; display: inline-block; position: absolute;}
.p3{background-color: red; left: 50%; transition: all .4s; }
.p2{background-color: blue; left: 25%; transition: all .4s;}
.p1{background-color: black; left: 0%;transition: all .4s;}
button{ margin-top: 140px;}

<div class="main" id="main">
  <div class="p1"></div>
  <div class="p2"></div>
  <div class="p3"></div>
</div>
<button onclick="right()">Move -></button>
<button onclick="left()""><-Move</button>

javascript html css

asked by anonymous 23.05.2018 / 20:25

1 answer

Div from the right side of the page in the animation How to use strings as parameters in R

score 2 · Accepted Answer

I was unable to validate your code because part of it is not supported on my browser, so I made the code below, which is moving the objects to the left and right, 3% of the window size at a time.

var sx = window.innerWidth;
var _3p = sx * 3 / 100;
console.log("Tamanho da janela é: " + sx);
console.log("3% do tamanho da janela é: " + _3p);

controle_left = 0;

function right(){
    controle_left += _3p;
    document.getElementById("p1").style.marginLeft = controle_left;
    document.getElementById("p2").style.marginLeft = controle_left;
    document.getElementById("p3").style.marginLeft = controle_left;
}

function left(){
    controle_left -= _3p;
    document.getElementById("p1").style.marginLeft = controle_left;
    document.getElementById("p2").style.marginLeft = controle_left;
    document.getElementById("p3").style.marginLeft = controle_left;
}