Customizable positioning of hover messages while ensuring messages do not extend past the boundaries of the object

Within an application featuring a dynamic assortment of plots rendered and scaled within a fixed div, I am grappling with the final scenario whereby, in a layout of plots spanning multiple columns and rows, the message should be contained within the grouping object instead of spilling outside.

My endeavors to implement hover messages over ggplots have led me through various questions and iterations:

1. Achieving hover functionality over a single plot without exceeding the screen boundaries - see Question 1.

2. Extending hover capabilities to encompass multiple plots - refer to Question 2.

3. Implementing corrections to prevent message overflow beyond the desired area. Despite making progress with the code shared in comments and edits, there are still some issues: "The message almost always ends up vertically centered above the top row plot". Hence, further adjustments are required.

  • Instead of reacting only when the message would overlap the entire multi-panel structure, the current correction triggers when it overlaps the bottom of any single plot.

  • The corrective action often relocates the message to coordinates in the top row of plots rather than staying within the relevant row we are hovering over.

The JavaScript version (which isn't functioning as intended) currently resembles:

 <!-- Embedded JavaScript code here --> 

While this approach avoids the need for predetermined sizes, it falls short of meeting my specific requirements, as evidenced by the accompanying images below:

https://i.sstatic.net/2VF5H.png

https://i.sstatic.net/p5ZAU.png

https://i.sstatic.net/t5Ai4.png

Prior versions managed to adjust the plots but failed to verify if the message could fit after being positioned between the anchor point and the edge of the multiplot container (FP1PlotMultiplot)

 <!-- Additional code snippet showcasing previous implementation --> 

I have created a comprehensive test app demonstrating the "almost working" version which showcases the enhancements made thus far in attempting to rectify the issue.

 <!-- Test app script showing latest improvements --> 

Answer №1

I successfully fixed the issue by adding an if statement to ensure that the result doesn't lead to anchor point coordinates falling below 0 or exceeding the object's height.

One change I still need to make is regarding the references to FP1PlotMultiplot in the JavaScript code. I aim to use this script on 7 different objects with their names listed only in the first line of the script like so:

$('[id=FP1PlotMultiplot], [id=FP2PlotMultiplot],[id=CRFPlotMultiplot]').off('mousemove.x').on('mousemove.x', ......

Hence, I want to replace the name-based approach with something similar to 'e.target' for the main output object's ID.

 Your modified JavaScript code block goes here...

UPDATE: Issues Persisting in the Current Version

The latest working version faces a couple of challenges that I'm striving to address.

1) When the message needs to flip upward but there is only one plot, the positioning can go above the top edge and then extending beyond the bottom when moved downward. This occurs due to the message not fitting above or below the current hover location. Additional rules are required in the JavaScript to handle this scenario efficiently.

2) Another major issue is the application getting caught up in recalculations when the mouse moves extensively, particularly noticeable in plots with thousands of data points. Despite experimenting with delay and debounce functions, a solution has been elusive to prevent unnecessary calculations triggered by numerous intermediate mouse positions between two points A and B.

Demo App of the Current Version:

Your demo app code snippet goes here...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I can't find my unit test in the Test Explorer

I'm currently working on configuring a unit test in Typescript using tsUnit. To ensure that everything is set up correctly, I've created a simple test. However, whenever I try to run all tests in Test Explorer, no results are displayed! It appear ...

Modify the CSS preferences using an object that has been obtained

After the user selects options from a form, I am trying to update my CSS using the settings received from an object. However, I am unsure of how to implement this layout change. Here is a glimpse of my template: div class="btn btn-primary" ng-click= ...

Endless loop in React Native with an array of objects using the useEffect hook

For the current project I am working on, I am facing the challenge of retrieving selected items from a Flatlist and passing them to the parent component. To tackle this issue, I have initialized a local state as follows: const [myState, setMyState] = useS ...

Tips on displaying an avatar above and outside the boundaries of a background element using Chakra UI

They say a picture is worth more than a thousand words, and in this case, it holds true. The best way to illustrate what I'm trying to accomplish is through the image linked below. https://i.stack.imgur.com/5WvkV.png I envision having the avatar po ...

Height of inline-block list items in ul is not properly adjusted

I am working on a horizontal navigation bar using inline-block for the li tags. Here is the code snippet: <ul> <li><a href="#">HOME</a></li> <li><a href="#">FEATURES</a></li> <li><a href ...

Tips for obtaining the top 3 highest-value objects in a JavaScript array over all other elements

I am working with an array that contains objects, each with two properties: name and value. array = [ { name: 'name1', value: 0 }, { name: 'name2', value: 2 }, { name: 'name3', value: 4 }, { name: 'n ...

Is it possible to adjust the element's position using the code "element.style.top = window.scrollY"?

Recently, I attempted to create a floating input element that would follow the scroll. After much effort, I managed to achieve it and the code is provided below. However, I encountered an issue when trying to change "setText(window.scrollY)" to ...

Switching Icon in Vuetify Navigation Drawer Mini Variant upon Click Event

UPDATE Here's the solution I discovered: <v-icon> {{ mini ? 'mdi-chevron-right' : 'mdi-chevron-left' }} </v-icon> Is it feasible to modify the icon when toggling between navigation drawer variants? The default varia ...

Is there a way to transform this fixed alignment of divs, etc. into a responsive layout that automatically adjusts to different screen sizes? - Using HTML and CSS3

If you want to see the demo, you can check it out on JSFiddle by clicking on this link: JSFiddle Demo. This webpage utilizes Twitter's Bootstrap framework, which you can find more information about by visiting . When inspecting the stylesheet on JSF ...

typescript api overlooking the async await functionality

My controller contains an asynchronous method that is supposed to set a results object. However, I'm facing an issue where instead of waiting for the 'await' to finish executing, the code jumps to the response object call prematurely, leavin ...

Examples of merging responsive design and equal height columns in CSS:

As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...

Leveraging server-sent events (SSE) for real-time updates on a web client using JavaScript

I have been experimenting with server-side events (SSE) in JavaScript and Node.JS to send updates to a web client. To simplify things, I created a function that generates the current time every second: setTimeout(function time() { sendEvent('time&a ...

The Keyup Filter in the FromEvent function is malfunctioning and not behaving as anticipated

I have created a simple search function for my app using the FromEvent KeyUp and debounceTime features as shown in the code below: <input matInput #inputSearch> @ViewChild('inputSearch', { static: false }) input: ElementRef; fromEvent(th ...

Prevent the print dialog window from appearing when a page loads in Selenium for Firefox and Chrome

Is there a way to prevent the print window from automatically popping up when a page loads using Selenium? So far, I have tried using the Robot class to press the escape key, but it only works 80% of the time. I have also experimented with Firefox prefere ...

What is the best way to retrieve the value of an nth column in a table using

Is there a way to retrieve the value of a specific column in a table? For example, I want to get the value of the 2nd column. I have no trouble getting the first one using this method - it works perfectly fine. However, when I try to retrieve the value of ...

Transforming HTML features into PHP scripts. (multiplying two selected values)

I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...

Unable to locate index.html file in Docker container while dockerizing React application

I'm a newcomer to Docker and I'm looking to containerize my react app. The index.html file is located in the public folder within my react project. However, when I try to run the docker image, it fails with an error indicating that the index.html ...

Summarize values in data.table only for specified rows

Dealing with a large data.table is challenging when trying to aggregate select rows using all the data available. The following example illustrates this issue: library(data.table) library(lubridate) dt = data.table( date = seq.Date(as.Date("2017-01-01 ...

Difficulty in Verifying ECDSA Signatures Across React and Python Environments

Currently, I am tackling a project that requires me to create an ECDSA signature in a React application and then validate it in a Python backend. Although the signature generation and validation processes work perfectly within their respective environments ...

Overcoming validation hurdles with PHP and JavaScript

Our form pages have a majority of required fields, which are verified using JavaScript before being sent to a backend PHP app. Here is the form tag we utilize: <form name="order" method="post" action="http://company.com/config/_process.php?" id="order ...