I've made margin of 2 divs move (using variable and variable++ or -- with style attribute in js to change margin) Like that:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="utf-8" />
<title>Game</title>
<style>
body{
position: absolute;
background: #f00;
}
.point{
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 10px;
margin: 0px 0 0;
}
.player{
position: absolute;
text-align: center;
width: 200px;
height: 20px;
background: #0005ff;
margin: 550px 550px 0px;
}
</style>
<script>
var num = 550;
$(document).keydown(function (event) {
switch (event.keyCode) {
// Left Arrow
case 37: num = num-- - 15;
document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
break;
// Right Arrow
case 39: num = 15 + num++;
document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
break;
}
});
var nump = 0;
$(document).load(function () {
nump++;
document.getElementById('point').style.margin = nump + 'px 0px 0px';
});
</script>
</head>
<body>
<div class="point" id="point"></div>
<div class="player" id="player"></div>
</body>
</html>
Now I got problem about moving div named point.The div, point is not moving when I use $(document).load but the other div works. How can I fix that?
My second question is how can i check when div "point" touch div "player" then i'll return div point to the start and make a loop.
try this to move the point
var nump = 0;
var touch = false;
var flagtouch;
$(document).ready(function () {
flagtouch = setInterval(function(){
movePoint(nump);
},1000);
});
function movePoint()
{
document.getElementById('point').style.margin = nump + 'px 0px 0px';
touch = chekTouch(); // check whether the divs touches and return true if touched
if(touch)
{
clearInterval(flagtouch);
}
else
{
nump = nump+5;
}
}
For the second question:
With http://api.jquery.com/position/, you can known the position of both divs, and as you know too the width and height of the elements, you can calculate the region occupied by each element, and then when the elements touch each other.
Related
I'm trying to make my div element move back and forth inside a container infinitely.
The goal is to use Java Script only, no CSS animations, jQuery, etc.
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
pos++;
if (pos === 150) {
clearInterval(t)
}
}
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
So here the code. As you see, I've used position relative/absolute to make the element move with setInterval function. But when I try to reverse it back to "it's corner", it just won't work. To be honest, I've tried some stuff already, but I really can't find the solution of doing it without using any other instruments.
Thanks in advance.
You need to increase/decrease the values considering a boolean variable like below:
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
let test = true;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
if (test)
pos++; /* move down */
else
pos--; /* move up */
/* update the direction when you reach the top or bottom limit*/
if (pos >= 150)
test = false
else if (pos <= 0)
test = true;
}
#container {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
An alternative to get the same results
const box = document.getElementById('box');
let jump = 1;
let pos = 0;
window.setInterval(() => {
pos = pos + jump;
if (pos > 150 || pos < 0) {
jump = jump * (-1);
}
box.style.left = pos + 'px';
box.style.top = pos + 'px';
}, 1);
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
I plan to make this box move every time I click a button
but the problem is that it works first time when I click s or d but does not work after that.
So can any one help me to find the solution to my problem?
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
left: 10px;
top: 20px;
width: 20px;
height: 20px;
background-color: black;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body id="bd">
<div class="box"></div>
<script >
document.getElementById('bd').addEventListener('keypress', show);
function show(e){
let x = e.which;
if(x == 122){
// 122 = z
document.getElementsByClassName('box')[0].style.top -='50px' ;
}
else if(x == 133){
// 122 = q
document.getElementsByClassName('box')[0].style.left -='50px' ;
}
else if(x == 115){
// 122 = s
document.getElementsByClassName('box')[0].style.top +='50px' ;
}
else if(x == 100){
// // 122 = d
document.getElementsByClassName('box')[0].style.left +='50px' ;
}
}
</script>
</body>
</html>
You are trying to perform operation on string. First need to convert in number.
Sample:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
left: 10px;
top: 20px;
width: 20px;
height: 20px;
background-color: black;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body id="bd">
<div class="box"></div>
<script>
const number = (num) => Number(num.split('px')[0])
const addBy50 = (num) => `${number(num) + 50}px`
const subtractBy50 = (num) => `${number(num) - 50}px`
const style = document.getElementsByClassName("box")[0].style
document.addEventListener("keypress", (e) => {
let x = e.which;
const {
top,
left
} = style
switch (e.which) {
case 122:
style.top = subtractBy50(top);
break;
case 113:
style.left = subtractBy50(left);
break
case 115:
style.top = addBy50(top);
break
case 100:
style.left = addBy50(left);
break
}
});
</script>
</body>
</html>
element.style.top and element.style.left are strings, so your statements are essentially saying
element.style.top = "20px" + "50px";
Instead, consider a separate variable storing position:
let positionLeft = 20;
...
if(x == 115){
positionLeft += 50;
document.getElementsByClassName('box')[0].style.top = positionLeft + 'px';
}
I have created a button which should shift the window's Y to "BOX - 5" div's Y middle through onclick. So in other words I want to set the "Box - 5" div in the middle of the window. I have tried many methods using window.scrollTo and using elements.innerHeight/2, but I still cannot center the element to the middle of the window/screen. Please Help.
I wish to only use Javascript, but if its not possible with it then I would accept jQuery script.
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll("#box")[4];
/*
NEED HELP HERE
*/
}
body {
margin: 0;
}
#box {
position: relative;
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
Updated your snippet as below. You can use DOM element property offsetTop to check its Y position and use window.scroll to scroll the view to that element. Another sidenote, it's better to not assign the same id to multiple elements, so I change the id property to class and added identifier _{index} for the class name.
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.className += "box _" + (y+1);
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll(".box._5")[0];
if (box_5) {
// scroll the window view to the element
window.scroll({
top: box_5.offsetTop,
behavior: 'smooth',
})
}
}
body {
margin: 0;
}
.box {
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
I'm trying to achieve a Glass Magnifier in JS.But something wrong when I try to set the position of my glass regarding to the cursor position: if I try to set the glass position to the center of the cursor, lags happened and I can't figure out why.
I've tried to set a transform : translation (-50%, -50%) to my glass, but results are the same.
More than my glass position is far from the center of the cursor, less is bugged.
let img = document.querySelector('.longboard');
let glass = document.querySelector('#zoom');
let displayCoor = document.querySelector('.coordonnees');
let a = glass.offsetWidth / 2;
let b = glass.offsetHeight / 2;
img.onmousemove = function(e) {zoomMovement(e)};
function mousemovement(e) {
let x = e.pageX;
let y = e.pageY;
let coor = "Coordinates: (" + x + "," + y + ")";
displayCoor.innerHTML = coor;
return {x : x, y : y};
};
function zoomMovement (e){
var pos = mousemovement(e);
glass.style.top = (pos.y-b) +'px'; //<-- increase b to avoid the lag
glass.style.left = (pos.x-a) +'px';//<-- increase a to avoid the lag
}
/*img.addEventListener('mouseenter', function () {
document.getElementById('zoom').className = "visible";
});
img.addEventListener('mouseleave', function () {
document.getElementById('zoom').className = "invisible";
});*/
.visible{
display: block;
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.invisible{
display: none;
}
#zoom{
position: absolute;
background-image: url("https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg");
background-repeat: no-repeat;
width: 150px;
height: 150px;
border-radius: 100px;
z-index: 2;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Loupe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<img class="longboard" src="https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg" style="position: relative; display: block;margin: 100px auto; width: 30%;"/>
</div>
<div class="coordonnees" style="display: block;margin: 30px auto"></div>
<div id="zoom" class="visible"> </div>
<script src="js/zoom3.js"></script>
</body>
</html>
I will really appreciate if someone could explain me why.
Thanks for your help!
I'm not sure I understand what you mean by "lag". But one issue I've found is that you're only listening to the mousemove event on your img. So, if you're moving your cursor inside your zoom, the glass manifier is not moving. This is because your glass has a higher z-index than your img. So, the mousemove event is not triggered as long as you don't move your cursor out of the glass.
To solve this, I only attached your event listener to the glass element and it seems smoother.
EDIT : I've found a much better solution using CSS pointer-events:none on your glass element.
Then, you can uncomment your eventListener that are showing and hiding your magnifier when your leave / enter the img
let img = document.querySelector('.longboard');
let glass = document.querySelector('#zoom');
let displayCoor = document.querySelector('.coordonnees');
let a = glass.offsetWidth / 2;
let b = glass.offsetHeight / 2;
img.onmousemove = function(e) {zoomMovement(e)};
// previous solution : listening to mousemove on the magnifier :
// glass.onmousemove = function(e) {zoomMovement(e)};
function mousemovement(e) {
let x = e.pageX;
let y = e.pageY;
let coor = "Coordinates: (" + x + "," + y + ")";
displayCoor.innerHTML = coor;
return {x : x, y : y};
};
function zoomMovement (e){
var pos = mousemovement(e);
glass.style.top = (pos.y-b) +'px'; //<-- increase b to avoid the lag
glass.style.left = (pos.x-a) +'px';//<-- increase a to avoid the lag
}
img.addEventListener('mouseenter', function () {
document.getElementById('zoom').className = "visible";
});
img.addEventListener('mouseleave', function () {
document.getElementById('zoom').className = "invisible";
});
.visible{
display: block;
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.invisible{
display: none;
}
#zoom{
position: absolute;
background-image: url("https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg");
background-repeat: no-repeat;
width: 150px;
height: 150px;
border-radius: 100px;
z-index: 2;
pointer-events:none;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Loupe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<img class="longboard" src="https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg" style="position: relative; display: block;margin: 100px auto; width: 30%;"/>
</div>
<div class="coordonnees" style="display: block;margin: 30px auto"></div>
<div id="zoom" class="visible"> </div>
<script src="js/zoom3.js"></script>
</body>
</html>
i created a red div.Using mouse cursor i can move it anywhere on the screen.it was fine and smooth.then i decided to add an extra orange div inside the red div.i made the positioning "absolute" for the red div and "relative" for the orange div.as soon as i put the orange div inside the red div the position changing is not smooth .if i click on the orange portion an then move it is smooth but if i clip the visible red portion and move my mouse it is not smooth.how to fix this..
JSfiddle
<html>
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
#mydiv {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
top: 300px;
left: 200px;
}
#mid {
position: relative;
width: 40px;
height: 40px;
margin: 30px 30px;
background-color: orange;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="mid"></div>
</div>
<script>
var gotit = false;
var i, p, q;
var divs = document.getElementById("mydiv");
divs.addEventListener('mousedown', clipit, false);
divs.addEventListener('mousemove', function (e) {
moveit(e);
}, false);
divs.addEventListener('mouseup', unclip, false);
divs.addEventListener('mouseout', unclip, false);
function clipit() {
i = divs.offsetLeft;
gotit = true;
p = e.clientX;
q = e.clientY;
}
function moveit(e) {
if (gotit == true) {
if (e.clientX > divs.offsetLeft) {
divs.style.left = divs.offsetLeft + (e.clientX - p) + "px";
p = e.clientX;
}
if (e.clientY > divs.offsetTop) {
divs.style.top = divs.offsetTop + (e.clientY - q) + "px";
q = e.clientY;
}
}
}
function unclip() {
gotit = false;
}
</script>
</body>
</html>
You forgot to put the event in clipit:
function clipit(e) {}
Remember to always check your console log:
Uncaught ReferenceError: e is not defined
fix