I am trying to figure out how to have an event listner change the class for multiple items that are stacked on top of each other.
I have a current fiddle here that I am working on, basically when someone clicks the button and hovers an object it changes the class of the object that is hovered. I would like to take this a step further so that when two object are positioned on top of eachother that both objects will be effected. Is there an easy way to do this?
Currently when you click and hover it only effects the top-most element. I would like to effect both the top and bottom element. Any help would be greatly appreciated!
http://jsfiddle.net/Ltdgx363/1/
obj=document.getElementsByTagName("object");var mouseDown = 0;
document.onmousedown = function() {
++mouseDown;
}
document.onmouseup = function() {
--mouseDown;
}
for(i = 0; i < obj.length; i++) {
obj[i].addEventListener("mouseover", colorred ,false);
}
function colorred(){
if(mouseDown>0){
this.className = "red";
}
}
Assuming I understood your question correct, you can do that with jQuery parent() and children(). See my fiddle: http://jsfiddle.net/yu404vf2/2/
Your function basically becomes like:
function colorred(){
if(mouseDown>0){
this.className = "red";
}
$(this).parents().class = "red";
}
This works if objects are stacked like:
<object id="object3">Test3
<object id="object4">Test4</object>
</object>
But not if objects are stacked due to z-index/ position absolute.
If you need the objects below the mouse pointer there is a nice function in javascrtipt called elementFromPoint which you can use like:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
elementMouseIsOver.class="red";
Updated jsfiddle: http://jsfiddle.net/yu404vf2/5/
Hope that helps.
There are many ways of doing this, but assuming you don't want to use a library. I have updated your jsfiddle, but added the comments here.
//find all objects, and create an empty array, to contain the object id's later on.
var r_objects = document.getElementsByTagName('object');
var r_ids = [];
/*
your colorred function,
not using your general mousedown tracker,
but added the mousedown eventListener to your objects.
*/
var colorred = function(obj,addClass){
/*
find the index of your currently clicked element,
to determine if there are any "underneath" it, objects
that are rendered earlier, get a lower index.
*/
oIndex = r_ids.indexOf(obj.id);
/*
loop through the indexes lower and the same as the element
your mouse is on. you can determine the depth here, by not looping
through, but by simply subtracting or adding to the oIndex var, and
using it as a key in your r_objects array. addClass is true or false,
depending on the event, so it also removes the class after your
mouseup event is triggered
*/
for(i = 0; i <= oIndex; i++){
affectedObj = r_objects[i];
if(addClass){
affectedObj.className = "red";
}else{
affectedObj.className = "";
}
};
};
var addListeners = function(){
for(i = 0; i < r_objects.length; i++){
obj = r_objects[i];
obj.addEventListener('mousedown',function(){
colorred(this,true);
});
obj.addEventListener('mouseup',function(){
colorred(this,false);
});
//add the id to the r_ids array
r_ids.push(obj.id);
};
};
addListeners();
http://jsfiddle.net/Ltdgx363/3/
You can determine the "depth" of the affected elements, by playing around with the for loop.