how can get x,y when mousedown in image and then mouse move in the image and then mouseup get x,y
(2 x,y 1-x,y when mouse down 2-x,y when mouse up)
all the event in the one image.
and language jquery
this my code by this not working(image stick to mouse and only mouse_d called)
var mx1;
var my1;
$("document").ready(function ()
{
$("img#ground").bind("mousedown",mouse_d);
$("img#ground").bind("mouseup",mouse_u);
$("img#ground").bind("dragstart",mouse_d);
});
function mouse_d(event)
{
mx1=event.pageX;
my1=event.pageY;
}
function mouse_u(e)
{
mx2=e.pageX;
my2=e.pageY;
mx2=mx1-mx2;
my2=my1-my2;
}
Are you trying to achieve a drag and drop effect?
if so this is the ultimate solution:
http://jqueryui.com/demos/draggable/
when using firefox is the isNS variable true? otherwise an mouseup event isn't set.
Related
I'm seeking an onmouseover event to detect when the mouse hovers the top of the window. I'm only able to find onmouseover events for the whole page. How do I restrict it to just the very top of the window?
There's no "element" on the page I'm trying to attach the event to, as some have suggested. This should work with any webpage - I do not have any control over the HTML on the page.
Need only support modern browsers, simplest method possible, no jQuery.
The onmouseover can be added to any HTML element, that is any div, p, span, img, ul, anything. Do you have an element that covers the portion of the page you are interested in? Then just add the event to that element.
If the area where you want to catch the mouse movement doesn't correspond to an actual element, you can do it by adding the eventlistener to the body and the check where the pointer is:
document.body.addEventListener("mousemove", function(event) {
//Check if we are in the top area of the page.
if(event.pageY < 300) {
//Do something here.
}
});
If you want it to use the top of the page area of the browser as opposed to the page itself (so that scrolling does not affect where the cut off is on the screen) just use clientY instead of pageY.
JSFiddle for pageY.
JSFiddle for clientY.
alerts when mouse is at top of page: demo on jsfiddle: DEMO
JS:
(function (){//alert at top
function getPosition(e){
if (e.pageY < 75) alert('top');//switch to clientY for top of screen
}
document.addEventListener('mousemove', getPosition, false);})();
EDIT:
use: clientY for top of view screen, as page may be longer, this stays with screen
use: pageY for top of your website only
Maybe works...
$('body').on('mouseover', function () { // bind change event to select
if (event.pageY < 10)
alert(event.pageY)
});
I am doing a drag and drop function in javascript.
I already have the drag and drop working, but I have a question about the cursor's position. When I click on the object, instead of staying in the center of the object, the cursor automatically flies to the left corner of the object. I can still drag it, but I'm dragging it from the corner, not the middle.
The thing is, I don't know how to use Jquery, I'm learning basic javascript. I've tried googling, but things are all for more advanced projects.
This is how I am doing the drag and drop:
thing.on("pressmove", function (evt) {
console.log("mouse down");
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
stage.update();
});
thing.on("pressup", function (evt) {
console.log("mouse up");
});
Thank you for your time.
Im just wondering whether its possible to drag images/elements (whether inside a div or not) where the image/element is dragged to the far left and comes in from the right side of the screen - therefore dragging the image/element left to get the same result, or vice versa.
Similar to the google maps (on zoom level 1) the user can continuously drag the image left or right, and those images are on a continuous loop.
If so, what languages would you recommend using? javascript?
I hope this makes sense.
Many thanks
This is certainly possible using Javascript. Just have two copies of the image, and as you slide the images left, move the second copy to the right side. (Or vice versa if sliding right).
You can add event handlers to any element, including your images, that execute code while dragging. I apologize for not providing a complete working solution, I am pressed for time, I hope this helps as a starting point
var myGlobals = {
state: {
dragging: false;
}
};
$('.carouselImg').on('mousedown', function(e){
myGlobals.state.dragging = true;
});
$(window).on('mouseup', function(e){
// stop movement even if mouseup happens somewhere outside the carousel
myGlobals.state.dragging = false;
});
$(window).on('mousemove', function(e){
// allow user to drag beyond confines of the carousel
if(myGlobals.state.dragging == true){
recalculateCarouselPosition(e);
}
});
function recalculateCarouselPosition(e){
// These fun bits are left as an exercise for the reader
// the event variable `e` gives you the pixel coordinates where the mouse is
// You will have to do some math to determine what you need to do after this drag.
// You may want to store the coordinates of the initial click in
// `myGlobals.dragStart.x, .y` or similar so you can easily compare them
// You will probably set a negative CSS margin-left property on some element
// of your carousel.
// The carousel will probably have overflow:hidden.
// You will also have to manipulate the DOM, by adding a duplicate image to the
// opposite end and deleting the duplicates once they have scrolled out of view
};
What would be the best way to have a single image which when you hovered your mouse over it, it would cycle fade in/out into a series of other images (like 3 or 4) before returning back to the original? Also, it would stop fading/changing images and go back to the original image if you moved your mouse off of the image.
Any help is appreciated.
Thanks!
I would see about having the mouseover event (or hover if you are using an external library) of the object that you are wishing to switch tied to a window.setTimeout function. Make sure to store the timeout id so that you can cancel it if the user's mouse exits the window. The window.setTimeout would then scroll through the pictures.
Maybe something like this:
$(function(){
$("#test").hover(function(e) {
$.data("timeout", window.setTimeout(function() {
//Transition here
}));
}), function(e) {
window.clearTimeout($.data("timeout"));
//Put image back to normal
});
});
Hope this helps,
JMax
I've just created a custom carousel with images and have got previous/next arrows to move the images around.
Does jQuery have an event where I can click on the photo, drag it to the left or right and fire the same action that I currently have on the arrows?
My current code looks like this
$carousel.animate({
left: '+=' + amountToAnimate
}, 800, 'backEaseOut');
I also need to prevent Firefox from 'picking' the image up.
I'm already using jQuery UI if that helps.
You will need to add draggable() to your item and add some custom code the start event.
With more sample code it might be easier to give fuller advice, jsfiddle.net sample is best
EDIT:
You could use events api http://api.jquery.com/category/events/ , mousemove and mousedown, to figure which way to move the image, and call the animate event.
Re-using draggable , with some clever options and event functions may be better
I also need to prevent Firefox from 'picking' the image up.
Use the Mozilla CSS Extensions
-moz-user-focus:ignore;
-moz-user-select:none;
might to do the trick.
This may not be the most elegant solution but I believe it should do the job
// shortcut
var j = jQuery;
// add mouse down listener to the image
j('#image_id').mousedown(function(){
// add mouse move
j('#image_id').mouseMove(function(event){
// declare vars
var previous_x_position;
var previous_y_position;
if(x_position)
{
previous_x_position = x_position;
previous_y_position = y_position;
}
var x_position = event.pageX;
var y_position = event.pageY;
if(previous_x_position < x_position)
{
// we are moving right
}
else
{
// we are moving left
}
if(previous_y_position < y_position)
{
// we are moving down
}
else
{
// we are moving up
}
})
})