How to dectect objects' overlaping situations in javascirpt? [closed]

by

Here is how you can calculate clientX and clientY and then the overlapped area. Calculate co-ordinates of click event and you can draw the Overlapped area. Change dimensions according to your HTML.I am showing just for the shake of approach.

$(".rectangle").click(function(event) {
    if((event.clientX>10  && event.clientX<105) && (event.clientY>15 && event.clientY<105)){
    alert('overlaped border');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <svg width="400" height="150">
  <rect class="rectangle" width="300" height="100" style="fill:rgb(25,20,255);stroke-width:8;stroke:rgb(25,0,225)" />
   <rect class="rectangle" width="100" height="150" style="fill:rgb(125,125,0);stroke-width:1;stroke:rgb(70,120,150)" />
</svg>

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. CSS Propertie change OnClick [closed]
  3. My website doesn’t load jQuery [closed]
  4. My JS is not working (chat application)
  5. CSS for background changing over time [duplicate]
  6. How to apply !important using .css()?
  7. Make header and footer files to be included in multiple html pages
  8. Turn a number into star rating display using jQuery and CSS
  9. Instead of using prefixes I want to ask site visitors to upgrade their browser
  10. How can I remove a style added with .css() function?
  11. animating addClass/removeClass with jQuery
  12. What is the cleanest way to disable CSS transition effects temporarily?
  13. Parsing CSS in JavaScript / jQuery
  14. Determine if an element has a CSS class with jQuery
  15. Show loading image while $.ajax is performed
  16. How to show popup message like in Stack Overflow
  17. How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
  18. How to select all checkboxes with jQuery?
  19. Dropdown select with images
  20. css transition doesn’t work if element start hidden
  21. jquery – How to determine if a div changes its height or any css attribute?
  22. How to convert unordered list into nicely styled dropdown using jquery?
  23. Responsive horizontal page sliding
  24. Scale element proportional to Background Cover with jQuery
  25. How to build simple tabs with jQuery?
  26. CSS fade left to right
  27. Bootstrap Dropdown with Hover
  28. How to show hidden divs on mouseover?
  29. Detect if dropdown navigation would go off screen and reposition it
  30. Bootstrap Dropdown menu is not working

Leave a Comment