Activate mouse event when the pointer is within X units of the bottom of the browser window

My inquiry is straightforward, although the solution may not be as simple. I have an element fixed to the bottom of the browser window. When it is not needed, I want to hide it by setting its height to 0px. Whenever the user's mouse is a certain distance away from the bottom of the WINDOW (not document), I would like the div to reappear. After doing some research online, all I could find were instructions on triggering events or actions when the page was scrolled to a certain position from the bottom. Could someone please guide me in the right direction?

The query is as follows:
How can I trigger an event/execute a function when the mouse pointer is within a specified distance from the bottom of the browser window (not document)?

A few things to note:
This is for a greasemonkey/userscript, so solutions do not need to cater to IE.
Please refrain from suggesting the use of a library. For something as small-scale as this, relying on an entire library is not an acceptable solution for me.

SOLUTION: Expanding upon Kir lvlev's response below (remember to give his answer an upvote):

// For standards-compliant browsers
// If you have a solution for IE, feel free to share it in the comments and I will incorporate it.
window.addEventListener("mousemove",function(e) {
    // 20 is the number of pixels from the bottom where the action should occur
    if ((this.innerHeight - 20) <= e.clientY) {
        // Perform desired actions here
    }
});

Answer №1

Utilize the mousemove event listener

$(window).mousemove(function(e)
{
      //retrieve mouse coordinates using e.pageX and e.pageY
      //access window height with $(window).height()
});

If not using jQuery:

window.onmousemove = function(e) {
  //e.clientX and e.clientY contain the mouse coordinates
  //use window.innerHeight for window height
}

Answer №2

Take a look at this code snippet I created just for you: example.com/code123

The main concept is demonstrated there. You might need to reposition the element, adjust its dimensions, and eliminate the background color. Also ensure that the z-index value positions it above all other elements on your webpage.

Here's a basic JavaScript function: onmouseover="hoverOver();"

If you wish to keep your links visible, you can place them in small boxes above the element with additional effort.

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

Setting up 'ngProgress' as a loader in my project using the 'ngbp boilerplate' is straightforward and easily customizable

Currently, I am utilizing the 'ngbp' angular boilerplate from GitHub to develop my project. My goal is to implement ngProgress for displaying a loader when navigating between sections. I have successfully installed ngProgress via bower and ensur ...

By default, populate the text area in an HTML form with content fetched from the database

Can anyone provide suggestions on the best method to extract text from a database field and place it as the default text in a text area? I am thinking of assigning the field to a variable and then utilizing javascript to set it as the default text, but I ...

"Creating a Typescript array by extracting items from a different const array (as seen in the official beginner tutorial

Currently, I am working through the Angular tutorial that can be found at https://angular.io/start. After successfully completing the tutorial, I decided to practice building for production locally. However, when attempting to build, I encountered this err ...

Having trouble positioning the right side image on the Bootstrap 4 Landing page

Struggling to incorporate bootstrap 4 into my sample project for the right side background. I'm facing some conflicts and attempts to align it on the right side are not successful. Does anyone know how to do this correctly? Thank you // Navbar scr ...

Exploring the vulnerability in switching an ajax request to another PHP file for potential exploitation clarification

I am currently developing an application that processes an ajax call (using jquery) and provides validated users with an entry token for the website. For instance, if the ajax call is made to checkAuth.php and all other php files are in the same directory ...

Converting Scalable Vector Graphics to Hypertext Markup Language and

So I've got this SVG file called 7.svg. What's the best way to show this image using HTML or CSS on my index.html page? ...

What is the best way to distinguish between my HTML form submission and my JavaScript form modification process?

I am facing a dilemma with the layout of my form and table on the webpage. The structure is as follows: +-------------------------------------------------+ | FORM | | +------------------------------------------- ...

Incorporating a custom object into two dropdown menus using JavaScript

As a novice in the world of JavaScript, I am attempting to dynamically add values from a text box to two select boxes. Upon entering a value (node name), my goal is to include that name in both select boxes srcNodes and targetNodes. However, I'm enco ...

What is the process of implementing a page change using a GET request in JavaScript using Node.js and Express?

Within this application, users are provided with a table where they can input data. Each row in the table is equipped with an "Edit" button that, when clicked, should redirect them to a new page labeled "/update" where modifications to the specific row can ...

The Angular model finally refreshes its values after a console.log() is executed

UPDATE After further investigation, I discovered that the issue was not related to Angular itself, but rather a mistake in the update function within the node server controller. I have provided the fix below for reference, and decided to keep this questio ...

What is the best method to pass a JavaScript file array to a Node.js server?

Is it possible to transfer data from a Javascript file linked to an HTML page to a Node.js file on a post route without displaying it on the HTML page? If so, what is the best way to accomplish this? ...

Creating a popup using JavaScript in an ASP.NET page can be challenging when it comes to passing values

The list page in my parent window displays multiple rows, each representing an individual person. Next to each person's name is an icon that links to the "change status" page. When clicking on the icon, a popup page should open where the status of th ...

Storing information in a MySQL database with the assistance of AJAX and PHP

I recently encountered an issue while trying to insert a name and password into a MySQL table using a particular code snippet. Although the code triggered a success alert, the data was not successfully added to the table. Can anyone assist in resolving thi ...

Achieve a sleek look by adjusting the start and end margins of the navbar in Bootstrap 5 to sit closely to the edge

After removing ms-2, the content shifts to the right. When I put it back in, the content shifts to the left again. I've tried different options but can't seem to figure out how it works and the correct order it needs to be in. Bootstrap is giving ...

Perform Action Only When Clicking "X" Button on JQuery Dialog

I have a dialog box with two buttons, "Yes" and "No", which trigger different functions when clicked. $('#divDialog').dialog({ modal:true, width:450, resizable: false, buttons: [{ text: 'Yes', ...

Tips for displaying a horizontal scrollbar on a div within a div that has a hidden scrollbar

To ensure that a horizontal scrollbar is displayed on my "content" div when the screen size is smaller than the specified minimum width, I have set the overflow-x property of the parent "container" to hidden. This prevents the scroll from appearing across ...

Template for PHP website including code

I am working on integrating this code into my index.php page in order to streamline the process of creating separate pages for my website using only simple HTML files. For instance: Instead of repeating the same template code on multiple pages like index, ...

Uncover the hidden treasures within JSON string information

I am working with a JSON feed that contains String data type. "[ { "str": "<ul><li>Item1<li><li>Item2<li><li>Item3<li><ul>" } ][ { "str": "<ul><li>Teacher Account< ...

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

What is the best way to adjust the dimensions of an image in a Chrome application?

var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://unique-domain-not-csp-friendly.com/image.png',true); xhr.responseType = 'blob'; xhr.onload = function(e) { var img = document.createElement('img'); img.src = w ...