For this single serving site, the concept involves swiping a card over a specific area to receive different messages depending on interaction with the droppable space. I am looking to implement an if else function that utilizes a random number variable to trigger two distinct functions. Whenever the out: function() is executed, one of two messages will display:
"Please swipe again at this website to enter"
Alternatively, another function will hide certain divs and make others appear. (I have included some code in my current working snippet that I believe is close)
I apologize if my coding terminology is inaccurate, as I am relatively new to this. Thank you for any guidance.
$(function() {
$("#draggable").draggable({
containment: 'body',
revert: function(dropped) {
var $draggable = $(this),
hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
wasJustDropped = dropped && dropped[0].id == "droppable";
if(wasJustDropped) {
return true;
} else {
if (hasBeenDroppedBefore) {
$draggable.animate({ top: 0, left: 0 }, 'slow');
return false;
} else {
return true;
}
}
}
});
$("#droppable").droppable({
over: function() {
$(this).find('p').html('Reading...');
},
out: function() {
$(this).find('p').html('Please Swipe Again At This Website To Enter');
},
revert: function() {
$(this).find('p').html('');
},
drop: function() {
$(this).find('p').html('Error Reading Your Card');
/* $("#droppable").droppable({
over: function() {
$(this).find('p').html('Reading...'); */
// Random generated function I am attempting to create
})
}); #hi {
width: 50%;
height: 50%;
position: relative;
margin: 0 auto;
display: none;
}
div.blackBar {
position: relative;
background-color: black;
width: 200px;
height: 23px;
top: 75%;
}
div.frontSwiper {
background-color: transparent;
width: 85%;
height: 65px;
position: relative;
-webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
z-index: ;
border-radius: 10px;
}
body {
width: 90%;
height: 90%;
margin: auto;
}
#swiper {
background-color: transparent;
width: 34%;
height: 75px;
margin: 0 auto;
position: relative;
Top: 200%;
z-index: 0;
border-radius: 0px;
}
#upperSwiper {
background-color: transparent;
width: 34%;
height: 75px;
margin: 0 auto;
position: relative;
Top: 5%;
z-index: 1;
border-radius: 0px;
}
#droppable {
width: 200px;
Height: 150px;
margin: 0 auto;
border-Width: 1px;
background-image:none;
background-color: transparent;
text-align: center;
top: 10%;
}
#draggable, #draggable2 {
position: relative;
top: 50%;
width: 200px;
height: 130px;
border-Width: 0px;
background-image:none;
left: 75%;
background-color: #FFD700;
-webkit-clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
z-index; -1;
}<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="swiper">
<div class="frontSwiper"></div>
<div id="upperSwiper"></div>
</div>
<div id="draggable" class="ui-widget-content">
<div class="blackBar"></div>
<p></p>
</div>
<div id="droppable" class="ui-widget-header">
<p style="font: italic bold 30px/40px Arial, Sans-serif; width: 50%, position: fixed;"></p>
</div>