I'm trying to make a div open as the user drags his thumb down, and makes it close as he drags his thumb up. I searched and saw that I can capture the user touch on the screen with the touch events, but I can not make it work.
This is the code I've developed so far:
window.addEventListener('load', function(){
var box2 = document.querySelector('#todo'),
boxleft,
startx,
dist = 0,
touchobj = null;
box2.addEventListener('touchstart', function(e){
touchobj = e.changedTouches[0];
startx = parseInt(touchobj.clientX);
e.preventDefault();
}, false);
box2.addEventListener('touchmove', function(e){
document.querySelector("#d1").style.height = "100px";
e.preventDefault();
}, false);
}, false);#todo {
background-color: #550000;
height: 300px;
width: 100%;
}
#d1 {
background-color: #555555;
height: 50px;
width: 100%;
}<div id="todo">
<div id="d1"></div>
</div>