function move(event){
box.style.left=event.clientX-25+"px";
box.style.top=event.clientY-25+"px";
}
I created a dynamically div element named box, and then added mouseup and mousedown events, In mouseup, mousemove event will be added, in mousedown , it will removed
when mousemove event will be added with the function move, and also removed with the same
I want to make sure that this element doesnot go off Screen while i am moving the mouse or dragging the box
Thank you very much
You must define the dimensions of the dragged element beforehand, and then limit the the x and y based on the window's width&height:
var element_w = 50
var element_h = 50
function move(event){
box.style.left=Math.max(0,Math.min(window.innerWidth-element_w,event.clientX-25))+"px";
box.style.top=Math.max(0,Math.min(window.innerHeight-element_h,event.clientY-25))+"px";
}
mousemove event gives the delta from the last mousemove event position.
With this information, you have two options:
Get the current position when the user first pressed the mouse button, and add it's delta to the initial values
Get the current position of the box on every mouse move and add the delta to it.
The second one is more memory consuming and will create a lag for the move because of the position calculations, so the first option is the one you should go with.
Don't want to interfere with your learning curve. But this is a common situation and wherever you search it, you'll find a correct and working answer. You just needed to search it. For example here is one: javascript use drag to move element
Related
So I have an element behind another, but it's still visible(its covered only partially by the element itself, but is otherwise completely covered by the margin attribute of the element above). I want to trigger a mouse event when I mouse over, but it doesn't get passed to it because of the element in front. I know how to calculate if I am over it and how to point to it, but I don't know how to send it the event onmouseover or hover or onmouseout.
If it helps I would be pointing at it by using document.getElementById("<calculated id>"). I know this works because it's ID is based off of its location within a grid, so I just have to calculate the position of the mouse and relate it to the grid.
Also the event that is supposed to happen(but isn't because of the things in front of it), is a :hover that triggers a simple transition animation via CSS.
document.getElementById('elementInFront').addEventListener('mouseenter', function(){
document.getElementById('elementBehind').DoYourStuff();
});
Does this work? I'm not sure if I understand your intention.
var item = document.getElementById("CalculatedId");
item.addEventListener("mouseover", func, false);
function func()
{
console.log("Hovered");
}
You can use the css property
pointer-events: none;
On the top element. This will allow all mouse events to "fall-through" to the element in the back. Unfortunately this doesn't work in IE, the only simple alternative for that is to make the front element's background transparent
I have two divs that overlap each other completely. The div above is a partially transparent HTML5 canvas, and the parts that are not transparent interact with mouse hovers, clicks, scrolls, etc.
The div below has a map (using leaflet), and similarly it is supposed to interact with hovers, clicks, scrolls, etc.
I can register a click in both divs by having code as follows:
$("#canvas").click(function(e){
$('#map').click();
}
However, in order for my app to work properly, the click event (and all other mouse events) need to register in the identical X-Y position.
All I really need to do is pass e.pageX and e.pageY over to the new click function, since the two divs overlap completely (AKA identical 4 corners) - however I am unsure how to do this. Using JQuery (or any other alternative means), how can I register a click in a specific X-Y position in the div #map?
// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event("click", { pageX: pageX, pageY: pageY });
// trigger an artificial keydown event with keyCode 64
jQuery("#map").trigger( e );
This would "register a click in a specific X-Y position in the div #map".
Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.
Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.
Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc
I have a function which runs based on a setInterval() call. It looks like this:
function update()
{
destinationY = targetPage.offset().top - $("div#reel").offset().top;
currentY -= (currentY - destinationY) / REEL_EASE;
$(document).scrollTop(currentY);
}
This updates the position of the document constantly to give the effect of a sliding animation, sliding towards certain points which are stored by the navigation items.
I want to not run the above code if the scrollbar has been clicked on the page. How can I call a method when the scrollbar is clicked?
You can't detect when the bar itself is clicked. The closest you can get is attaching a handler to window.onscroll, which is fired only when the scrollbar's position changes (clicking to scroll or mouse wheel up/down to scroll).
http://jsfiddle.net/CTHCe/
This isn't an exact answer, but you should be able to use the scroll event to keep track of whether the scrollbar is being used:
http://api.jquery.com/scroll/
I've been working on making a change to the jQuery add-on tooltipsy so that it locks on-to the mouse.
Getting it to do this is a simple task, all you have to do is change the showEvent to 'mousemove' however, because that is the show event, every time you move the mouse it has to redo the entire tooltipsy function for every pixel you moved, so the box doesn't keep up properly with the mouse.
Also, because of a problem with the lagging box and mouseleave, the box doesn't usually hide properly on mouseleave (because the function as to be run for every pixel your mouse moves so it's still computing after you mouseout)
This problem would ordinarily be easy to solve. All you would have to do is split the show hide and move into three different events. (mouseenter, mouseleave, and mousemove respectively) however, getting this to work in the context of tooltipsy is a much more complicated matter.
Here is the example:
http://jsfiddle.net/MarkKramer/HwpEs/2/
Notice how on the third div I got it to follow the cursor, but it is using mousemove as the showEvent, when really mousemove should only be used to get the coordinates of the tooltips.
If someone can solve this I will be very grateful.
Update: I tried putting if alignTo = cursor in a mousemove, which would work except that the function messes with the variable's scope.
That plugin seems to be way too complicated if you want basic tooltip behavior.
The code for a tooltip like that is quite simple:
$('#tooltip-container').mousemove(function(e) {
$('#tooltip').css('left', e.pageX + 20);
$('#tooltip').css('top', e.pageY + 20);
});
$('#tooltip-container').mouseleave(function() {
$('#tooltip').hide();
});
$('#tooltip-container').mouseenter(function() {
$('#tooltip').show();
});
If you want a live demo, here ya go: http://jsfiddle.net/DR4Wv/6/