Just read up on it at MDN. You aren't kidding!
$(".top, .right").on("touchstart", function () {...})
// or add every touchable item a class
$(".touchable").on("touchstart", function () {...});HTML:
<div class="top">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
/*top side*/
.top {
position: absolute;
bottom: 315px;
left: 50px;
}
.top > div {
display: inline-block;
width: 50px;
height: 250px;
background-color: #c7b47f;
transition: all 1s;
transform: translateY(165px);
z-index: 9;
}
.top > div:hover {
transform: translateX(0);
}I used hammer a lot in the past and it's alright. The bigger problem are the different touch implementations in the browsers. That's nothing hammer can solve.
When did "import" become a thing?
When did "import" become a thing?
When did "import" become a thing?
CSS:
.square1, .square2, .square3 {
position: absolute;
top: 0;
bottom: 0;
}
.square1 {
background-color: #FF6161;
left: 0;
right: 66%;
}
.square2 {
background-color: #4F953B;
left: 33%;
right: 33%;
}
.square3 {
background-color: #0076FF;
left: 66%;
right: 0;
}
HTML:
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>CSS:
.square > div {
position: absolute;
top: 0;
bottom: 0;
}
.square > div:nth-child(1) {
background-color: #FF6161;
left: 0;
right: 66%;
}
.square > div:nth-child(2) {
background-color: #4F953B;
left: 33%;
right: 33%;
}
.square > div:nth-child(3) {
background-color: #0076FF;
left: 66%;
right: 0;
}
HTML:
<div class="square">
<div></div>
<div></div>
<div></div>
</div>If you want to look into flux or something similar, too, give redux a try!