Cannot swap divs from top to bottom. Otherwise works - javascript

I haven't been able to make this code work. From bottom to top, it seems to work perfectly fine - that is, I drag a div element and then drop it on top of another, and it does what it is intended to do. However, when I try to swap an element with another below it, no swap occurs, and that's what's been baffling me most. Could you please shed some light on why it's not working?
let thing1 = document.getElementById("thing1");
let thing2 = document.getElementById("thing2");
let thing3 = document.getElementById("thing3");
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.id);
console.log(ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var thing = document.getElementById(ev.dataTransfer.getData("id"));
var thingParent = thing.parentElement;
var tgt = ev.currentTarget;
console.log(thing)
console.log(tgt)
thingParent.replaceChild(thing, tgt);
thingParent.appendChild(tgt);
}
thing1.addEventListener("drop", drop);
thing2.addEventListener("drop", drop);
thing3.addEventListener("drop", drop);
thing1.addEventListener("dragover", allowDrop);
thing2.addEventListener("dragover", allowDrop);
thing3.addEventListener("dragover", allowDrop);
thing1.addEventListener("dragstart", drag);
thing2.addEventListener("dragstart", drag);
thing3.addEventListener("dragstart", drag);
.thing {
width: 100%;
height: ;
background: red;
}
.drag {
background: red;
height: 50px;
margin: 10px;
text-align: center;
}
#thing1 {
background: yellow;
}
#thing2 {
background: blue;
}
<div id="thing">
<div id="thing1" class="drag" draggable="true">1</div>
<div id ="thing2" class="drag" draggable="true">2</div>
<div id ="thing3" class="drag" draggable="true">3</div>
</div>

You are always appending the div to be replaced at the bottom of the page, which means you can never actually replace the div at the bottom. I added timeouts to your code to show you what is happening here. (Note that I added a removeChild call, but this happens automatically before the operation replaceChild, so I just made it explicit to enhance your ability to visualize what is happening.)
The solution isn't simple, because whether the choice to insert before or after an element is going to depend on whether you are coming from below or above. One easy solution is swap the two elements out for each other. This can be done by cloning one, as shown below:
function drop(ev) {
ev.preventDefault();
var thing = document.getElementById(ev.dataTransfer.getData("id"));
var tgt = ev.currentTarget;
if (thing && tgt) {
var thingParent = thing.parentElement;
var newTgt = tgt.cloneNode(true);
addListeners(newTgt);
thingParent.replaceChild(newTgt, thing)
thingParent.replaceChild(thing, tgt);
}
}
function addListeners(el) {
el.addEventListener("drop", drop);
el.addEventListener("dragover", allowDrop);
el.addEventListener("dragstart", drag);
}
Even if you decide you actually want a different behavior, knowing how to swap two elements should give you the tools to get whatever behavior you want.

Related

how do i trigger onMouseEnter for elements behind other elements

I'm trying to trigger mouseEnter event when mouse is on top of multiple elements.
I want both mouseEnter events to trigger when the mouse is at the center, and preferably for both to turn yellow.
Run the code snippet below for an example:
<!DOCTYPE html>
<html>
<head>
<style>
div:hover {
background-color: yellow;
}
div {
width: 100px;
height:100px;
background:green;
border: 2px solid black;
}
.second {
transform:translateX(50%) translateY(-50%);
}
</style>
<script>
function onhover(){console.log('hovered')}
</script>
</head>
<body>
<div onmouseenter=onhover()></div>
<div onmouseenter=onhover() class='second'></div>
</body>
</html>
According to MDN, the mouseenter event does not bubble, whereas the mouseover event does. However, even if it DID bubble, your elements currently have no relation to one another, thus the mouse events are captured by the upper element.
One possible way around this is with the amazing elementsFromPoint function in JavaScript, which makes quick work of solving your issue:
// Only the IDs of the elments you are interested in
const elems = ["1", "2"];
// Modified from https://stackoverflow.com/a/71268477/6456163
window.onload = function() {
this.addEventListener("mousemove", checkMousePosition);
};
function checkMousePosition(e) {
// All the elements the mouse is currently overlapping with
const _overlapped = document.elementsFromPoint(e.pageX, e.pageY);
// Check to see if any element id matches an id in elems
const _included = _overlapped.filter((el) => elems.includes(el.id));
const ids = _included.map((el) => el.id);
for (const index in elems) {
const id = elems[index];
const elem = document.getElementById(id);
if (ids.includes(id)) {
elem.style.background = "yellow";
} else {
elem.style.background = "green";
}
}
}
div {
width: 100px;
height: 100px;
background: green;
border: 2px solid black;
}
.second {
transform: translateX(50%) translateY(-50%);
}
<div id="1"></div>
<div id="2" class="second"></div>
I think that you can not without javascript, and with it it's a bit tricky, you have to check on every mousemove if the coordinates of the mouse are in de bounding box of the element, this fill fail with elements with border radius but for the others it's ok
<script>
var hovered=[]
function addHover(element){hovered.push(element)}
function onhover(element){console.log("hovered",element)}
function onCustomHover(e){
hovered.forEach((el,i)=>{
let bounds=el.getBoundingClientRect()
if (e.pageX > bounds.left && e.pageX < bounds.bottom &&
e.pageY > bounds.top && e.pageY < bounds.right ) {
onhover(i);
}
})
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2" class='second'></div>
<script>
document.body.addEventListener('mousemove', onCustomHover, true);//{capture :false});
addHover(document.getElementById("div1"))
addHover(document.getElementById("div2"));
</script>
I would appreciate if you could rate the answer if that was usefull to you because I can not make comments yet <3
It will be easier to change your code a little bit.
ex. Add to your div elements class box.
Add to your styles class with name hovered which will look like:
.hovered {
background-color: yellow;
}
Into JS(between script tag) add event listeners (code not tested, but idea is shown), also move script to place before closing body tag:
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
box.addEventListener('mouseover', () => {
boxes.forEach(b => b.classList.add('hovered'));
});
box.addEventListener('mouseout', () => {
boxes.forEach(b => b.classList.remove('hovered'));
});
});
The problem is that elements are blocking the mouse such that elements in the background do not receive the event. With the exception that events bubble to the parent.
Given that you could change your markup slightly to get this effect.
First add a class to your boxes so we can easily find them in JavaScript:
<div class="box"></div>
<div class="box second"></div>
Then adapt the CSS such that this background change is toggled with a class instead:
.box.hovered {
background-color: yellow;
}
And then the JavaScript:
// Get all box elements
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
// For each box attach a listener to when the mouse moves
box.addEventListener('mousemove', (ev) => {
// Get the position of the mouse
const { x, y } = ev;
boxes.forEach(b => {
// for each box get it's dimension and location
const rect = b.getBoundingClientRect();
// check if the pointed is in the box
const flag = x > rect.left && x < rect.right && y > rect.top && y < rect.bottom;
// toggle the class
b.classList.toggle('hovered', flag);
});
});
});
This can be improved a lot, especially if you have more boxes by getting the rectangles beforehand and then using the index in the forEach to link the box to it's rectangle:
const boxes = document.querySelectorAll('.box');
const rects = [...boxes].map(box => box.getBoundingClientRect());
Another improvement is to use the fact that events bubble to the parent, that means you could wrap all boxes in one parent and only add a listener to this parent.

Let link follow clippath

I am trying to figure out how to display a clickable link only inside the area of the existing clip-path. And also utilize the existing OffsetX value.
<style>
.mouse {
background-color: aqua;
}
.img {
background-color: black;
}
</style>
<div class="wrap">
<div class="img"></div>
<div class="mouse">
<p id="anchor"></p>
</div>
</div>
<script>
let main = document.querySelector('.wrap');
let mouse = document.querySelector('.mouse');
let text = "Text link";
let result = text.link("www.stackoverflow.com");
document.getElementById("anchor").innerHTML = result;
main.addEventListener('mousemove', (e) => {
mouse.style.clipPath = `circle(15em at ${e.offsetX}px`;
});
</script>
If I understand you correctly, you want the link to move along with the clip path.
I would do it by so:
mouse.style.clipPath = `circle(5em at ${(e.clientX - main.getBoundingClientRect().x)}px`;
document.getElementById("anchor").style = "margin-left: " + (e.clientX - main.getBoundingClientRect().x) + "px";
This does not utilize the offsetX, but as you move the link, the offsetX would also move along (so it would stay the same), unless you disable pointer events for the link (which might not be intented).

How to know when a particular button is clicked in Javascript?

I'm making a function that displays a modal, and the modal has two buttons. I want this function to wait until one of the two buttons has been clicked, and return a value that corresponds to which button is clicked.
Here's a sample code that I came up with:
function myFunc()
{
var val=0;
buttonA = document.getElementById('buttonA');
buttonB = document.getElementById('buttonB');
buttonA.onclick = function(){
//do something
val = 1;
}
buttonB.onclick = function(){
//do something
val = 2;
}
while(val == 0);
return val;
}
The problem in this code is that the page becomes unresponsive because of the infinite loop, hence it isn't possible to change the value of val once initialised.
To be more precise, I want the main thread (on which myFunc is being implemented) to sleep until one of the other two threads (each of buttonA and buttonB) is clicked.
Is there some other work-around for this ? Please answer in Javascript only (no jQuery). Thanks.
Try something more like this:
function myFunc()
{
buttonA = document.getElementById('buttonA');
buttonB = document.getElementById('buttonB');
buttonA.onclick = function(){
//do something
differentFunc(1)
}
buttonB.onclick = function(){
//do something
differentFunc(2)
}
}
This is a different way to make the function more versatile (edited per your comment):
function myFunc(callback)
{
buttonA = document.getElementById('buttonA');
buttonB = document.getElementById('buttonB');
buttonA.onclick = function(){
//do something
callback(1)
}
buttonB.onclick = function(){
//do something
callback(2)
}
}
and call it like
myFunc(function(result) {
// do stuff with result
}
Javascript is naturally single-threaded. Any code that waits infinitely like that will cause a hangup and disallow input. There are ways to write async functions, namely using Promises like I did for a minute there, but it's generally easier to make your code work synchronously.
If I understand the OP's purpose is to create a modal with 2 choices like a confirm()? But for some reason confirm() isn't suitable? So a value on each button and it waits for user interaction? Unless I'm missing something fairly important, I have made a dynamically generated modal (no manual markup) that has 2 buttons. The purpose and result elude me so I left it with one event listener and a function with a simple ternary condition to which the alerts can be replaced by appropriate statements or expression at OP's discretion.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.modal {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background:transparent;
}
.ui {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: table-cell;
border: 3px ridge grey;
border-radius: 6px;
}
button {
font-size: 24px;
}
</style>
</head>
<body>
<script>
var frag = document.createDocumentFragment();
var modal = document.createElement('div');
var ui = document.createElement('div');
var on = document.createElement('button');
var off = document.createElement('button');
modal.className = 'modal';
ui.className = 'ui';
on.id = 'on';
on.textContent = 'On';
off.id = 'off';
off.textContent = 'Off';
frag.appendChild(modal);
modal.appendChild(ui);
ui.appendChild(on);
ui.appendChild(off);
ui.addEventListener('click', status, false);
function status(e) {
var tgt = e.target.id;
tgt === 'on' ? alert('ON!') : alert('OFF!');
}
document.body.appendChild(frag);
</script>
</body>
</html>

Changing parent css on child focus (without breaking parent:hover css rules)

I made a menu on html (on the side and 100% heigth, expandeable as in android holo)
<div id="menu">
<button class="menubutton"></button>
<button class="menubutton"></button>
</div>
The menu normally remains transparent and with a short width:
#menu {
background-color: transparent;
width: 8%;
}
The idea was to expand and color it on hover. It was easy:
#menu:hover {
background-color: blue;
width: 90%;
}
There is no problem untill here. I need the same effect on focus. There is no way in css to change parent css on child focus (neither hover by the way, but it is not needed, cuase i can use the entire menu hover).
So i used a script:
var menubuttonfocus = document.getElementsByClassName("menubutton");
for (i=0; i<menubuttonfocus.length; i++) {
menubuttonfocus[i].addEventListener("focus", function() {
menu.style.backgroundColor = "blue";
menu.style.width = "90%";
});
menubuttonfocus[i].addEventListener("blur", function() {
menu.style.backgroundColor = "transparent";
menu.style.width = "8%";
});
}
The script works just fine, the problem is that when you trigger those events by focusing a button, the css of #menu:hover changes somehow and #menu does not change when hovering. I tried to solve this by doing something similar but with hover instead of focus:
menu.addEventListener("mouseenter", function(){
menu.style.backgroundColor = "blue";
menu.style.width = "90%";
});
menu.addEventListener("mouseout", function(){
menu.style.backgroundColor = "transparent";
menu.style.width = "8%";
});
This works somehow, but it is REALLY buggy.
I tried also to select "#menu:hover,#menu:focus", but it doesn't work because the focus is on the button elements and not in #menu.
Please avoid jquery if posible, and i know it's asking for too much but a pure css solution would be awesome.
Probably helpful info: html element are created dinamically with javascript.
I can show more code or screenshot, you can even download it (it is a chrome app) if needed: chrome webstore page
Thanks.
SOLVED: I did what #GCyrillus told me, changing #menu class on focus via javascript eventListener. .buttonbeingfocused contains the same css as "#menu:hover". Here is the script:
var menubuttonfocus = document.getElementsByClassName("menubutton");
for (i=0; i<menubuttonfocus.length; i++) {
menubuttonfocus[i].addEventListener("focus", function() {
menu.classList.add("buttonbeingfocused");
});
menubuttonfocus[i].addEventListener("blur", function() {
menu.classList.remove("buttonbeingfocused");
});
}
if the problem is what I think it is - you forgetting about one thing:
When you focusing / mouseentering the .menubutton - you are mouseleaving #menu and vice-versa - so your menu behaviour is unpredictible because you want to show your menu and hide it at the same time.
solution is usually setting some timeout before running "hiding" part of the script, and clearing this timeout (if exist) when running "showing" part.
it will be something like this:
var menuTimeout;
function showMenu() {
if (menuTimeout) clearTimeout(menuTimeout);
menu.style.backgroundColor = "blue";
menu.style.width = "90%";
}
function hideMenu() {
menuTimeout = setTimeout( function() {
menu.style.backgroundColor = "transparent";
menu.style.width = "8%";
}, 800);
}
//then add your listeners like you did - but put these functions as a handlers - like this:
menu.addEventListener("mouseenter", showMenu);
...
//in addition you need also "mouseenter" and "mouseleave" events handled on .menubuttons

How to bind click event on image added using CSS 'background-image' property in jQuery

Here is my fiddle link
I guess my question is clear by title itself. Still, what I am looking for is an way to bind click event on the image added using css's background-image property.
I know, I could have achieved the similar functionality (of placing image over input field using this way or this way) by simply positioning <img> tag over input box and then handling the required events but that way didn't seem too flexible with input fields of varying width and height or if the wrapping div doesn't have position:relative; as its property.
If adding event on image loaded with background-image is not possible then how to make the later approach more flexible.
Hope I have conveyed my issues clearly.
Thanks.
Something like this appears to also work:
$('.cross').click(function(e) {
var mousePosInElement = e.pageX - $(this).position().left;
if (mousePosInElement > $(this).width()) {
$(this).val('');
}
});
Link to example
So you need to bind the click event to the image but not using an embebed attributte that's really a very good and dificult question by the way.
I know my approach is complicated but is the only I can figure right now.
You can get the image size (widthImage and heightImage) and know the position relatives of one to another (here is a way of calculating a position of an objet relative to anohter:jQuery get position of element relative to another element) you may use it to calculate the position of the input in the whole screen
and try something like this:
$(document).ready(function(){
$('body').on('click', 'input.cross', function (e) {
var widthInput = parseInt($(this).css('width'),10);
var heightInput = parseInt($(this).css('height'),10);
var position = $(this).position();
var top = position.top;
var left = position.left;
var sizesRelativesInPercentage = $(this).css('background-size').split(/ +/);
var widthPorcentage = parseInt(sizesRelativesInPercentage[0],10);
var heightPorcentage = parseInt(sizesRelativesInPercentage[1],10);
var widthImage = (widthInput * widthPorcentage)/100;
var heightImage = (heightInput * heightPorcentage)/100;
var xFinalImageFinish= (left+widthInput);
var yFinalImageFinish = (top+heightInput);
// Fire the callback if the click was in the image
if (e.pageX >= xFinalImageStart && e.pageX <= xFinalImageFinish &&
e.pageY >= yFinalImageStart && e.pageY <= yFinalImageFinish) {
// Prevent crazy animations and redundant handling
$(this).off('click');
alert('click on the image');
//Do whatever you want
}
});
});
This is only an idea...I am trying to make a fiddle about this, hope so :O
As pointed out by #Felix King
Since the image is not an element in the document, it does not trigger
events and you cannot bind a handler to it. You have to use a
workaround.
Here is a possible work-around (in jquery, but could just as easily be POJS).
CSS
.wrapper {
padding: 1px;
display: inline-block;
border: 2px LightGray inset;
}
.wrapperFocus {
border: 2px DarkGray inset;
}
.textInput {
padding: 0;
border:none;
outline: none;
height: 20px;
width: 150px;
}
.cross {
float: right;
height: 20px;
width: 20px;
background-image:url('http://s20.postimg.org/6125okgwt/rough_Close.png');
background-repeat:no-repeat;
background-position: center;
background-size:90%;
cursor: pointer;
}
HTML
<fieldset class="wrapper">
<input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<fieldset class="wrapper">
<input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<fieldset class="wrapper">
<input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<hr>
<button>submit</button>
Javascript
$(document).on("click", "span.cross", function () {
$(this).prev().val("");
}).on("focus", "input.textInput", function () {
$(this).parent().addClass("wrapperFocus");
}).on("blur", "input.textInput", function () {
$(this).parent().removeClass("wrapperFocus");
});
On jsfiddle
Or if you want to do it without the additional CSS and HTML, then this should be cross-browser (POJS as you already have a jquery example).
CSS
.cross {
height: 20px;
width: 150px;
background-image:url('http://s20.postimg.org/6125okgwt/rough_Close.png');
background-repeat:no-repeat;
background-position:right center;
background-size:10% 90%;
z-index: -1;
padding-right: 6%;
}
HTML
<input type="text" class="cross" />
<input type="text" class="cross" />
<input type="text" class="cross" />
<hr>
<button>submit</button>
Javascript
function normalise(e) {
e = e || window.event;
e.target = e.target || e.srcElement;
return e;
}
var getWidth = (function () {
var func;
if (document.defaultView.getComputedStyle) {
func = document.defaultView.getComputedStyle;
} else if (target.currentStyle) {
func = function (t) {
return t.currentStyle;
}
} else {
func = function () {
throw new Error("unable to get a computed width");
}
}
return function (target) {
return parseInt(func(target).width);
};
}());
function isInputCross(target) {
return target.tagName.toUpperCase() === "INPUT" && target.className.match(/(?:^|\s)cross(?!\S)/);
}
function isOverImage(e) {
return (e.clientX - e.target.offsetLeft) > getWidth(e.target);
}
function clearCrossInput(e) {
e = normalise(e);
if (isInputCross(e.target) && isOverImage(e)) {
e.target.value = "";
}
}
document.body.onclick = (function () {
var prevFunc = document.body.onclick;
if ({}.toString.call(prevFunc) === "[object Function]") {
return function (ev) {
prevFunc(ev);
clearCrossInput(ev);
};
}
return clearCrossInput;
}());
On jsfiddle
But if you want the cursor to change when hovered over the position then you will need to do some extra work. Like this (you could just as easily do this with jquery too).
Javascript
function hoverCrossInput(e) {
e = normalise(e);
if (isInputCross(e.target)) {
if (isOverImage(e)) {
e.target.style.cursor = "pointer";
return;
}
}
e.target.style.cursor = "";
}
document.body.onmousemove = (function () {
var prevFunc = document.body.onmousemove;
if ({}.toString.call(prevFunc) === "[object Function]") {
return function (ev) {
prevFunc(ev);
hoverCrossInput(ev);
};
}
return hoverCrossInput;
}());
On jsfiddle
I do something similar by using an <input type="text" ... > immediately followed by an <input type="button">
The button is given a background image and positioned-relative to move it into the text field; essentially...
position: relative;
top: 4px;
right: 1.6em;
height: 16px;
width: 16px;
border: none;
Then I just add a dead-plain click handler to the button, no computations necessary.
The height x width would depend on your image, and you would tweak the top and right to fit your situation.
This fiddle shows it pared down to the bare essentials.

Categories