Hi I wrote word selector code. Code run on computer but code doesn't run on mobile. Solving the touch problem by doing this. I changed the mousedown with the touchstart and I changed the mouseup with the touchend. but I could not find the mouseenter to change anything. how do i solve this problem
var mouseIsDown = false;
//mousedown
$(".table li").bind('mousedown touchstart', function(event) {
mouseIsDown = true;
$('.word').append($(this).text());
});
//mouseup
$(".table li").bind('mouseup touchend', function(event) {
mouseIsDown = false;
$(".word").empty();
});
// How can i mouseover, touch event
$(".table li").bind('mouseenter touch', function(event) {
if(mouseIsDown) {
$('.word').append($(this).text());
}
});
#tablo {width: 100%; text-align: center; background-color: #cccdd2; overflow: hidden; }
.table {text-align: center; overflow: hidden; padding: 20px;}
.table ul { list-style: none outside none; margin-bottom: -12px;}
.table li { position: relative; border-radius: 100px; display: inline; display: inline-block ; margin-right: -10px;}
.table li {width: 50px; height: 33px; margin: 2px; background-color: #666464; padding-top: 17px; font-family: Calibri; font-size: 15px; font-weight: bolder; color: #fff; }
.table li { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none;}
.table li:hover {background-color: red; }
.word { width: 100%; text-align: center;
background-color: black; border-radius: 20px 20px 0px 0px;
font-size: 25px;
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word"></div>
<div id="tablo">
<div class="">Please one word click and </div>
<div class="table">
<ul class="one">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<ul class="two">
<li>O</li>
<li>L</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
<ul class="one">
<li>C</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
</ul>
<ul class="one">
<li>K</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
</ul>
<ul class="one">
<li>U</li>
<li>V</li>
<li>X</li>
<li>Y</li>
<li>z</li>
</ul>
</div>
</div>
Hi I wrote word selector code. Code run on computer but code doesn't run on mobile. Solving the touch problem by doing this. I changed the mousedown with the touchstart and I changed the mouseup with the touchend. but I could not find the mouseenter to change anything. how do i solve this problem