2

Long-time lurker here. This is my first post (and I'm an electrical engineer, not a programmer).

I would like to have an element in HTML for which I can detect a click on its upper-half and its lower-half. Specifically, suppose I have a large numeric digit, and if you click above its "waist" it increments, and if you click below its waist it decrements. I then need to put several of these next to one another, like a "split-flap display" at a train station.

I already have all the javascript working for increment-only, but I want to make it easier to decrement instead of having to wrap all the way around with many clicks. I have so far avoided using jquery, so if you can think of an HTML-only way to do this I would love to hear about it.

I realize I will probably have to wrap two smaller containers (an upper and a lower one) into a larger container, but how do I get the text to cover the height of both internal containers? I probably want to avoid cutting a font in half and updating upper and lower separately.

Thanks, Paul

Paul
  • 43
  • 4
  • Can you please post the code you have so far? And if possible a demo at jsfiddle.net? – Yuriy Galanter Sep 27 '13 at 02:26
  • yes, code please. conceptually though, this is quite easy... on the html side you need an element with two inner elements that use up half of the parent element each. then all you have to do is attach an event to the upper element to increase and an event for the lower element to decrease. – Nicolas Straub Sep 27 '13 at 02:28
  • What code do you want? The javascript or the HTML? Right now it is literally just a 0 and I update it to 1 when a click is detected. My javascript is similar to what Markasoftware has put below: just a click-listener (and, for touchscreens a different listener). – Paul Sep 27 '13 at 02:37

1 Answers1

5

This should work:

element.addEventListener('click',function(e){
    //here's the bounding rect
    var bound=element.getBoundingClientRect();
    var height=bound.height;
    var mid=bound.bottom-(height/2);
    //if we're above the middle increment, below decrement
    if(e.clientY<mid)
        ;//we're above the middle, so put some code here that increments
    else
        ;//we're below the middle, so put some code here that decrements
},false);

element is the element that you wish to apply this effect on

markasoftware
  • 12,292
  • 8
  • 41
  • 69
  • It works! Thanks a lot Markasoftware! I tried to give you an upvote, but I need more reputation points to do so. – Paul Sep 27 '13 at 02:44
  • @Paul Thanks! If an answer answers your question, you can click on the little checkmark below the vote counter. This "accepts" the question, gives you 2 reputation, and gives me 15. – markasoftware Sep 27 '13 at 03:46
  • @YuriyGalanter the example is great, but reversed. Here is the correct version: http://jsfiddle.net/FemZ7/1/ – markasoftware Sep 27 '13 at 03:47
  • @Markasoftware yup I saw it after I published the link, but decided not to change it since it proves the concept anyway. Good job, I learned something new today. – Yuriy Galanter Sep 27 '13 at 03:51
  • As a follow up, I made a few changes to this to get it working on a variety of mobile devices. I use (e.clientY || e.pageY) instead of just e.clientY to handle safari-mobile. I also use three listeners when available: touchstart, touchmove, touchend. touchstart prepares things to happen, touchend executes those changes, and touchmove deactivates the execution in touchend. I also used the [top if-clause in this link](http://stackoverflow.com/questions/2792185/what-is-the-equivalent-of-getboundingclientrect-on-iphone-mobile-safari) to get the waist-division better-centered on all mobiles. – Paul Oct 03 '13 at 08:04
  • You might want to link to https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect – gnarf Nov 21 '13 at 18:06