I am doing drag and drop the HTML5-way (i.e. no jQuery draggable/droppable). I have a drop target (a div) that is partially obscured by another, absolutely positioned div, like so:
<div id="drop-target" style="width:100%; height:500px; background-color:blue;" />
<div id="obscuring-div" style="width:40%; height:150px; position:absolute; top:10px; left: 10px; background-color:red;" />
When I drop items on the absolutely positioned obscuring-div, is there any way to make the drop event trigger on drop-target instead of obscuring-div?
The comments from Pete led me to a javascript solution for forwarding click events through layers, and I could do something similar for drop events. For future reference, here's the code:
var element = $('#drop-target');
// This element should be droppable
element.on('dragover', function (event) {
event.preventDefault();
});
// This element should be droppable
element.on('dragenter', function (event) {
event.preventDefault();
});
element.on('drop', function (event) {
// Find position of drop event
var xPos = event.originalEvent.clientX,
yPos = event.originalEvent.clientY;
// Temporarily hide this element
element.hide();
// Find the element that is the real drop target
var dropTargetBelow = $(document.elementFromPoint(xPos, yPos));
// Trigger the drop event on real drop target
dropTargetBelow.trigger(event);
// Show this element again
$(this).show();
});
This also works when the elements are stacked, for example if there are three obscuring divs in front of the drop target.
Just for the record: a similar approach using the elementsFromPoint method and the native dispatchEvent:
someHandler(event): {
let elements = document.elementsFromPoint(event.clientX, event.clientY);
let target = elements.find(e => e.matches('#obscuring-div'));
target.dispatchEvent(new DragEvent('drop', {
// anything you need to pass; works without that in the simplest case
}));
}
Related
So I'm trying to make a code that allows me to change the image once I hover over it.
The initial code works. But I have 72 other images to go through with this feature. I'm trying to call each one individually so I don't have to repeat so much code.
I want a simple html code like
<img id="seal" src="img/seal/dantalion.png" onmouseover="rollover(dantalion)"
onmouseout="rollaway(dantalion)" />
<img id="seal" src="img/seal/vassago.png" onmouseover="rollover(vassago)"
onmouseout="rollaway(vassago)" />
Here is the code that works.
function rollover(img) {img.src = "img/seal/hover/vassago.png";}
function rollaway(img) {img.src = "img/seal/vassago.png";}
Here is what I want to do. Keep in mind please, I'm new to this sort of thing.
function rollover() {
dantalion.src = "img/seal/hover/dantalion.png";
vassago.src = "img/seal/hover/vassago.png";
}
function rollaway() {
dantalion.src = "img/seal/dantalion.png";
vassago.src = "img/seal/vassago.png";
}
How do I individually call the object in the HTML code?
This is a simple solution to your problem. On mouseover of the wrapper div #images we check if you are hovering an image and if so, update the image src with the hover url.
On mouseout or if you hover on a different image the images are reset back to the original src
var images = document.getElementById('images');
var prevEl;
function resetImages() {
if (prevEl) {
prevEl.src = prevEl.src.replace('/hover', '');
prevEl = null;
}
}
images.addEventListener('mouseover', function(e) {
resetImages();
if (e.target && e.target.nodeName == "IMG") {
prevEl = e.target;
e.target.src = e.target.src.replace('/seal', '/seal/hover');
}
});
images.addEventListener('mouseout', resetImages);
<div id="images">
<img src="img/seal/dantalion.png">
<img src="img/seal/vassago.png">
</div>
Here's an example using event delegation. I've tried to use only core JS APIs because you didn't mention any libraries but if you were using a library there's a good chance it would be able to do some of this for you.
document.body.addEventListener('mouseover', function(ev) {
var target = ev.target,
cls = target.classList;
if (!cls.contains('seal')) {
return;
}
cls.add('seal-over');
target.innerHTML = target.innerHTML.replace('/seal/', '/seal/hover/');
});
document.body.addEventListener('mouseout', function(ev) {
var target = ev.target,
cls = target.classList;
if (!cls.contains('seal')) {
return;
}
cls.remove('seal-over');
target.innerHTML = target.innerHTML.replace('/hover', '');
});
.seal {
border: 1px dotted #777;
height: 70px;
margin: 10px;
width: 200px;
}
.seal-over {
background: #eee;
}
<div class="seal">img/seal/dantalion.png</div>
<div class="seal">img/seal/vassago.png</div>
While my example changes the innerHTML you would change the src instead - I didn't have your images so I couldn't easily use img tags. The id attribute has to be unique so I've changed it to using a class instead. Adding the seal-over class isn't required, I just thought it made the example more interesting: you'd probably use a CSS :hover pseudo-class for that if this were real code.
One of many guides to delegation, you can find others with a quick search online:
https://davidwalsh.name/event-delegate
The idea is to add a single listener on an element higher up the tree. Events propagate up so you can react to events on descendent elements. The event target refers to the element on which the actual event occurred. The code checks whether this element is one of the elements we care about and then makes the changes accordingly.
I have the following code:
layoutOverlaysBldg = $("#layout-overlays-bldg")
layoutOverlaysBldg.on("click", "div", function(event) {
var floor;
console.log("floornum: " + this.dataset.floornum);
floor = parseInt(this.dataset.floornum);
...
$("#choose-floor").fadeOut();
$("#choose-apt").fadeIn();
});
later - based on data I'm getting back from the DB - I want to remove some of the .on("click", "div", ...) from only some of the divs. I already have the selector that is getting the right divs but I cannot figure out how to remove the click event. I have tried .off("click") after selecting the right div but it has no effect.
This issue here is because you are using a delegated event. You can add or remove the event for all child elements, but not individual ones given your div selector.
With that in mind the easiest way to do what you need is to add the event based on a class, then add and remove that class on the children as needed. Something like this:
layoutOverlaysBldg = $("#layout-overlays-bldg")
layoutOverlaysBldg.on("click", "div.clickable", function(event) {
// your code...
});
You can then enable/disable the event on the child div by adding or removing the .clickable class.
You can try like this :
Example :
<div id="test">
<div id="first">first</div>
<div id="second">second</div>
</div>
<div onclick="unbindSecondDiv();">UNBIND</div>
<script>
function unbindSecondDiv()
{
test = $("#second")
test.unbind("click");
alert('Selected Area Click is Unbind');
}
$(document).ready(function(){
//BIND SELECTED DIV CLICK EVENT
test = $("#test > div")
test.bind("click" , function(event) {
alert($(this).attr('id'));
});
});
</script>
In the above example , selected DIV elements click event is bind.
And after execute function unbindSecondDiv() , second DIV click event will be unbind.
Have a try , may helps you.
I am implementing an User Interface for a project I'm working on and can be found here : Toobrok
Each time the mouse of the user enters a div, a class is added to this div to highlight it, I use the stopPropagation() method to restrict the highlighting to the div whose z-index is higher (the top div in the z axis).
However, sometimes, my user needs to select an element hidden by another one, when the dimensions of the 2 elements are different, and if the bottom div is larger, he can find some points of the bottom div not hidden by the top one, but when the dimensions are the same, I would like the user to be able to press a key to change the depth (on the z-axis) of his selection.
The relevant code is given below (in CoffeeScript), but a javascript solution would also help me:
Ui.bind = (elements, index) ->
ids = Ui.getIdSelector(elements)
$(ids).attr("centroid", index)
$(ids).mouseover (event) ->
event.stopPropagation()
Ui.highlight $(ids)
$(ids).mouseout (event) ->
event.stopPropagation()
Ui.resetHighlight $(ids)
I hope the question is clear and looking forward to your answer.
This is an example of HTML to consider :
<!DOCTYPE html>
<html>
<head>
<title> Sample page </title>
</head>
<body>
<div id="container">
<div id="child1">Some text...</div>
</div>
</body
</html>
And the related css :
#container {
height: 200px;
width: 500px;
}
#child1 {
height: 90%;
width: 90%;
}
When the mouse enters the child1 element, this element is highlighted, I want the container element to highlight when the user press a specific key.
I could use the JQuery parent() function to select that element on this example, but I am not sure it is a good solution, sometimes, the parent can have a size of 0px and and then a mouseover on this element would not be consistent. I want to select the element normally selected by Javascript if I do not use the stopPropagation() event.
I actually just found something that might help :
How to undo event.stopPropagation in jQuery?
But I cannot use that in my case... Because my condition is another user action, and I cannot synchronously wait for an user to do something.
I started writing code but then decided to leave implementation to you. Here is the text explanation:
At some point of time (probably when user press button to cycle through all hovered elements) you have to find all candidates for highlighting. There is no other way to do it rather than manually loop through all your elements and check if mouse position is inside their bound rect. You can get mouse coordinates from argument in mouseover callback. Save all these hovered elements in some array.
Next, you have to manually choose which element to highlight. Just highlight the first element in saved array and move the element to the end of array. You also may want to increase this element z-index and add callback for mouseout to this element.
Hope it helps, feel free to ask if you need more details.
You could use the CSS property pointer-events to make the child insensitive. Then events will be targeted to the element displayed below. For simple highlighting you should use pure CSS, however, jQuery can be helpful not to highlight the parent element as well while child is hovered without Ctrl.
Some example (also uploaded to JSFiddle, click into the output pane to make it responsive for keyboard events):
<div id="container1" class="container">
<div id="child1" class="child">Some text...</div>
</div>
div { border:1px dashed red; } /* for demo */
.container
{ height: 200px;
width: 500px;
}
.child
{ height: 90%;
width: 90%;
}
.insensitive
{ pointer-events:none;
}
.container:hover:not(.no-hilight),
.child:hover
{ background-color:yellow;
}
/* other color for demo */
.child:hover{ background-color:green; }
// make events passthrough child when <Ctrl> is held down
$(document).on('keydown keyup', function(ev) {
if (ev.key === 'Control') // for performance
$('.child')[ev.ctrlKey?'addClass':'removeClass']('insensitive');
});
// don't hilight container when child is hovered
$('.child').on('mouseover', function(ev)
{
$('.container').addClass('no-hilight');
});
// never suppress hilight when container is hovered directly
$('.container').on('mouseover', function(ev)
{ if(ev.target === ev.currentTarget)
$('.container').removeClass('no-hilight');
});
// just test which element a click is targeted to
$(document).on('click', function(ev)
{ console.log('click:', ev.target);
});
var preId = 0;
function makeBlack(id)
{
if(id)
{
$('#'+id).css('border-color','black');
}
}
function makered(id)
{
$('#'+id).css('border-color','red');
}
$(document).ready(function(){
$('div').mouseout(function() {
var currentid = this.id;
makeBlack(currentid);
preId = currentid;
});
$('div').mouseleave(function() {
var currentid = this.id;
makeBlack(currentid);
preId = currentid;
});
$('div').mouseover(function() {
var currentid = this.id;
makeBlack(currentid);
makered(preId);
preId = currentid;
});
$('div').mouseenter(function() {
var currentid = this.id;
makered(currentid);
preId = currentid;
});
});
Have you tried something like this for the CSS?
#container.hover{
height: 200px;
width: 500px;
//add a background-color to that element since its a div element
//background-color: (colour)
}
i should hope that the div element would automatically highlight the container div with whichever color you have selected
If the dom contains the following nodes:
<span id="one_element"></span>
<div id="the_other_element"></div>
how to call some function in the event when the mouse cursor is out of the one element but not over the other element? Is there a method?
(the one element may be either block-level or inline-level, positioned static, relative, or absolute; the other element is positioned absolute in relation to the document and may overlay the one element.)
If you are not using any JS Library you could use global state variables like this:
<script>
var theOtherElementCursor = false;
function myEvent() {
if (!theOtherElementCursor) {
// Do something here!
}
}
</script>
.
.
.
<span id="one_element" onMouseOut="myEvent()"></span>
<div id="the_other_element"
onMouseOver="theOtherElementCursor = true;"
onMouseOut="theOtherElementCursor = false;"></div>
I'm using JavaScript to hide an image and show some text thats hidden under it. But, when the text is shown if you scroll over it, it fires the mouseout event on the container, that then hides the text and shows the image again, and it just goes into a weird loop.
The html looks like this:
<div onmouseover="jsHoverIn('1')"
onmouseout="jsHoverOut('1')">
<div id="image1" />
<div id="text1" style="display: none;">
<p>some content</p>
<p>some more content</p>
</div>
</div>
And the javascript (It uses scriptaculous):
function jsHoverIn(id) {
if(!visible[id]) {
new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
visible[id] = true;
}
}
function jsHoverOut (id) {
var scope = Effect.Queues.get(id);
scope.each(function(effect) { effect.cancel(); });
new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
visible[id] = false;
}
This seems really simple, but i just cant wrap my head around it.
I'd give the container div:
position: relative;
and add a third div in the container (should be the last child of the container) with:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
and catch the mouseover and mouseout events on this div instead.
Because it has no child elements, you shouldn't get spurious mouseover and mouseout events propagating to it.
Edit:
What I believe happens, is that when the cursor moves from a parent element onto a child element, a mouseout event occurs on the parent element, and a mouseover event occurs on the child element. However, if the mouseover handler on the child element does not catch the event and stop it propagating, the parent element will also receive the mouseover event.
It sounds like what you really want is mouseenter/mouseleave (IE proprietary events, but easy to emulate):
// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
var rel = e.relatedTarget, cur = e.currentTarget;
if (rel && rel.nodeType == 3) {
rel = rel.parentNode;
}
if(
// Outside window
rel == undefined ||
// Firefox/other XUL app chrome
(rel.tagName && rel.tagName.match(/^xul\:/i)) ||
// Some external element
(rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
) {
e.currentTarget.fire('mouse:' + this, e);
return;
}
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));
// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);
Alternatively, patch prototype.js and use mouseenter and mouseleave with confidence. Note that I've expanded the check for leaving the window or entering XUL chrome; this seemed to fix some edge cases in Firefox for me.
Shouldn't the onmouseover event be on the image div and the onmouseout event be on the text div?
I'm not sure if this would fit with the rest of your styling, but perhaps if you changed the css on the text div so it was the same size as the image, or fixed the size of the outer div, then when the mouseover event fired, the size of the outer div wouldn't change so much as to cause the mouseout event.
Does this make sense?
This may not be the best solution but you could set a global boolean variable that would be accessible to both methods that would just specify if the last action was HoverIn or HoverOut. You could use this boolean variable to determine if the code should run or not.
if (bWasHoverIn){
...
}
Try using
onmouseenter instead of onmouseover and
onmouseleave instead of onmouseout.