I'd like to move mouse in my site browser window like here: www.lmsify.com.
How can I do this?
(javascript, flash, activex)
Regards,
LisaM
They're not really moving the mouse cursor (you can't do that with browser-based JavaScript; I can't speak for Flash and I stay away from ActiveX), they're moving an image that looks like a mouse cursor (in their case, http://www.lmsify.com/cursor.png).
You can move elements around the page using positioning (absolute, relative) and position properties (left, top, right, bottom). For instance, here's how to make an absolutely-positioned version of that cursor jump left and down each time it's clicked:
document.getElementById('theImage').onclick = function() {
var left, top;
left = parseInt(this.style.left, 10) + 10;
top = parseInt(this.style.top, 10) + 10;
this.style.left = left + "px";
this.style.top = top + "px";
};
Live copy
But obviously that's very crude. Various libraries like jQuery, Prototype + script.aculo.us, YUI, Closure, or any of several others can help you animate elements.
You can't move the mouse cursor in a browser. It can be simulated by moving an image with JavaScript or flash.
Related
I found this interesting example for a javascript Drag/Drop on https://codepen.io/islempenywis/pen/VXqJVY.
However, there is an issue with it that if you click on the top of the "TODO Item" rectangle, after drag (MouseDown + Drag + MouseUp) it is not possible to drop this item; it sticks to the cursor and travels with it :/
MouseUp is a simple function, nothing fancy :
function onMouseUp(e, item) {
isMouseDown = false;
item.style.backgroundColor = "#F44336";
}
Since I can replicate it with Chrome, Edge and Firefox, I am guessing that this is a code problem but can't find out what that would be.
Please help.
Geo
There is a miscalculation in the onMouseMove event handler:
item.style.top = e.clientY + mouseOffset.y + "px";
When you move the mouse while holding the "TODO" item, the top of the whole element, including its margin, is being placed on the vertical coordinate of the viewport (e.clientY) where you clicked and adjusted to the point in the element where you clicked (+ mouseOffset.y), so the element moves along with the cursor. But it is ignoring its margin. If you pay attention, when you click and move the item, it will move down slightly. Those are 10 pixels of margin. When you click on the top, the element will be placed slightly down the cursor, the cursor will lose it, and it gets bugged. To fix, you have to substract the margin in the calculation.
item.style.top = e.clientY - 10 + mouseOffset.y + "px";
Basically I am trying to create a little image at the top corner of a webpage, which would stay in the same position even if the page is scrolled and would show the position of the mouse.
The point is to have a large webpage that would extend down and right, and navigation of this large page would be easier if I had a little image that indicated where exactly the visitor is on this page (as the browser window is smaller than the page). I wanted to to just track the browser window position on the web page, but I cannot find anything that would help me do it, so I thought I might do it with just the mouse movement. The problem is that I know about nothing about java, so does anyone know how I could track the mouse position on the page (not the browser) and display it at the same time on a small image on the upper corner of the browser?
This would work, but only in modern browsers that support css3 transforms (scale):
JsFiddle
It works by copying the whole page that should be in the .actual-page div into a .thumbnail div which is positioned on the top left of the page. Then I scale the cloned page with css transforms and use javascript to replicate mouse movements into the little box, here's the script:
var TinyNav = function() {
this.init = function() {
var clone = $('.actual-page').clone();
$('.thumbnail').append(clone);
$('.actual-page').on('mousemove', function(e) {
var posX = e.offsetX;
var posY = e.offsetY;
$('.thumbnail .cursor').css({
top: posY / 10,
left: posX / 10
});
});
}
this.init();
}
var tinyNav = new TinyNav();
Another way of doing it would be using canvas, but browser support isn't the best with that either..
Hope this helps
I am currently developing a webpage for an iPhone which contains a DIV element that the user can touch and drag around. In addition, when the user drags the element to the top or bottom of the device's screen, I want to automatically scroll the page up or down.
The problem I am having is trying to determine a reliable formula to get the coordinates in the onTouchMove event that coorespond with the user's finger reaching the top or the bottom of the device viewport. My current formula seems tedious and I feel there may be an easier way to do this.
My current formula to determine if the touch event has reached the bottom of the screen:
function onTouchMoveHandler(e)
{
var orientation=parent.window.orientation;
var landscape=(orientation==0 || orientation==180)?true:false;
var touchoffsety=(!landscape?screen.height - (screen.height - screen.availHeight):screen.width - (screen.width - screen.availWidth)) - e.touches[0].screenY + (window.pageYOffset * .8);
if(touchoffsety < 40) alert('finger is heading off the bottom of the screen');
}
I have done a bit of Javascript reflection on objects such as the window, document, body, e.touches to see if I could find a set of numbers that would always add up to equal the top or bottom of the screen, but without reliable success. Help with this would be greatly appreciated.
Assuming the screenY field of a touch holds the y coordinate relative to the screen-top regardless of current scroll position, your current calculation does not make a whole lot of sense to me. I hope I did not misunderstand what your trying to do.
To find out if a touch is close to the top or the bottom of the device, I would first check if screenY is close to top (top being 0), since you can work with that value directly. Then, if it's not close to top, calculate how close it is to the bottom and check that.
var touch = e.touches[0];
if (touch.screenY < 50)
{
alert("Closing in on Top");
}
else //Only do bottom calculations if needed
{
var orientation=parent.window.orientation;
var landscape=(orientation==0 || orientation==180)?true:false;
//height - (height - availHeight) is the same as just using availHeight, so just get the screen height like this
var screenHeight = !landscape ? screen.availHeight : screen.availWidth;
var bottomOffset = screenHeight - touch.screenY; //Get the distance of the touch from the bottom
if (bottomOffset < 50)
alert("Closing in on Bottom");
}
That's actually not bad. You could also use Zepto.js and its built-in touch events and .offset() method to get it a little easier:
http://zeptojs.com/#touch
http://zeptojs.com/#offset
However, I'm interested to know whether or not you actually manage to get it scrolling at the bottom, and if the performance is smooth enough to make the effect worthwhile. (frequently scrolling in iOS interrupts JavaScript really hard)
I've looked at UIkit, and some other jQuery Context Menu Plugin's but they all tend to behave like this:
As you can see actual div with menu renders outside the window and so valuable content is not visible.
Is there any way to make a pop up div (say div has id menu) auto stick to right border on its own when there is not enough space using jQuery (meaning when it does not fit into current window borders move itself left so that it would appear where needed) like that:
Here is a suggestion that should be implementable to any popup feature (context menu / etc):
During the "right mouse down" event, just capture, and manipulate the x/y if its too close to the screen edge. And "corrects" it to the right value;
The following is just pesudo code.
if( pos.x <= menu.width ) {
pos.x = menu.width;
} else if( pos.x >= screenWidth - menu.width ) {
pos.x = screenWidth - menu.width;
}
I tend to use this plugin . It will auto-adjust the position to always stay in the viewport
In one of our projects we are using this one for context menu. Works fine.
I have a small problem.
I'm trying to do something like nikebetterworld.com's parallax background.
In my first attemp, I got something that works, but it can work better.
When I scroll, the background position changes. The problem is that it changes a few milliseconds after the scroll, so I can see how the background "jumps" after scrolling.
code:
var $w = $(window);
function move($c) {
var scroll = $w.scrollTop();
var diff = $c.offset().top - scroll;
var pos = '50% ' + (-diff)*0.5 + 'px';
$c.css({'backgroundPosition':pos});
}
$w.bind('scroll', function(e){
move(some_container);
});
Any suggestions?
Thanks.
Edit
Look at this example: http://jsfiddle.net/MZGHq/
(Scroll down until you see the background image)
The key is to use a fixed background if you must have it smooth. See http://jsfiddle.net/MZGHq/7/
References:
This page seems to have a good explanation of how the vertical parallax effect works: http://www.webdesignshock.com/one-page-website/
Also take a look at this one (they don't use fixed background...note how it looks a little jumpy like yours):
http://www.franckmaurin.com/the-parallax-effects-with-jquery/
var pos = '50% ' + (-diff)*0.5 + 'px';
I believe the problem is the 0.5. When you calculate the new position there is enough of a difference between the previous and new location for it to be a perceptible shift.
Changing 0.5 to 0.2 or lower minimizes this a bit, however the parallax effect is less pronounced - which is not what you want.
I would try a different approach - take a peek at GitHubs 404 page as an example:
https://github.com/ddflsdigjh;ad
use 'fixed' background
the displacement of background position should be much bigger than scroll (not 0.5 but 0.01)
it seemed that the problem take place only in FF. This is the slowest browser in rerendering pages and javascript.