I have developed a circular graphic using primarily HTML and CSS, with some JavaScript and JQuery functionalities incorporated for text curving and planned interactions in the future.
However, I've encountered an issue where clicking on the upper right element results in it being partially covered by the upper left element. This leads to confusion when determining which element was actually clicked, as sometimes the number of the upper left element is returned instead of the intended one.
https://i.sstatic.net/Pd8hz.png
How can I accurately target the specific elements that are clicked on? This precision is crucial for linking to different pages within our web project at a later stage.
To illustrate the problem, I have created a JSFiddle: https://jsfiddle.net/niklasbuschner/gj67md4u/4/
The code snippet is outlined below:
$(document).ready(function() {
function textRotation() {
new CircleType(document.getElementById('demo1')).radius(185);
new CircleType(document.getElementById('demo2')).radius(185);
new CircleType(document.getElementById('demo3')).radius(185);
}
textRotation();
$('#demo1').children('div').addClass('pie__segment__path-text__rotation1');
$('#demo3').children('div').addClass('pie__segment__path-text__rotation3');
$('.pie__segment').on('click', function() {
var link_target = $(this).data('href');
alert('CLICK' + link_target);
});
})html {
font-family: Arial;
font-size: 14px;
}
.pie {
border-radius: 100%;
height: calc(var(--size, 400) * 1px);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: calc(var(--size, 400) * 1px);
}
// Additional CSS styles ...
<div class="pie-container" style="position: relative; top: 100px; left: 100px;">
<div class="pie">
<div class="pie__segment" data-href="1" style="--offset: 0; --value: 33.33333; --bg: #089baa">
<div class="path-text demo1">
<span id="demo1">SAMPLE ENTRY +</span>
</div>
</div>
// Nested pie segments ...
</div>
<div class="pie-body">
<p>Main Point</p>
</div>
</div>