I have some drag-and-drop elements on a page whose ondragstart function causes a child section to collapse, which is changing the height of the page, forcing an auto-scroll if the user is far enough down the page, which cancels the dragging, so the user has to try again. And worse, if the user happens to scroll back to the bottom and try dragging again, the whole process happens again.
Is there something I can put into my ondragstart (or maybe onmousedown?) function that prevents body resizing until onmouseup or something?
I suppose if this isn't possible, I'll have to figure out a way to have the draggable element's parent not resize...
Related
I have a scrollable element (overflow-y: auto;) in my HTML.
However, when you put mouse over it and start to use mousewheel it's not scrolling unless you click inside of it.
The only workaround I found was to add tabindex="-1" attribute to make the element focusable and then call $element.focus() when mousewheel events occur. This works to a some degree. However, when element is focused already, the focus() will not do anything and the element become unscrollable until you click outside of it and then click inside of it again. Also, I don't like this workaround because it will draw a focus border around the element.
What actually controls what element on the page receives the scrolling? The weird thing is that I can see that my element actually receives the mousewheel events, but it's not scrolling for some reason.
SO, how do I make sure that element is scrollable by mousewheel when mouse pointer is over it?
I'm testig it in Google Chrome.
I need to respond to a user manually scrolling an element that has a scrollbar.
Unfortunately, the scroll event occurs on the same element in several different circumstances:
when the user scrolls the element (the only one I’m interested in);
when the user resizes the window and the element’s scroll position changes indirectly;
when the user changes the zoom of the page and the element’s scroll position changes indirectly;
when the code changes the element’s scrollTop position programmatically.
Is there any way to isolate only the first case and have a handler trigger only when the user actually literally scrolls the element?
I don't know if it is what you are looking for but, as said in this page, you can check the event.target to verify if your scroll is on the wanted element.
You can prevent the bubbling of the scroll event by preventDefault() as much as I can remember.So if you register the scroll event(j-query) on the control and prevent it's bubbling up to the other controls I think is gonna solve what you are looking for.
I have an application that contains several transitioning elements. These same elements react to mouseenter and mouseleave events. These events are deactivated during transitions to avoid users interacting with elements in transit.
The problem comes in when one of these elements are underneath the mouse when they are made active again. Once the moving elements are no longer moving, they should again register that the mouse is hovering on top of them. But since the mouseenter took place whilst the element was deactivated, the event is not fired once the element is made active once more.
If you then move your mouse off of the element, and then on again, it works fine. This is obviously not very user friendly.
Is there a way to register that the mouse is hovering on an element without moving the mouse?
More information on the elements discussed above:
The elements in question are large divs that contain a lot of content. They are actually pages in the application that I add and remove dynamically. I have a custom scroll bar that shows if the area has focus, and hides if it does not.
As the mouse moves into the page content area, the custom scroll bar shows. Once it moves out, the scroll bars hide again. All events are made inactive whilst the animation is running.
The problem is that is the mouse moves into the page area whilst a page is animating, the the scroll bars do not (and should not) show. Once the animation completes, however, the application should register that the user is hovering inside of the page area without him moving the mouse outside and back inside this space.
Track the position of the mouse using a mousemove event, and test the element at the last known mouse position when you re-enable the behaviour using
document.elementFromPoint(x, y)
http://jsfiddle.net/nicktheandroid/7raYa/9/
My script allows me to scroll the page like a PDF, allowing you to grab the page and drag down or up. My problem, is that when i use the scrollbar, then mouseup from the scroll bar, the scrollbar will stick and scroll with my mouse up and down, even though my mouse is up. So when clicking on the scrollbar, its like i never moused up. how do I fix this?
THANKS!
I believe the scrollbar is part of the page, so when you click it, it makes your script believe the mouse is down - you'll notice that after you mouseup from clicking on the scrollbar that the page continues to move up and down until you click. Try to grab the coordinates of the mouse on mouse down, and make sure that the click occurred inside of the page (minus the scrollbar)
Edit: I was correct - here is the updated jsFiddle with it working: http://jsfiddle.net/xDtVL/
I have a div which is set to overflow:scroll;. I get scrollbars which is what I want. However when scrolling the div with the mousewheel it scrolls the rest of the page when it reaches the top or bottom of the div's content.
How can I scroll only the div or the entire page based on what's hovered ?
First I don't think you can override the scroll event. So here is what I would do. I don't know jquery but here is some straight javascript.
document.getElementById('scrollDiv').onmouseover=function(){
document.getElementByTagName('body')[0].style.overflow='hidden';
}
document.getElementById('scrollDiv').onmouseout=function(){
document.getElementByTagName('body')[0].style.overflow='';
}
Obviously you could tweak this a little, but this is the basic idea. Also, if you need to you could do other test cases. Like if the div has focus then do the same thing. Depends on your setup.
You could test the mouse position and cancel the scroll events for the document if the mouse is within the bounds of the div.
In this case, I think you'll have to override the default onscroll event for the body. In your handler, you'll need to manually scroll the div's contents.