I would like to record mouse movements and clicks.
Can I do it with JQuery or other JS library?
Thank you
take a look at: http://api.jquery.com/mousemove
there is a working example:
<!DOCTYPE html>
<html>
<head>
<style>
div { width:220px; height:170px; margin;10px; margin-right:50px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>
Try scrolling too.
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
</body>
</html>
You can handle the document's mousemove event and track e.pageX and e.pageY.
Related
I'm completely stuck here. I'm trying to create a program where i have 5 different divs. They need to be placed at random position when running the program. And they need to switch position when i drag my mouse over them. So far i've done this. (which is completely wrong).
function Init()
{
div = document.getElementById("pixel");
div = document.getElementById("pixel1");
div = document.getElementById("pixel2");
div = document.getElementById("pixel3");
div = document.getElementById("pixel4");
spaceW = screen.height - div.height;
spaceH = screen.width - div.width;
setTimeout(moveIt, 0);
}
function moveIt()
{
div.style.top = (100*Math.random()) + "%";
div.style.left = (100*Math.random()) + "%";
}
<body onload="Init()">
<div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"/>
</body>
Can someone nudge me in the right direction because this clearly doesn't work.
check out after fix some syntax error like Pal Singh mention
AND
add all div(s) to one array so can be easy to control it
add [getRandomNum() , percentwidth() , percentHeight()] functions to keep div(s) in page
add moveIt() function to do some animation when move
function RandomIt()
{
var div_array = [];
div_array.push(document.getElementById("pixel"));
div_array.push(document.getElementById("pixel1"));
div_array.push(document.getElementById("pixel2"));
div_array.push(document.getElementById("pixel3"));
div_array.push(document.getElementById("pixel4"));
div_array.forEach(function(entry) {
moveIt(entry,getRandomNum(1,100 - percentwidth(entry)),getRandomNum(1,100 - percentwidth(entry)))
});
}
function getRandomNum(min, max) {
return Math.random() * (max - min) + min;
}
function percentwidth(elem){
return ((elem.offsetWidth/window.innerWidth)*100).toFixed(2);
}
function percentHeight(elem){
return ((elem.offsetHeight/window.innerHeight)*100).toFixed(2)+'%';
}
function moveIt(elem,target_x,target_y) {
var pos_x = 0;
var pos_y = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos_x == target_x && pos_y == target_y) {
clearInterval(id);
} else {
if(pos_x < target_x){
pos_x++;
elem.style.left = pos_x + '%';
}
if(pos_y < target_y){
pos_y ++;
elem.style.top = pos_y + '%';
}
}
}
}
<body onload="RandomIt()">
<button onclick="RandomIt()">RandomIt</button>
<div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"></div>
</body>
I've added your code to fiddle: https://jsfiddle.net/x05b5suz/2/
Few things I would like to tell you:
div = document.getElementById("pixel");
div = document.getElementById("pixel1"); // This is wrong
div = document.getElementById("pixel2");
You should declare your variable with var keyword and their name should be unique in a scope of a function otherwise you are just overwriting them. So you can name them var div1, var div2 so on.
In HTML, you need to close your <div>...</div> tags, div are not supposed to be quick closed.
I hope this helps
I'm trying to simulate windows pointer trails effect:
with the same settings there's in windows. This is what I tried:
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = 0;
document.addEventListener("mousemove", function (e) {
$("#trail" + (a - 6)).remove();
document.body.innerHTML = document.body.innerHTML + '<img class="trail" id="trail' + a + '" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>';
document.getElementById("cursor").style = "z-index:2;left:" + e.pageX + "px;top:" + e.pageY + "px;";
a++;
});
*{cursor:none;}
#cursor {
position:fixed;
z-index:999999;
width:12px;
height:19px;
}
.trail {
z-index:1;
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<button onclick="alert('click')">click me</button>
But I have few problems with this code:
I can't press buttons or anything else, and if I change the z-index to be negative the cursor is behind the buttons.
If page zoom is different then 100% the cursor size is bigger/smaller.
It's too fast, in the windows pointer trails there's bigger gap between the cursor trails.
I want it to be possible to change trails length(like in the windows settings) but I can't do it because of problem 1.
You can use pointer-events:none to solve problem 1, to solve problem 2 you can do "transform:scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")", to solve problem 3 you can add cursor image only in odd/even loops(I compared it to the windows pointer trails and it's the same speed), and to solve problem 4 you can use animation timing:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{cursor:none;}
.trail
{
position:fixed;
width:0;
height:0;
transform-origin:0 0;
}
#trails
{
pointer-events: none;
position:fixed;
top:0;
left:0;
z-index:99998;
width:100%;
height:100vh;
}
#cursor
{
pointer-events:none;
position:fixed;
z-index:999999;
width:12px;
height:19px;
transform-origin:0 0;
}
#keyframes pointer_trails
{
0%{width:12px;height:19px;}
100%{width:12px;height:19px;}
}
</style>
<script>
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = true;
//makes image stay the same size:
$(document).ready(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
$(window).resize(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
//pointer trails effect:
document.addEventListener("mousemove", function (e) {
document.getElementById("cursor").style = "left:" + e.pageX + "px;top:" + e.pageY + "px;";
if (document.getElementById("_checked").checked && a)
$("#trails").append('<img style="animation:pointer_trails ' + document.getElementById('trails_length').value + 's ease-in-out;left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>');
a = !a;
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
</script>
</head>
<body>
<div id="trails"></div>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<div style="text-align:center">
<input type="checkbox" id="_checked" checked/>Show pointer trails
<br />
Short<input type="range" id="trails_length" min="0.02" max="0.15" step="0.026" value="0.15"/>Long
</div>
</body>
</html>
This is my part of code:
<div id="canvasImg" class="img-content position-relative">
<loading></loading>
<canvas id="Canvas" class="position-absolute"></canvas>
</div>
CSS used:
.position-relative{
position: relative;
}
.position-absolute{
position: absolute;
}
After generating the canvas image, I'm creating the some image dynamically.
var createCanvasImgDiv = function (markerDetails) {
var result = "<img src='../../../../../sharedAssets/images/device_marker.png'"
+ "class='position-absolute marker-Img'"
+ "id='" + markerDetails.deviceId + "'"
+ "name='" + markerDetails.externalName + "'"
+ "radius='" + markerDetails.radius + "'"
+ "emailTags='" + markerDetails.emails.join(",") + "'"
+ "/>";
return result;
};
_.map(deviceMarkers, function (tempMarker) {
var imagDiv = createCanvasImgDiv(tempMarker);
$("#canvasImg").append(angular.element(imagDiv));
$compile(angular.element(imagDiv))($scope);
});
Now I want the <img> object to move anywhere inside the parent div(id=canvasImg) on drag of mouse. Also I want the mouse position when it drops.
Please help me on this. Thanks in advance.
I've used jquery-ui draggable widget to achieve this.
$("#image").draggable({
containment: "parent"
});
$("#image").on("dragstop", function(event, ui) {
alert("mouse position: X:" + event.pageX + ", Y:" + event.pageY);
});
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="canvasImg" class="img-content position-relative" style="width:300px;height:200px;border:1px solid #000000;">
<loading></loading>
<canvas id="Canvas" class="position-absolute" style="width:200px;height:100px;border:1px solid #000000;"></canvas>
<img id="image" class="position-relative" src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00721-256x256.jpg" style="width:25px;height:25px;" />
</div>
when ever i hover over the image coordinates are displayed i would like to append those coordinates in a div is it possible
here is a fiddle of what i have so far
Fiddle
Jquery.js
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX);
}).$('#img').on('click', function () {
$('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
index.html
<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
I just updated your code a little bit and I hope it fulfills your requirements.
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX);
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('#img').click(function(e) {
$('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
The problem is that the click event won't call because the mouse will be constantly over #hoverdiv instead. So you will want to add a click event to that:
$('#hoverdiv').on('click', function (e) {
$( '<span>(' + e.clientX + ',' + e.clientY + ')</span>' ).appendTo( "#append" );
}).mouseout(function(){
$('#hoverdiv').hide();
});
Also note the appendTo() functions needs a html string as the argument. So add some tags (such as <span>).
Demo
There are few mistakes in the code.
The binding of click event to the image was not done correctly.
The tooltip displayed was right below the mouse and therefore the click event of the image was not going through. Please add and offset left or top so that the tooltip doesnt interfere with the click on the image.
I guess appendTo expects html and not plain text.
Corrected Code
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX + 10);
}).on('click', function (e) {
$('<p>(' + e.clientX + ',' + e.clientY + ')</p>').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
I have updated the code to capture the coordinates on hover and click.
To append text to a div on hover, add $('#append').append('(' + e.clientX + ',' + e.clientY + ')'); to your mousemove event.
Note: I have added an offset of 10px to the hoverDiv to move it away from cursor.
Updated Fiddle
$(function() {
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX + 10);
$('#appendHover').append('(' + e.clientX + ',' + e.clientY + ')');
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('.hover').click(function(e) {
$('#appendClick').append('(' + e.clientX + ',' + e.clientY + ')');
});
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
#appendClick {
background-color: cornflowerblue;
}
#appendHover {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hoverdiv"></div>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="appendClick">
</div>
<div id="appendHover">
</div>
Try a click event like this and see if it helps:
$('#img').click(function(e) {
var offset = $(this).offset();
alert(e.pageX - offset.left);
alert(e.pageY - offset.top);
});
If it's ok you can just append it to a div.
i am trying to get the users screen size and resize an image to fit their screen size my current code works but only in firefox. In IE and Chrome the image never resize could somebody please help me?
http://jsfiddle.net/dwcribbs/ZK4tK/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" src="../javascript.js"></script>
<script>
window.onload = function(){
var w =screen.availWidth - 20 + "px";
var h =screen.availHeight - 80 + "px";
document.getElementById('full').style= "height:" + h + ";" + "width:" + w; +";";
alert(h+w);
checkCookie();
document.getElementsByClassName('box1')[0].addEventListener('click', correct, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseover', shade, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseout', unshade, false);
document.getElementsByClassName('bg')[0].addEventListener('click', wrong, false);
function shade()
{
document.getElementById('button').style= "background-color: #ADD8E6; opacity:.4;";
}
function unshade()
{
document.getElementById('button').style= " ";
}
function loc()
{
var lo = "OS2.html";
return lo;
}
}
</script>
</head>
<body>
<div style="color: red;" onclick=" alert('Open Microsoft Power Point without *searching* for it\nSave it in the documents library (using backstage-view, save as), with the default name');" id="help">
<center>
?
</center>
</div>
<div class="wrap">
<img id="full" style = "height: 500px; width: 500px;"class="bg" src = "../Pic/desktop.png" >
<div id="button" style=" " class="box box1"></div>
</div>
</body>
</html>
Thanks!
Instead of
document.getElementById('full').style = "height:" + h + ";" + "width:" + w;
+";"; // Useless NaN
you should use [Demo]
var s = document.getElementById('full').style;
s.height = h;
s.width = w;
or [Demo]
document.getElementById('full')
.setAttribute('style', "height:" + h + ";" + "width:" + w);