I'm trying to implement an effect on overlapping images so when I click and drag a bar the other image underneath should reveal modifying the width. My code works, but it's kind of buggy. When I click on the bar I have to then release it to make it work, so it's not really a drag, and it supposed to stop moving when I release the click.
And second, the bar goes right even outside my container. How could I fix my code?
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function () {
container.on("mousemove", function (e) {
bar.css("left", e.clientX);
up.width(e.clientX);
});
});
$("body").on("mouseup", function () {
container.off("mousemove");
});
container.on("mouseleave", function () {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Explanation : When the bar was being slid, the images were acting as draggable elements. To stop that, I set draggable attribute to false in both image elements. Besides that, the blue color appearing was highlight because of selection of element. To prevent that, I set CSS property user-select to none for the container divs of images.
For browser compatibility, use different versions for user-select.
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function() {
container.on("mousemove", function(e) {
let left = e.clientX;
let containerWidth = container.width();
let barWidth = bar.width();
if((left + barWidth) > containerWidth)
left = containerWidth - barWidth;
bar.css("left", left);
up.width(left);
});
});
$("body").on("mouseup", function() {
container.off("mousemove");
});
container.on("mouseleave", function() {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom, #up {
position: absolute;
overflow: hidden;
user-select: none;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" draggable="false"/>
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" draggable="false"/>
</div>
<div id="bar"></div>
</div>
My advise is to NOT unregister (remove) the mousemove event listener.
Below, I used a barActive as a "flag" to know if the mouse button is down. The flag is resetted on mouseup and mouseleave of the container.
The mousemove event is a machinegun... But is still not fast enough to "really" follow the mouse. So if a user moves the bar fast, the cursor often is off the bar (I'm sure you noticed it). So a mouseup has good chances to not fire if the mouseup event listener is on the bar. So the event listener has to be on the container.
Now... While mousemove is not fast enought to follow the mouse perfectly... It often is too fast and may interfeer with the actions you wish to do with the other events, like mousedown were you set the "flag". At the same millisecond, you can have the mousedown event and multiple mousemove events. So to "isolate" it form the mousemove events, I used a real tiny setTimeout. That is giving enought time for the flag to be set bafore any next mousemove to enact.
About making sure the bar does not go outside the container, I used a condition on e.clientX.
I also took the container's padding in account.
console.clear();
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
var barActive = false;
bar.on("mousedown", function (e) {
barActive = true;
});
container.on("mousemove mouseup mouseleave", function (e) {
if (barActive && e.type === "mousemove") {
setTimeout(function () {
if (e.clientX < container.width() && e.clientX>5) {
bar.css("left", e.clientX - 8);
up.width(e.clientX - 8);
}
}, 1);
return;
}
barActive = false; // Applies only for mouseup and mouseleave
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
user-select: none; /* Prevents the image itself to be selected */
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
overflow: hidden; /* Will make sure the bar does not go over the border */
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CodePen
Related
Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it. I did that but the thing is that it's being glitchy. It returns to the original state one time and the other time follows the cursor. I don't want it to do that.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
slider.style.left += e.offsetX + "px";
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
slider.style.left = e.offsetX + "px"
console.log("Cursor is " + e.offsetX)
console.log("Element is" + slider.style.left)
}
})
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
As you can see, as you drag the element, it works but it isn't smooth. It returns to its original coordinates sometimes and then follows the cursor the other time.
.offsetX is the mouse position relative to the element, so that makes the slider jump. .clientX is the mouse position relative to the document.
In order to use clientX, however, you need to subtract the original x position of the slider. I'm going to assume that .Container will always be the container for the slider. By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said container.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
updateSliderPosition(e.clientX);
console.clear();
console.log("Cursor is " + e.clientX);
console.log("Element is" + slider.style.left);
}
})
function updateSliderPosition(value) {
let box = container.getBoundingClientRect();
slider.style.left = value - box.left + "px";
}
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.
I'm also using pointer events over mouse events. These work the same as mouse events but also will work for touch devices. They also allow the use of setPointerCapture, which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler). You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.
let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;
let lastX = 0;
let thisX = 0;
let leftEdge = 0;
function mouseDownHandler(e) {
lastX = e.clientX;
slider.addEventListener('pointermove', mouseMoveHandler);
slider.setPointerCapture(e.pointerId);
}
function mouseMoveHandler(e) {
thisX = e.clientX;
xDiff = thisX - lastX;
leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
slider.style.transform = `translate(${leftEdge}px)`;
lastX = thisX;
}
function mouseUpHandler(e) {
slider.removeEventListener('pointermove', mouseMoveHandler);
slider.releasePointerCapture(e.pointerId);
}
slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone,
.conttwo {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.contone {
z-index: -11;
}
.conttwo {
z-index: -11111;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: red;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<div id="container" class="Container">
<div class="contone">
<img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
</div>
<div id="slider" class="Slider"></div>
<div class="conttwo">
<img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
</div>
</div>
to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not showing up. Please help to sort this out. Thank you for your help.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
</canvas>
</div>
</body>
</html>
you need to move the .tooltip element out of the canvas element, otherwise it won't display.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);
// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
// Check whether point is inside circle
if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
showtext();
} else {
hidetext();
}
});
function showtext() {
document.getElementById("tooltiptext").style.visibility = 'visible';
}
function hidetext() {
document.getElementById("tooltiptext").style.visibility = 'hidden';
}
.tooltip {
visibility: hidden;
position: absolute;
top: 20px; left: 20px;
}
body {
margin: 0;
}
<canvas id="canvas"></canvas>
<div class="tooltip">
<span id="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
There were two issues:
The manner in which you were applying styles to your canvas were causing its display not to match its internal tracking of the position of the items it contained, so the if condition was not necessarily returning true when the cursor was over where the circle was appearing.
A canvas cannot render and display contents.
As such, the below snippet shows a version of this that works. You'll need to figure out how to position things correctly, but it solves the immediate issue.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
</canvas>
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">
blah
</span>
</div>
</div>
</body>
</html>
The problem was that you set the width and height of the canvas as the 100% of the parent in the css.
You need to set the canvas's width and height attribute instead.
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
<canvas id="canvas" width="200" height="200">
I trying write my first site and I don't know why js file doesn't work.
Maybe you can repair that. I can't write that, because I'm learning to program.
HTML here
<head>
<script type="text/javascript">
</script>
<meta charset="utf-8" />
<title>Makoto Designer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<header>
<div id="hed">
<img src="/img/logo_okr.png" class="logo">
<div class="biale"></div>
<div class="czarne"></div>
<img src="/img/md.png" class="md">
</div>
</header>
</body>
CSS here
.logo {
display: inline-block;
position: absolute;
width: 155px;
height: 155px;
left: 50px;
top: 50px;
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.4));
cursor: pointer;
object-fit: cover;
z-index: 3;
}
.md {
display: inline-block;
position: absolute;
width: 532px;
height: 190px;
left: 230px;
top: 18px;
filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.4));
}
.czarne {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #00000099;
z-index: 1;
}
.biale {
position: absolute;
background-color: #FFFFFF;
left: 125px;
top: 55px;
width: 1px;
height: 140px;
z-index: 2;
transition: 2s;
transition-timing-function: ease-out;
}
.biale.on {
position: absolute;
background-color: #FFFFFF;
left: 125px;
top: 50px;
width: 650px;
height: 155px;
z-index: 2;
border-bottom-right-radius: 75px;
border-top-right-radius: 75px;
filter: drop-shadow(0px 7px 10px #00000066);
}
JavaScript here
function handleClicks() {
var logo = $(".logo"),
biale = $(".biale"),
czarne = $(".czarne"),
var menu = {
open: () => {
biale.addCalss("active");
czarne.fadeTo("fast", 1, () => czarne.show());
},
close: () => {
biale.removeClass("active");
czarne.fadeTo("fast", 0, () => czarne.hide());
}
};
logo.click(() => menu.open());
czarne.click(() => {
menu.close();
});
}
addEventListener('DOMContentLoaded', () => {
let biale = $(".biale")[0]
let logo = $(".logo")[0]
let toggle = false
logo.addEventListener('clock', () => {
toggle = !toggle
biale.className = toggle ? 'on' : ""
})
})
I want biale to slide behind the logo and then hide, but wen i click logo nothing happens. Why it not working?
mehh
Put your <script> in the bottom of body tag (not in head) - and also put semiclon after czarne = $(".czarne"); (not comma ,)
In your CSS, change .biale.on to .biale.active
You may want to look at this for help with your HTML file: https://www.w3schools.com/html/html5_intro.asp
Some changes you'll want to do:
Add doctype
Remove that empty js script in head for cleanliness. I'm assuming your JavaScript is going to be in the javas.js file.
Here's what your HTML could look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Makoto Designer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<header>
<div id="hed">
<!-- Don't forget to close your img tags like this. Do the second one too. -->
<img src="/img/logo_okr.png" class="logo" />
<div class="biale"></div>
<div class="czarne"></div>
<img src="/img/md.png" class="md">
</div>
</header>
</body>
<!-- Also close html at the end -->
</html>
In your javas.js file, try making these changes:
Remove the , comma at the end of the last var declaration. I eliminated the shortcut altogether below.
There was a typo with addClass.
I'm not sure you need the addEventListener. jQuery allows you to use its document ready feature to call your handleClicks function on load in order to set up the fades.
Here's an example:
function handleClicks() {
var logo = $(".logo");
var biale = $(".biale");
var czarne = $(".czarne");
var menu = {
open: () => {
biale.addClass("active");
czarne.fadeTo("fast", 1, () => czarne.show());
},
close: () => {
biale.removeClass("active");
czarne.fadeTo("fast", 0, () => czarne.hide());
}
};
logo.click(() => menu.open());
czarne.click(() => {
menu.close();
});
}
$(document).ready(function(){
handleClicks();
});
Well this is a kind of a hard question to ask, but i guess you will see why:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<style type="text/css">
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="player"></div>
<div class="obstacle"></div>
<script>
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y-75);
$("#player").css('margin-left', X-75);
//alert(X+" "+Y);
});
</script>
</body>
</html>
This code should create a div with an id of "player", then place it wherever your cursor currently is. (that works just fine) But then there is the "obstacle" which for some reason moves along with the player, although it shouldn't.
Why is this happenning? Could someone explain it to me?
A picture:
https://jsfiddle.net/fq4y4r41/
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('top', Y-75);
$("#player").css('left', X-75);
//alert(X+" "+Y);
});
and css
#player {
position: absolute;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
you changing margins which affects that block size, so bottom blocks moving too. try to change top and left instead and set it's position to absolute
that way you move that element away from flow - https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Since you want to move a block based on mouse movement, I think you might have to use a different position value, like absolute
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event) {
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y - 75);
$("#player").css('margin-left', X - 75);
//alert(X+" "+Y);
});
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="player"></div>
<div class="obstacle"></div>
Demo: Fiddle
You only need to change the css
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
here is the jsFiddle. Checkit out :)