I made a code that make a div follow the mouse on the window navigator, here is the code:
<script type='text/javascript'>
window.onload = function()
{
window.onmousemove = function(event)
{
var evento = event || window.event;
var bloque = document.getElementById('x');
bloque.style.top = evento.clientY+'px';
bloque.style.left = evento.clientX+'px';
}
}
</script>
BLOQUE
It works on firefox but it does not on IE. It simply does not do anything. What I am doing wrong?
var isMSIE = /*#cc_on!#*/0;
if (isMSIE) {
// do IE-specific things
bloque.style.top = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop+"px";
bloque.style.left = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft+"px";
} else {
// do non IE-specific things
bloque.style.top = event.clientY + window.scrollY+"px";
bloque.style.left = event.clientX + window.scrollX+"px";
}
Related
i need a little help. i want to make something that you put in console and it press Enter bottom for 2000 times and auto click for 2000 times with no delay ! and a key for stop this action. anyone can help me ? thanks a lot !
With jQuery:
function enter_key(ctrl, alt, shift, which) {
var e = $.Event("keydown");
e.ctrlKey = false;
e.altKey = false;
e.shiftKey = false;
e.which = e.keyCode = 13;
$(document.documentElement || window).trigger(e);
}
var stop = false;
for (var i=0; i<2000; ++i) {
if (!stop) {
enter_key();
}
}
click is simpler:
var stop = false;
for (var i=0; i<2000; ++i) {
if (!stop) {
$('button').click();
}
}
and you can stop the iteration by setting:
stop = true;
i thing about this and i found a code that click on the specific position :
var elem = document.elementFromPoint(x, y);
elem.addEventListener('click', function() {
console.log('clicked')
}, false);
var support = true;
try {
if (new MouseEvent('click', {bubbles: false}).bubbles !== false) {
support = false;
} else if (new MouseEvent('click', {bubbles: true}).bubbles !== true) {
support = false;
}
} catch (e) {
support = false;
}
setInterval(function() {
if (support) {
var event = new MouseEvent('click');
}else{
var event = document.createEvent('Event');
event.initEvent('click', true, true);
}
elem.dispatchEvent(event);
},1000);
and i found this code for get mouse position :
function FindPosition(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
so how can i use this code to import mouse position in auto click code ???
I have a page that only uses this excellent parallax function and I don't want to load jQuery just for that.
Can you write this function in plain javascript and keep it small and readable? (Has to work in IE10+, modern browsers)
$(document).ready(function(){
function draw() {
requestAnimationFrame(draw);
// Drawing code goes here
scrollEvent();
}
draw();
});
function scrollEvent(){
if(!is_touch_device()){
viewportTop = $(window).scrollTop();
windowHeight = $(window).height();
viewportBottom = windowHeight+viewportTop;
if($(window).width())
$('[data-parallax="true"]').each(function(){
distance = viewportTop * $(this).attr('data-speed');
if($(this).attr('data-direction') === 'up'){ sym = '-'; } else { sym = ''; }
$(this).css('transform','translate3d(0, ' + sym + distance +'px,0)');
});
}
}
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
You can do what you're asking here by looking at You Might Not Need jQuery.
Your code, translated to vanilla javascript, should be something like this:
document.addEventListener('DOMContentLoaded', function() {
function draw() {
requestAnimationFrame(draw);
// Drawing code goes here
scrollEvent();
}
draw();
});
function scrollEvent() {
if (!is_touch_device()){
var viewportTop = window.scrollY;
var windowHeight = document.documentElement.clientHeight;
var viewportBottom = windowHeight + viewportTop;
if (document.documentElement.clientWidth) {
var parallax = document.querySelectorAll('[data-parallax="true"]');
for (var i = 0; i < parallax.length; i++) {
var item = parallax[i];
var distance = viewportTop * item.getAttribute('data-speed');
var sym = item.getAttribute('data-direction') === 'up' ? '-' : '';
item.style.transform = 'translate3d(0, ' + sym + distance +'px,0)';
}
}
}
}
function is_touch_device() {
return 'ontouchstart' in window || 'onmsgesturechange' in window;
}
Here's my simple code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
</style>
<script>
var exit = 0;
document.onmousedown = function (e) {
exit = 0;
document.onmousemove = function (e) {
if (exit == 1) {
return;
} else {
var x = e.pageX;
var y = e.pageY;
var e = document.createElement("div");
e.style.width = 10 + "px";
e.style.height = 10 + "px";
e.style.background = "red";
e.style.top = y + "px";
e.style.left = x + "px";
e.style.position = "absolute";
document.body.appendChild(e);
}
};
};
document.onmouseup = function (e) {
exit = 1;
};
</script>
</body>
</html>
It's like painter.You hold left mouse button down and when you move mouse, it should draw line made of div elements and when you release button, it stops.It actually works...sometimes.First time it works perfect, but after letting left mouse button go up, and after additional press, only one element is drawn and moving mouse does not do anything.To be exact- sometimes it does and sometimes doesn't.Best would be if you could try this code and see what happens.Thanks.
It seems to be because it conflicts dragging with selection. Both events involve mousedown and subsequent mousemove.
You will need to prevent default of event and then run your code.
Updated fiddle: http://jsfiddle.net/L4KhJ/2/
Prevent the default on both events, like this:
document.onmousedown = function (e) {
stopDefault(e); // *** prevent default here
exit = 0;
document.onmousemove = function (e) {
stopDefault(e); // *** prevent default here
if (exit == 1) { ...
Where stopDefault is:
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
else {
window.event.returnValue = false;
}
return false;
}
Code for above function taken from this thread here: https://stackoverflow.com/a/891616/1355315
When you add some log output, you see that sometimes after a mouseup event, you get a mousedown shortly after.
Maybe this is a timing related problem. I moved the assignment to onmousemove outside the onmousedown function and now it works properly
var exit = 1;
document.onmousemove = function (e) {
if (exit == 1)
return;
var x = e.pageX;
var y = e.pageY;
var el = document.createElement("div");
el.style.width = 10 + "px";
el.style.height = 10 + "px";
el.style.background = "red";
el.style.top = y + "px";
el.style.left = x + "px";
el.style.position = "absolute";
document.body.appendChild(el);
};
document.onmousedown = function (e) {
exit = 0;
};
document.onmouseup = function (e) {
exit = 1;
};
See JSFiddle
I am using the following function to drag a div by a handle:
function enableDragging(ele) {
var dragging = dragging || false,
x, y, Ox, Oy,
current;
enableDragging.z = enableDragging.z || 1;
var grabber = document.getElementById("myHandelDiv");
grabber.onmousedown = function(ev) {
current = ev.target.parentNode;
dragging = true;
x = ev.clientX;
y = ev.clientY;
Ox = current.offsetLeft;
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z;
console.log(dragging);
window.onmousemove = function(ev) {
pauseEvent(ev);
if (dragging == true) {
var Sx = ev.clientX - x + Ox,
Sy = ev.clientY - y + Oy;
current.style.top = Sy + "px";
current.style.left = Sx + "px";
document.body.focus();
// prevent text selection in IE
document.onselectstart = function () { return false; };
// prevent IE from trying to drag an image
ev.ondragstart = function() { return false; };
return false;
}
};
window.onmouseup = function(ev) {
dragging && (dragging = false);
}
};
}
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
I have two problems:
Does not work in IE 7 & 8, for some reason i get no errors whatsoever.
Text is selected on some browsers while dragging causing the drag to appear laggy
I initiate the drag like this:
var ele = document.getElementById("divDragWrapper");
enableDragging(ele);
Update, am now getting this error in IE:
SCRIPT5007: Unable to get value of the property 'target': object is
null or undefined
On this line: current = ev.target.parentNode;
You need to add ev = ev || window.event to all eventhander functions. Older IEs don't pass the event object within arguments. Also target is rather srcElement in those browsers.
For example:
grabber.onmousedown = function(ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
current = target.parentNode;
...
}
Another thing is, that older IEs can't attach onmousemove to the window. You can use document or document.body instead.
See the code in action at jsFiddle.
I've found this snippet on Ajaxian, but I can't seem to use the cursor.y (or cursor.x) as a variable and when the function is called as such it does not seem to work. Is there a syntax problem or something else?
function getPosition(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else {
cursor.x = e.clientX +
(document.documentElement.scrollLeft ||
document.body.scrollLeft) -
document.documentElement.clientLeft;
cursor.y = e.clientY +
(document.documentElement.scrollTop ||
document.body.scrollTop) -
document.documentElement.clientTop;
}
return cursor;
}
I'd preffer not to use jQuery UI if possible, since I've always thaught of jQuery and librarys as a bit of an overkill for most JS programing.
This has always been difficult to achieve cross-browser, but this is about as good as you can get...
<!DOCTYPE html>
<html>
<head>
<title>Javascript Test</title>
<script type="text/javascript">
window.onload = function() {
document.onmousemove = function(e) {
if(!e) e = window.event;
if(e.pageX == null && e.clientX != null) {
var doc = document.documentElement, body = document.body;
e.pageX = e.clientX
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc.clientLeft || 0);
e.pageY = e.clientY
+ (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc.clientTop || 0);
}
document.getElementById("pos").innerHTML = e.pageX + ", " + e.pageY;
}
}
</script>
</head>
<body>
<h1>Position: <span id="pos">0, 0</span></h1>
</body>
</html>
This snippet must be called inside a mouse event handler, with the event object from the handler.
//edit//Just in case I misunderstood you can not set the mouse's physical position in javascript.
So I found an answer kind of on here so I shall Simply Link to it for study purposes. Show mouse x and y position with javascript
Edited----Wanted to share what worked for me.
This is a form of the code I found at above link I changed slightly. It seems as though I must put certain things to window.onload.
window.onload = function () {
IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!IE) {
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousemove = function (e) {mousePos(e);};
document.onmousedown = function (e) {mouseClicked();};
};
var mouseClick;
var keyClicked;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!IE) {
mouseX = e.pageX;
mouseY = e.pageY;
}else{
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}