obtain mouse coordinates through chrome extension - javascript

I am curious to know if there is a way to get the mouse coordinates through a chrome extension and then use these coordinates to check if the person has clicked in that position ?

Getting the mouse coordinates is very simple, put this in a content script:
document.onmousemove = function(e)
{
var x = e.pageX;
var y = e.pageY;
// do what you want with x and y
};
Essentially, we are assigning a function to the onmousemove event of the entire page, and getting the mouse coordinates out of the event object (e).
However, I'm not entirely sure what you mean by this:
then use these coordinates to check if the person has clicked in that position ?
Do you want to check if a user clicks something like a button? In that case you can simply subscribe an event to that button (or any other element) like this:
document.getElementById("some_element").onclick = function(e)
{
alert("User clicked button!");
};
To record all mouse clicks and where they are:
document.onclick = function(e)
{
// e.target, e.srcElement and e.toElement contains the element clicked.
alert("User clicked a " + e.target.nodeName + " element.");
};
Note that the mouse coordinates are still available in the event object (e).
If you need the coordinates when a user clicks an arbitrary location, this does the trick:
document.onclick = function(e)
{
var x = e.pageX;
var y = e.pageY;
alert("User clicked at position (" + x + "," + y + ")")
};

I was so tired of searching for an answer to this every few weeks so I created a quick script. It requires jquery for dom selection, dom appending, and style editing.. this could be easily changed, but i've already worked too much this week.
(function() {
'use strict';
var $toolTip = $('<div/>');
$toolTip.addClass('customTooltip-rsd')
.css({
position: 'absolute',
display: 'inline-block',
'font-size': '22px',
backgroundColor: '#000',
color: '#ffffff',
'z-index': 9999999999,
padding: '10px',
'word-spacing': '10px',
'border-radius': '50%',
width: 100,
height: 100,
'line-height': '100px',
'text-align': 'center',
'font-weight': 'bold'
})
;
$(document.body).append($toolTip);
$(window).on('mousemove', function(e) {
var posX = e.pageX;
var posY = e.pageY;
$toolTip.text(posX + ',' + posY).css({
top: posY + 'px',
left: posX + 'px'
});
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

In my projects, I put this simple jQuery script in a separate file to check for x and y coordinates. I can simply toggle it off and on with the trackingMouse variable.
// this lets you click anywhere on the page and see the x and y coordinates
let trackingMouse = true;
$(document).ready(() => {
$(document).on('click', (e) => {
if (trackingMouse) {
let x = e.pageX;
let y = e.pageY;
console.log(`The x coordinate is: ${x}`);
console.log(`The y coordinate is: ${y}`);
}
});
});

Once you have the mouse coordinates, you can make use of "target" attribute with "_blank" value to open an url in a new tab.
URL Display Name
If you are using any javascript framework, you can provide a click event and in its controller, you can make use of default navigate method to navigate.

Related

When the drag event is fired in Firefox, the mouse coordinates are (0,0)

I want to make a mobile phone theme effect on the browser, and I need to make the icon get the current mouse position when it is dragged. In order to judge whether the user wants to insert the currently dragged icon at the mouse position, but I use the event object (#drag($event) ) of the drag method in the Firefox browser to get the mouse coordinates (event. pageX, event.screenX), it shows (0,0) or a fixed value, but when I use Google Chrome, the above situation does not occur, it immediately gives me the coordinates of the current mouse. Regarding the problem of the value of layerXY in the picture, this value will only be updated once at the beginning of dragging, and will not change at the rest of the time. Since I personally like to use the Firefox browser, I want to solve this problem, can anyone help me? Or give me some other suggestions to implement this function (my English is not very good, from google translate)
You could update the mouse coordinate on a global variable when the mouse moves so that it will be ready for you when mouse is down.
let drag = document.querySelector('.note');
var pageX, pageY
drag.onmousedown = function(e) {
let coord = getCoord(drag);
let shiftX = pageX - coord.left;
let shiftY = pageY - coord.top;
drag.style.position = 'absolute';
document.body.appendChild(drag);
moveNote(e);
drag.style.zIndex = 1000;
function moveNote(e) {
drag.style.left = pageX - shiftX + 'px';
drag.style.top = pageY - shiftY + 'px';
var position = {
x: drag.style.left,
y: drag.style.top
}
}
document.onmousemove = function(e) {
moveNote(e);
};
drag.onmouseup = function() {
document.onmousemove = null;
drag.onmouseup = null;
};
}
function getCoord(elem) {
let main = elem.getBoundingClientRect();
return {
top: main.top,
left: main.left
};
}
window.onload = function() {
document.addEventListener("mousemove", function(e) {
pageX = e.pageX
pageY = e.pageY
});
drag.style.position = 'absolute';
document.body.appendChild(drag);
drag.style.display = 'block'
}
.note {
width: 50px;
height: 50px;
background: red;
display: none;
}
<div class="note"></div>

repeat call of javascript function is creating conflict

I am using the following JS function to have hover tooltip effect. The function works excellent. Problem happens after loading certain area with ajax. I need to call this function to work on the data collected through ajax (Jquery). That is OK as well. Problem is while I close the area called through ajax, I see unexpected behavior at the base page. The previous tooltip effects now show bubble within self (image is given below).
Any idea how to prevent this conflict?
function tooltip(){
$('.master_tooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
}
Call that function only once, otherwise the event handlers will be bound multiple times for the already existing elements.
What you need to do is rewrite it so it delegates the mouse events and works with dynamically inserted elements, like this
function tooltip(){
$(document).on({
mouseenter : function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title)
.appendTo('body')
.fadeIn('slow');
},
mouseleave : function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
},
mouseover : function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
}
}, '.master_tooltip');
}

How to Pan a div using JQuery

I have been trying for a while now to get a simple pan of a div to work, I however can not seem to get it to 100%. It partially works with bugs.
$("#view_point").mousedown(function(e) {
start_x = e.pageX;
start_y = e.pageY;
e.preventDefault()
//On Click set start x and y vars
}).mousemove(function(e) {
temp_x = e.pageX;
temp_y = e.pageY;
e.preventDefault();
}).mouseup(function(e) {
temp_x = Math.abs(temp_x - start_x);
temp_x = Math.abs(temp_y - start_y);
console.log(temp_x + " - " + temp_y);
//Animate the map
$("#tiles").animate({
marginTop: '-' + temp_x,
marginLeft: '-' + temp_y
}, 50);
});​
How do I go about making a pan script that will pan inside a div that has its overflow property set to hidden.

clientX and clientY not giving correct mouse pointer location

I wrote this simple code to print a small dot on the location where I clicked with the mouse pointer:-
$(document).ready(function(){
$('#pane').click(function(e){
var pixel = $('<div />')
.addClass('pixel')
.css({
top: e.clientY,
left: e.clientX
});
$('#pane').append(pixel)
});
});
See this fiddle I created. When I click anywhere inside the rectangle, a small dot is printed in that location. But the problem is that dot is not printed where the mouse pointer's tip was. See the below image to see what I meant:-
I tried in both Firefox and Chrome.
Your code is working correctly,
Zoom your page and check,
i have changed pixel height and width for better understanding from 2px to 3px.
and drawing from e.clientX -1 and e.clientY -1 position so it looks exactly center.
You can find Fiddle
The most examples I've found don't work if there are a scrolled page... I used this algorythm in order to get the position:
var getOffsets = function($event){
var p = {};
var body = "search the document for the body element";
p.x = body.offsetLeft;
p.y = body.offsetTop;
while (body.offsetParent) {
p.x = p.x + body.offsetParent.offsetLeft;
p.y = p.y + body.offsetParent.offsetTop;
if (body == document.getElementsByTagName("body")[0]) {
break;
}
else {
body = body.offsetParent;
}
}
return p;
}
However, after that you have to consider also other elements, im my case:
var GetExactClickPosition = function($event){
var tr = $($event.target);
if ($event.target.localName != 'tr'){
tr = $($event.target).closest('tr');
}
var listDiv = $($event.target).closest('div');
var p = getOffsets($event);
var container = $('#mailingListExcludeMenuContainer');
container.css({
top: p.y - listDiv.scrollTop() - tr.height() - container.height() + $event.offsetY + "px",
left: p.x + $event.offsetX + "px"
});
container.show();
};
I have a list with scroller inside the main scroller of the page...
I used it in order to show a little menu at the position of the mouse click.

Disabling default tooltip

Here's a tooltip script, http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/. It works great in all the browsers but the default tooltip isn't disabled in IE.
How can i update the following script to disable the default tooltip?
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
});
</script>
I don't see any reason to add the title attribute back in to the element on blur. You have it stored in the jQuery metadata. My guess is that is why IE is still showing it. Remove the line
$(this).attr('title', $(this).data('tipText'));
and see if that fixes it.
EDIT: That missed some requirements. This is untested, but might work:
$(document).ready(function() {
$('.masterTooltip').each(function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
}).hover(function(){
$('<p class="tooltip"></p>')
.text($(this).data('tipText'))
.appendTo('body')
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
Note that this is sub-optimal, as it calls $(this) twice in the each block, but that should be easy enough to fix.
I have simple solution to disable the default tooltip which is shown in left/right bottom side of the IE or other browser. [If your default tooltip is same as I mentioned]
Just write a simple javascript function
function GoToLink()
{
location.href = "mypage.htm";
}
call this function in tag like
<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">

Categories