How can I determine the mouse's location relative to the bottom right corner of the

Question

How can I determine the mouse's location relative to the bottom right corner of the

Currently, I am in the process of writing jQuery code that will detect if the mouse is positioned near the bottom or right side of a window, and then adjust the tooltip's position accordingly. This becomes crucial because the table in which these tooltips are displayed is larger than the visible viewport.

An approach like the following snippet would only be effective if all screens were identical in size:

$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

Is there a way for me to calculate the coordinates with the bottom right as the origin, represented by '0x0'?

jquery html css

Answer 1

Answer №1

To determine the coordinates relative to the bottom right corner, subtract the values of event.pageX and event.pageY from the window's width and height respectively.

$(document).on("mousemove", function(event) {
  $("#log").text("pageX: " + ($(window).width() - event.pageX) + ", pageY: " + ($(window).height() -event.pageY));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

Answer 2

To determine the coordinates relative to the bottom right corner, subtract the values of event.pageX and event.pageY from the window's width and height respectively.

$(document).on("mousemove", function(event) {
  $("#log").text("pageX: " + ($(window).width() - event.pageX) + ", pageY: " + ($(window).height() -event.pageY));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

Answer 3

Answer №2

Deduct the width of the window from the provided coordinates:

$(document).on("mousemove", function(event) {
  var winWidth = $(window).width();
  var winHeight = $(window).height();

  console.log(
   "pageX: " + (winWidth - event.pageX),     
   "pageY: " + (winHeight - event.pageY) 
  );
});

Answer 4

Deduct the width of the window from the provided coordinates:

$(document).on("mousemove", function(event) {
  var winWidth = $(window).width();
  var winHeight = $(window).height();

  console.log(
   "pageX: " + (winWidth - event.pageX),     
   "pageY: " + (winHeight - event.pageY) 
  );
});

Answer 5

Answer №3

To resolve the issue, first determine the width and height of the window, and then calculate the difference between the mouse position and these variables.

Here is the solution:

    $( document ).on( "mousemove", function( event ) {
// breakdown of variables
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var distanceFromRight = windowWidth - event.pageX;
    var distanceFromBottom = windowHeight - event.pageY;

// use the calculated values to position the tooltip
    $('.tooltip').css({
          "position": 'absolute',
          "bottom": distanceFromBottom,
    "right": distanceFromRight
        });
    });

Answer 6

To resolve the issue, first determine the width and height of the window, and then calculate the difference between the mouse position and these variables.

Here is the solution:

    $( document ).on( "mousemove", function( event ) {
// breakdown of variables
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var distanceFromRight = windowWidth - event.pageX;
    var distanceFromBottom = windowHeight - event.pageY;

// use the calculated values to position the tooltip
    $('.tooltip').css({
          "position": 'absolute',
          "bottom": distanceFromBottom,
    "right": distanceFromRight
        });
    });

How can I determine the mouse's location relative to the bottom right corner of the

Answer №1

Answer №2

Answer №3

Similar questions

javascript popup appears twice in IE when using PHP

Installing Fontawesome 4.3

Having issues with CSS vertical margin not functioning properly

Show the menu when hovering in reactjs

Issues with overlapping floating labels in Bootstrap 5

Guide to adjusting margin size according to specific screen size thresholds?

"Including Span icons, glyphs, or graphs within a table cell in AngularJS based on a specified condition or numerical

The overflow:hidden property does not seem to be effective for controlling the display of the

What method can be used to effectively track markups within a string?

Exclude any non-JSON data in the response when using Jquery ajax

Attempting to dynamically assign a nickname to a CSS element selector during runtime

Developing a jQuery loop

React Ant Design: Encountered a warning for 2 elements having non-unique properties

Affixing a navigation bar to the top while scrolling

Having trouble with your jQuery AJAX function not receiving the text returned from your PHP file?

Is there a way to utilize JavaScript or jQuery to modify the background color of the `Save` and `Cancel` buttons within a SharePoint 2013 edit form?

Using Vue.js to dynamically assign CSS classes based on variables

Display and view .dwg files using Javascript, HTML, and Angular

Is there a JavaScript function available that can enable the placeholder attribute to function properly in Internet Explorer?

"Revolutionary tool for creating dynamic charts: moving from ASP.NET to HTML