establishing the position of the mouse cursor within a scaled div container

Issue at Hand: I'm encountering an obstacle with a transformed div set up as follows:

$('#container').css('-moz-transform-origin', '0 0'); 
$('#container').css('-webkit-transform-origin', '0 0');
$('#container').css('-o-transform-origin', '0 0');
$('#container').css('-ms-transform-origin', '0 0');
$('#container').css('-transform-origin', '0 0');

$('#container').css('-moz-transform', 'scale(.5)');
$('#container').css('-webkit-transform', 'scale(.5)');
$('#container').css('-o-transform', 'scale(.5)');
$('#container').css('-ms-transform', 'scale(.5)');

Now, I am adding another div to this scaled container...

id('container').appendChild( follower );    

However, when attempting to position this new div exactly according to the mouse cursor on the document... the follower's placement is drastically off from the actual mouse position on the document.

$( document ).mousemove( function( e ) {

var IE = document.all ? true : false;

if ( IE ) {
   vx = e.clientX;
   vy = e.clientY;      
} else {
   vx = e.pageX;
   vy = e.pageY;
} 

follower.style.left = xDropPos + 'px';
follower.style.top  = yDropPos + 'px';
}

Any suggestions on how to resolve this issue?

Answer №1

To implement the vx and vy parameters, follow the code snippet below:

$( document ).mousemove( function( e ) {
    var isIE = document.all ? true : false;
    if ( isIE ) {
       vx = e.clientX;
       vy = e.clientY;      
    } else {
       vx = e.pageX;
       vy = e.pageY;
    } 
    follower.style.left = vx + 'px';// using vx
    follower.style.top  = vy + 'px';// using vy
});

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

The challenge of loading multiple objects asynchronously in three.js

When I try to load multiple models onto the same scene simultaneously, only one model is successfully loaded. For instance, if I have a building scene with various objects like chairs and toys inside, only one object gets loaded when I try to load them all ...

Update the div without altering its contents

Hello, I have a webpage where I am utilizing multiple select lists sourced from 4 different XML files. There is a function that updates one specific div by loading an XML file using the PHP command "$scripts = simplexml_load_file($link);" and then applies ...

The image from the local source displays correctly in the initial component without any issues, but it does not appear in its corresponding detail component

My blog has a component for displaying posts and another component for showing the details of a single post as seen below. A key point to note is that while the blog component can load and display images, the blog details component cannot. Why is this? h ...

Incorporating Paged.JS functionality into a React/JS web application

My attempt to showcase my html page using paged.js in a react project has hit a snag. The html loads perfectly when accessed from local host (not via npm start, but the live server extension on vscode). However, following the steps outlined on this website ...

Cease the continuous reloading of the website during the

Hi there! I have come across a little script that runs when the user clicks on "submit": $(document).ready(function(){ $("form").submit(function(){ var username = $("#username-field").val(); if(username) { $.ajax({ url: &ap ...

What is the best way to display content at a specific time using Angular?

Whenever a user searches something and no results are found, I display a message. However, when there is content to show, an error message pops up for about 3-4 seconds before disappearing and showing the search results. This is my HTML: <div> &l ...

Utilizing an array in conjunction with Ajax to iterate through each item individually upon clicking a button

I'm attempting to retrieve the post content of three different WordPress posts on the same domain using Ajax GET URL. I currently have a single button and an array of URLs in the script, which successfully loads all three URLs in quick succession with ...

Internet Explorer seems to be having trouble detecting changes made to a jQuery checkbox

Here is an example of HTML code: <input type="checkbox" id="openInNewWindowCheckBox" value ="some_value" /> Accompanied by a jQuery script: $("#openInNewWindowCheckBox").change(function(){ if($(this).is(':checked')) ...

Embed the website onto a webpage using ajax or an iframe without any need for navigation

I have a unique challenge ahead. Imagine there are two websites, one is a web page and the other is hosted within the same domain. My goal is to load the entire second website into a div or iframe of the first web page, similar to how a free proxy browser ...

Is Optional Chaining supported by Next.js on Vercel?

While Next.js does support Optional Chaining, I have encountered an issue when trying to deploy the following code snippet: module.exports = { experimental: { outputStandalone: true, }, images: { domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS ...

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

The conditional CSS appears to be malfunctioning

Hi, I am attempting to use conditional CSS in my stylesheet to set a different width for IE6. I have tried the following code but it is not working: div.box { width: 400px; [if IE 6] width: 600px; padding: 0 100px; } How can I su ...

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

Troubleshooting problem with GZIP in Angular 2 application deployment

I have developed an Angular 2 TypeScript application. I am using Firebase for hosting and Cloudflare for optimizing speed, caching, and security. When checking the browser header, it indicates: accept-encoding:gzip, deflate, sdch, br The app.js file has ...

Leveraging replaceWith() alongside animate or scroll methods can enhance the user

Can we switch one div with another div while incorporating an animation effect, such that the old div slides to the left while the new one slides in from the right side of the page? My goal is to have both divs present on the page simultaneously while the ...

Communication between clients using a Progressive Web Application (PWA) when

Is there an efficient way to communicate and share data between devices using an offline progressive web app without internet access? I thought of exploring the possibilities with the Web Bluetooth API and generating QR codes through libraries like QRCode ...

Any suggestions on how to avoid code repetition using Jquery?

This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...

Is there a way to unselect a button in Angular?

I have a set of buttons representing different categories. When I click on a button, it displays a card with relevant information. <app-category-button [label]='category.name' [isSelected]='category.id === (selectedCategoryId$ | asy ...

Resolving the CSRF Token problem in Ajax with Django 1.10

Here is how I am setting up my AJAX request: data.push({'csrfmiddlewaretoken': csrf, 'answers': answers}) $.ajax( { type: "POST", url: "http://127.0.0.1:8000/en/list/add/", ...

Utilizing jQuery to modify the text output from an input form

Check out the preview site at . It's a test version before launching on a separate domain. Hello, I need to customize the error response for a CRM contact form integrated into Wordpress with the help of StackOverflow. The form is connected via JavaSc ...