I'm searching for a script like Photoswipe that works on desktop on mouse events, simulating swipe gestures.
Photoswipe without thumbnails is perfect - only I want to animate not only images but a whole div!
The first good-looking result was a jQuery plugin called jQuery mouseSwipe.
But this script only moves around a parent div which contains the items visually moved around.
If that is not enough, you should consider writing something for yourself.
Listen to mousedown and mouseup events and check the distance from the startpoint to the endpoint. If it is higher than a threshold you defined, let's say 100 Pixel, go to the next or previous element, based on the direction of the movement.
If you want it to be animated, you should also listen to the mousemove event and move the element around.
Related
Need to implement really big graphic report with up to 5K elements on it (Gantt chart).
User must be able to scroll through report (scrollbar or mouse grab action) and change scale.
So far I came up with following ideas:
Scrolling by mouse grab action
Listen to user mouse down event and rerender the whole canvas on every mouse move (changed position) until mouse up event.
Scroll bars
Have to be custom made (also canvas or just html), also with event listeners on move action.
Scale
Could be implemented by using canvas scale property.
Do I think in right direction or there's a better (less code / more efficient) approach?
I am implementing a scrollbar using jQuery/Javascript/CSS. The usual. Everything is going according to plan except for the following use case:
The user mouses down in the scrollbar div hosting mousedown/mousemove/mouseup event handlers. The user initiates a drag gesture - mousemove starts firing - that soon moves the cursor outside the bounds of the scrollbar div and onto the surrounding div real estate on the web page. The moment this happens, mousemove - as expected - stops firing events.
How do I continue to have mousemove fire events without resorting to just attaching a mousemove handler to the root div? How do I maintain scrollbar dragger translation even though the cursor has wandered off the scrollbar?
Thanks,
Doug
Instead of using onmousemove on the element, use it on the document.
I have a div on which I listen for swipe events using jQuery mobile.
I was wondering how I could get the div to follow and move with the finger from the time that the swipe starts until the time that the swipe ends?
Almost like draggable only while the swipe is happening.
Although I would prefer to not use jQuery UI.
How can I do this properly and in the best way possible?
My method of doing this was on mouse down, set the offset of the div to the x location of the mouse. But that fires every pixel and seem inefficient. Also it happens on mouse-down, not on swipe.
Here is my code that listens for the swipe, in this case swipe right:
$('#main').on('swiperight', '.dataCard', function(event){
event.preventDefault();
// what happens on swipe here
});
Now, how can I get .dataCard to follow the finger as it swipes until the finger is picked up?
Well, you can inspect the event in a breaking in a debugger. Also, you cannot change positions of a "relative" element, it will always be in document flow position (hence why I asked if you had made the element absolute).
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)
I want to build a classical gallery where with the finger is possible to move the photo to left or right to see the next or previous photo.
I use jQuery binding the event touchstart, touchmove, touchend for calculate the positions of photos using the property event.pageX.
The problem is when moving finger the page begin to scroll. Immediatly the listener of touchmove stop to be invoked.
To fix the problem I had put in the touchmove listener the call event.preventDefault() and the listener was invoked regulary and the page stopped to scroll.
I want that the finger can move the photo and at the same time can scroll the page.
I see in the apple website this happen regulary (see this page http://www.apple.com/osx/)
and even this script do the same http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
I want to know the concept behind the scene. I can't understand what I have to do to fix that.
I even try to use preventDefault and set the $(window).scrollTop by hand calculated by the pageY but the effects was very ugly.