I'm trying to figure out how to determine the offset of the left side of the screen. I've managed to calculate the offset for the right side, as shown in the example below. However, I also need to do the same for the left side, where the text should display "Not Interested".
Can someone please provide guidance or assistance on how to achieve this?
If anyone has suggestions for improving my current code or a better approach, I would greatly appreciate the feedback.
$(document).ready(function(){
var currentDiff;
var currentOpacity;
$("#event_container .content .card").draggable({
drag: function(el, ui){
var cardWidth = $(this).width();
var bodyWidth = $("body");
var rightOverlay = $(this).offset().left + (cardWidth * .6);
var leftOverlay = ($(this).offset().left - cardWidth) / 6;
if(rightOverlay > cardWidth){
var widthDiff = rightOverlay - cardWidth;
if(!$("#interested-message").is(":visible")){
currentDiff = 0;
currentOpacity = 0;
}
if(widthDiff > 175){
if(currentDiff === 0){
currentOpacity = 0.1;
$("#interested-message").addClass("interested").css("opacity", currentOpacity).text("Interested").show();
currentDiff = widthDiff;
} else if((currentDiff + 20) > currentDiff) {
if(currentOpacity !== 1){
currentOpacity = currentOpacity + 0.1;
$("#interested-message").addClass("interested").css("opacity", currentOpacity);
currentDiff = widthDiff;
}
}
} else {
$("#interested-message").css("opacity", 0).hide().text("....");
}
} else {
$("#interested-message").css("opacity", 0).hide().text("....");
}
if(leftOverlay > cardWidth){
var widthDiff = leftOverlay - cardWidth;
console.log(widthDiff);
} else {
console.log(leftOverlay);
}
}
});
});#interested-message{
display: none;
position: absolute;
width: auto;
padding: 5px 15px!important;
z-index: 100;
border-radius: 6px;
font-size: 30px;
top: calc(45% - 100px);
left: calc(25% - 100px);
opacity: 0;
}
#interested-message.interested{
display: block;
border: 2px solid #0b9c1e;
color: #0b9c1e;
}
#interested-message.not-interested{
display: block;
border: 2px solid #d93838;
color: #d93838;
}
#body{
width: 250px;
height: 600px;
max-width: 250px;
max-height: 600px;
border: 2px solid black;
overflow: hidden;
}
#event_container{
height: 100%;
width: 100%;
background: lightblue;
padding: 50px;
}
#event_container .content{
position: relative;
}
#event_container .content .card{
border: 2px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="body">
<div id="event_container">
<div id="interested-message">....</div>
<div class="content">
<div class="card">
Test card
</div>
</div>
</div>
</div>