HTML Element Split in Two by a Line in the Middle

Question

HTML Element Split in Two by a Line in the Middle

Greetings to all, after observing for a while I have decided to make my first post here (and just to clarify, I am an electrical engineer, not a programmer).

I am in search of creating a unique element in HTML where I can detect clicks on both its upper and lower halves. Imagine a scenario where there is a large numeric digit, and when you click above its "waist" it increments, and if you click below the waist it decrements. My goal is to place multiple elements like this next to each other, resembling a "split-flap display" at a train station.

Although I have successfully implemented javascript for incrementing values, I am now looking for a more user-friendly way to decrement without having to loop through numerous clicks. I have refrained from using jquery thus far, so any suggestions on achieving this with HTML only would be greatly appreciated.

It appears that I may need to nest two smaller containers (one for the upper half and one for the lower half) within a larger container. But how do I ensure that the text spans the height of both internal containers? I would prefer to avoid splitting a font in half and updating the upper and lower halves separately.

Thank you, Paul

javascript html css

Answer 1

Answer №1

Give this a try:

element.addEventListener('click',function(e){
    //we capture the bounding rectangle here
    var bound=element.getBoundingClientRect();
    var height=bound.height;
    var mid=bound.bottom-(height/2);
    //if the mouse is above the middle, we increment; if it's below, we decrement
    if(e.clientY<mid)
        ;//we're above the middle, so add some code here to increment
    else
        ;//we're below the middle, so insert code here to decrement
},false);

element represents the element you want to apply this behavior to

Answer 2

Give this a try:

element.addEventListener('click',function(e){
    //we capture the bounding rectangle here
    var bound=element.getBoundingClientRect();
    var height=bound.height;
    var mid=bound.bottom-(height/2);
    //if the mouse is above the middle, we increment; if it's below, we decrement
    if(e.clientY<mid)
        ;//we're above the middle, so add some code here to increment
    else
        ;//we're below the middle, so insert code here to decrement
},false);

element represents the element you want to apply this behavior to

HTML Element Split in Two by a Line in the Middle

Answer №1

Similar questions

Exploring the Realm of Javacript Template Literal Capabilities

Is Performance Enhanced by Exporting Meshes in Three.js?

Getting the user's name and country using `auth().createUserWithEmailAndPassword` is a simple process

Having trouble importing from the public folder in CSS with Create React App?

Learn how to effectively declare data as global within Angular2 or Typescript

Organize the attributes of components on the following line in Visual Studio Code

"I encountered an error while sorting lists in Vue 3 - the function this.lists.sort is not

Using JavaScript to transfer the data ID from a button to a form

Issue encountered while validating password using regex pattern?

Invoke a function only once in a Node.js application

Dropzone ceased functioning following the transition from version "4.2.0" to "5.7.0" while utilizing jquery version "3.3.1"

What is the best way to strip the text from a link that encompasses both text and an image using jquery?

How do I access a specific child from an object/element retrieved by using the elementFromPoint() method in Javascript?

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

The AJAX request seems to be malfunctioning despite the fact that both the PHP and JS files function correctly independently

Struggling with creating an html file that is responsive on mobile devices

Bootstrap: Arrange multiple images horizontally within a row

Creating visually appealing definition lists

The outline none property on the Material UI IconButton is malfunctioning