StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Simple. You'll have to add some touch events to this. <code>onmouseup</code> & <code>onmousestart</code> will trigger only mouse events and from what I've seen, doesnt work on touch screens. The events you have to add are <code>touchmove</code> & <code>touchend</code> as well. <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" rel="nofollow">Here's a reference link from MDN for touch events of HTML5.</a></p> <p>This is how your code needs to be structured :</p> <pre><code>var el = document.getElementById('in'); //mouse events //gave names to the functions bound this, since w'll be using them two times. el.onmousemove = enlarge; el.onmouseup = redirect; //touch events //check if device has touch screen // CREDIT : http://stackoverflow.com/a/4819886/1217785 if (is_touch_device()) { console.log(true); //onmousemove = touchmove el.addEventListener("touchmove", enlarge, false) //onmouseup = touchend el.addEventListener("touchend", redirect, false) } //this function checks whether the device is a touch screen or not, else no binding will be done. function is_touch_device() { var isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window; console.log(isTouch); return isTouch; }; //the rest of your functions function redirect() { var val = document.getElementById('in').value; if (val >= 50) { window.location.href = "http://www.example.com/"; } else { this.value = 0; zero() } } function enlarge() { if (document.getElementById('in').value > 10) { document.getElementById('overin').style.width = document.getElementById('in').value + "%"; } } //other code </code></pre> <p>And here's the updated demo : <a href="http://jsfiddle.net/hungerpain/9vs2n/6/" rel="nofollow">http://jsfiddle.net/hungerpain/9vs2n/6/</a></p> <p>Hope this helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload