I'm stuck and could really use some assistance!
Hey there, I have a simple question but I seem to be missing a crucial element.
Here's my fiddle where I can detect the clicked item but that's as far as I've gotten:
http://jsfiddle.net/pborregg/w6pbfuae/1/
This is the JavaScript code snippet I'm using:
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
var ul = document.getElementsByClassName('commentlist')[0];
ul.onclick = function(event) {
var target = getEventTarget(event);
alert(target.innerHTML);
};
This is the HTML structure in my application:
<pretty-scroll>
<ul class='commentlist'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</pretty-scroll>
Here's the Stackoverflow post that inspired me to work on this:
Get Clicked <li> from <ul onclick>
What I am aiming for is to determine the central value of the mouse position when it is clicked.
In the image below, you'll see the word "ACCEPTED". When I click on that, I only require the leftmost X/Y position of the li element.
https://i.sstatic.net/0BkDv.png
Each record may contain multiple comments and the clickable area will always be at the word "ACCEPTED". Please note: "Accepted" is just placeholder text and could vary.
I want to find the MIDPOINT of each li element. The starting point for where I want my modal to appear is: transform: translate(40px, 120px); The next li is exactly 125px down the Y-axis, and so forth for subsequent lis.
Considering different viewport sizes like laptops, desktops, large monitors, etc., how can I accurately pinpoint the EXACT location (specifically, dead center) based on the fixed height of the li elements? Let's assume all li elements are 100px high; thus, 50px would be the DEAD CENTER.
Unfortunately, I am unable to modify the existing code and must rely solely on the event passed into my .ts file:
public setModalLocation(xpos: any, ypos: any): void {
console.log("This X:", xpos);
console.log("This Y:", ypos);
//base modal location for first comment(x40,y120)
const ul = document.getElementsByClassName('commentlist')[0] as HTMLElement;
let srcEl;
let tarEl;
let e = window.event;
srcEl = e.srcElement;
tarEl = e.target;
console.log("Target: ", tarEl);
console.log("SrcElement: ", srcEl);
//The xpos and ypos should be x=40 and y=120 for the first comment. Each comment is 125px lower on the y-axis.
//Need to move the modal with the scroll Y of the mousewheel.
//FIXME: THIS IS A STUB and cannot be used for all... this just gets me to the FIRST <li> in the list of comments.
if (xpos !== "50") {
xpos = "50";
}
if (ypos !== "120") {
ypos = "120";
}
this.css.outerWrapper.transform.newxy = "translate(" + xpos + "px" + ", " + ypos + "px)";
this.theMovingModal.style.transform = this.css.outerWrapper.transform.newxy;
}