What I need in particular is to obtain the coordinates of a div to be able to condition them (correctly), as for example with a new event. Now ... the problem is that I have solved it up to that point, the issue is that when running the event "child" to call it in some way, it becomes loop, then leave an example code explained. / p>
To clarify, this in order to affect the sibling object that is below a div if need to affect the transitions or effects thereof. For example, if I put the p as a child of div and I would like to put a fadeIn/Out() effect in toggle to the latter, and pass the mouse over the paragraph there is a strange effect that is not desired, also if There is another way to do this, it is welcome.
The cookie-js library will allow you to facilitate the work with cookies. It is quite intuitive and although it is included in the code, the part where I keep the cookie is commented so as not to cause problems on the page, but this gives a better idea of the problem.
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
$("#coor").html(coor);
$(".heart").on("click",function() {
if (x < 68 && x > 34 && y < 55 && y > 49 ) {
$("#pcontain").css({"color":"rgb(191, 90, 136)"});
$("#pcontain").css({"background-color":"white"});
/*var cookie = Cookies.get("suma");
var checkcookie = isNaN(cookie)
if (checkcookie == true) {
cookie = 0;
}
console.log(cookie);
cookie = parseInt(cookie);
var numero = 1;
var suma = cookie + numero;
Cookies.set("suma", suma);
$('#likes').html(cookie);*/
}else{
$("#pcontain").css({"color":"black"});
$("#pcontain").css({"background-color":"transparent"});
}
});
}
function clearCoor() {
$("#coor").html("");
}* {
font-family: sans-serif;
margin: 0;
padding: 0;
}
#maindiv {
width: 100px;
height: 100px;
background-color: yellow;
text-align: center;
position: relative;
}
#maindiv p {
top: 40px;
position: relative;
font-weight: bold;
width: 45px;
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 4px;
}
.heart {
position: absolute;
height: 100%;
width: 100%;
z-index: 100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "maindiv">
<div onmousemove="showCoords(event)" onmouseout="clearCoor()" class="heart">
</div>
<p id="pcontain"><i class="fal fa-heart">Hola</i></p>
</div>
<p style="font-size: 12px; color: rgb(191, 90, 136);">Haz click en Hola!</p>
<p style="font-size: 12px; color: rgb(191, 90, 136);">Haz click luego fuera de Hola!</p>
<p id="coor"></p>The problem is here.
$(".heart").on("click",function() {
if (x < 68 && x > 34 && y < 55 && y > 49 ) {...}
When the function click() is executed, a loop is created in the code that makes it run indefinitely (although it seems to multiply) until it stops, as I mentioned before I can not store cookies in Stack, so I leave the print of my console (in this case it was executed 30 times).
And you can also realize that this happens because when you click on my example you can notice a kind of dalay and / or crash when changing the colors.
Does anyone know why it happens? Thank you.