0

I am trying to create a jQuery script that allows a user of my webpage to select points on a exploded diagram where damage has occurred. I want it to show a cross when clicked, I have gotten it to work with this code:

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#vehSelImg").on("click", function(event) {
            var x = event.pageX - this.offsetLeft;
            var y = event.pageY - this.offsetTop;
            jQuery('#vehSelData').append("X Coord: " + x + ", Y Coordinate: " + y + "\n");
            var cross = "<img style='position:absolute; height:20px; top:" + y + "px; left:" + x + "px;'" + " src='/content/x.png'/>"
            jQuery('#vehSelDiv').append(cross);
        });
    });
</script>

However when I add this to my webpage with headers etc the crosses appear in the wrong location with an offset of the above elements, I know it's to do with event.pageX & Y but how do I account for other elements so that it overlays exactly where the user clicked?

EDIT: I've now came to a solution but I'm not a fan of the workaround if anyone can assist?

jQuery(document).ready(function(){
        const coordAr = new Array();
        

        jQuery("#vehSelImg").on("click", function(event) {
            var elemRect = document.getElementById('vehSelImg').getBoundingClientRect();
            var x = event.pageX - this.offsetLeft;
            var y = event.pageY - this.offsetTop;
            var offsetX = x + Math.round(elemRect.left) - 25;
            var offsetY = y + Math.round(elemRect.top) - 25;
            console.log(elemRect);
            coordAr.push(x+", " + y);
            jQuery('#vehSelData').append("X Coord: " + offsetX + ", Y Coord: " + offsetY + "\n");
            var cross = "<img style='position:absolute; height:20px; top:" + offsetY + "px; left:" + offsetX + "px;'" + " src='/content/x.png'/>"
            jQuery('#vehSelDiv').append(cross);
        });
        jQuery('button').on("click", function(event) {
            console.log(coordAr);
            jQuery('#vehSelData2').text(coordAr);
        });
    });

Thanks for your time!

Curtis

Curtis Mahadevan
  • 1
  • 1
  • [offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) *returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent, **the closest positioned ancestor element**.* - so it's your use of .offsetLeft/.offsetTop that's the issue. – freedomn-m Aug 04 '22 at 16:04
  • As tagged [tag:jquery], did you try `$(this).offset().top`? [.offset()](https://api.jquery.com/offset/) – freedomn-m Aug 04 '22 at 16:05
  • Use this answer for vanilla javascript: [retrieve the position of an element](https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element) – freedomn-m Aug 04 '22 at 16:07
  • @freedomn-m it produces same result, if I've understood how to implement what you are suggesting correctly var x = event.pageX - jQuery(this).offset().left; var y = event.pageY - jQuery(this).offset().top; – Curtis Mahadevan Aug 04 '22 at 16:30
  • @freedomn-m I guess if I could find out the position of the top left I could use that to offset my calc to then show the correct position? but I would then struggle to make a backend system that shows my technician who's producing quotes on a simple image for him rather than coords – Curtis Mahadevan Aug 04 '22 at 16:31

0 Answers0