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

Experiencing a lack of desired outcome in Outlook when using simple HTML with table elements

Only JSON objects with a boolean value of true will be returned

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

Tips for inserting an object into an array

Switching from the global import module pattern to ES6 modules

When the user clicks, retrieve the contents of list p and showcase them in a div

Is it necessary to dispose of node.js domains? When is the appropriate time to do so?

Getting js.map Files to Function Properly with UMD Modules

The body and HTML elements are bloated with an excessive amount of

Issues arising with code splitting using React HashRouter in a project utilizing Typescript, React 17, and Webpack 5

When using v-for to render an array list fetched from AsyncData, an error is thrown: The virtual DOM tree rendered on the client-side does not match the one

After entering text manually, the textarea.append() function ceases to function properly

Clear the local storage once the URL's view has been fully loaded

Issues with message display validation in jQuery

Implementing image rendering functionality in Vue.js

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

The symbols ">>" have been changed to "ï¿½"

What is the best way to isolate a single element within a for loop and exclude all others?

Next.js Error: Unable to access the 'collection' property, as it is undefined

Customizing the scrollbar within a modal using reactjs-popup