Witam,
mam problem z przesunięciem diva za pomocą js.
Chcę stworzyć 4 przyciski na ekranie dzięki, którym będę mógł przesunąć kwadracik w dowolną stronę o np. 10px.
Problem polega na tym, że nie wiem jak przypisać przyciski do JS, który przesuwałby diva o daną ilość px. Próbowałem zmienić położenie za pomocą polecenia w css transform: translateX(0px); natomiast nie wiem jak odwołać się do tego zapisu w js.
Niby polecenie proste ale nie wiem jak to zrobić i jak się za to zabrać...
0
0
CSSowe top oraz left są za mało hipsterskie, że sięgasz po translateX? ;-)
0
@Patryk27 No może za daleko się posunąłem z tym translateX :-P
Natomiast nie wiem za bardzo jak podpisać przyciski tak aby po naciśnięciu div się przesuwał. Może wkleję kod. Będzie wiadomo gdzie utknąłem:
<html>
<head>
<title>ClickMyPlease</title>
<meta charset="utf-8" />
<style type="text/css">
#container{
height: 420px;
width: 420px;
margin: auto;
border: solid 2px black;
}
#kwadrat{
height: 100px;
width: 100px;
background-color: green;
}
#place{
width: 250px;
margin: auto;
padding: 10px;
background-color: #555555;
}
</style>
</head>
<body>
<div id="container">
<div id="kwadrat"></div>
</div>
<div id="place">
<button id="up" type="button" onclick="up()">Góra</button>
<button id="down" type="button" onclick="down()">Dół</button>
<button id="left" type="button" onclick="left()">Lewo</button>
<button id="right" type="button" onclick="right()">Prawo</button>
</div>
<script type="text/javascript" >
function up()
{
document.getElementById("kwadrat").style.;
}
function down()
{
document.getElementById("kwadrat").style.;
}
function left()
{
document.getElementById("kwadrat").style.;
}
function right()
{
document.getElementById("kwadrat").style.;
}
</script>
</body>
</html>
0
Do pola z id "kwadrat" dodaje tylko position natomiast z top i left nic się nie dzieje. Może ktoś wytłumaczyć albo poprawić? ;_;
<html>
<head>
<title>ClickMyPlease</title>
<meta charset="utf-8" />
<style type="text/css">
/* #container{
height: 420px;
width: 420px;
margin: auto;
border: solid 2px black;
} */
#kwadrat{
height: 100px;
width: 100px;
background-color: green;
position: absolute;
top: 10px;
left: 10px;
}
#place{
width: 250px;
margin: auto;
padding: 10px;
background-color: #555555;
}
</style>
</head>
<body>
<div class="kwadrat" id="kwadrat"></div>
<div id="place">
<button onclick="up()">Góra</button>
<button onclick="down()">Dół</button>
<button onclick="left()">Lewo</button>
<button onclick="right()">Prawo</button>
</div>
<script type="text/javascript" >
function up(x_pos, y_pos) {
var d = document.getElementById('kwadrat');
d.style.position = "absolute";
d.style.left = x_pos+'10px';
d.style.top = y_pos+'10px';
}
</script>
</body>
</html>
1
Jak myślisz, jakie wartości przyjmują parametry funkcji up , skoro ją wywołujesz bez ich podania?
0
Posiedziałem trochę na tym i faktycznie, po dodani wartości zaczęło wszystko hulać. Choć i tak zmieniłem trochę taktykę, i zacząłem operować trochę na marginTop itd. Dzięki bardzo za podpowiedzi :)