stereobit / dragend Goto Github PK

scrollToPage not woking with scribe...animation is not smooth

Hi, plugin works fine on all browsers except in Firefox. How can i resolve that to work also in Firefox? Thnx

Using android, for scrolling down, I have to use two fingers but usually, we take one finger for scrolling. Any1 can help me?

I have tested the script in IE 11 but it does not function like expected. I cannot drag the page. Sometimes i can drag the first page but after that, it does not do anything. I also added hammer.js to the page as the description describes but that does not fix the problems.

i found out that IE did not like te following line:
dataTransfer.setData && dataTransfer.setData('text/html', null);
http://msdn.microsoft.com/en-us/library/ie/ms536744%28v=vs.85%29.aspx
// text/html does not appear to be a valid format.

But this does not solve the issues of IE. Can you point me in the right direction?

The callback functions do well in chrome but in Firefox and IE they do not seem to be called.
onSwipeEnd is never called
onDragEnd is called in Firefox but not in IE.

On touch devices, after applying dragend, we can no longer scroll up/down each dragend page's content (when content is longer than screen height).

Hi, i'm using this script on a mobile site that resizes responsively to table and desktop views...
I want a way to stop the dragend script at a certain point and give back control odf the nested elements...

something like:
$.dragend('destroy');

does this exist? I can't seem to find any documentation on this..
any help, thx!

If you drag a slide just enough, it does not click back into place. Then, when you go to click again to move to the next slide, it jumps back into place. This is present on your current website: http://stereobit.github.io/dragend/

You can see a video of this behaviour here: https://dl.dropboxusercontent.com/u/30820392/dragend%20reset.m4v

I discovered this while trying to make some modifications to your source - if I come across a solution or suspected piece of code, I will update the issue - in the meantime, I figured I would in case you might have some insight. Thanks!

EDIT: this is in Google Chrome v31. I tried to verify in Firefox (version 25), but your website and lib are misfiring and mostly no op in Firefox. Additionally, it looks like the suspect code is the -webkit-transform when it gets set during setStyles - this line:

element.style[property] = value;

as soon as that line runs with property = "-webkit-transform" and value = ""translateX(0px)", the slide has a reset.

We need more tests ...

See the navigation demo: http://stereobit.github.io/dragend/demos/with-control-elements/
clicking on the "1 2 3 4 5" navigation buttons in Firefox doesn't work. It appears that the scrollToPage is not working in Firefox 28.0. Is this a known issue?

Hi!
Is there any way to know the exact item that is showed?
Example: I have a ul with 3 li. I want to know what li is the actual item.

Thanks in advance :)

On demo pages, after you swipe a page/object a little bit, like 10 pixels, it does not bounce back.

In the opposite direction (from right to left), It works fine.

Sometimes when I scroll though my pages he accidentally jumps to the next page instead of scrolling to it. Does anybody have a fix/workaround for this?

I'm testing with firefox 28 and i have noticed (even debugging with firebug) the callback "OnSwipeEnd" isn't called.

Can you guys please add the project to bower.io?

i disable draggable by use preventDrag: true. then i want to recover draggable. i set

    .dragend({
        preventDrag: false
    });

but it does not working.

http://stereobit.github.io/dragend/demos/with-control-elements/

I have a drag jqueryUI method on a "content" div, which is inside of my "main" div with dragend. But I can't drag the "content" since I can only move the "main" div.

I'm using this plugin in an iPad web where i have to maintain my DOM as small as possible, so i have an base object where i instantiate this plugin and other objects that extend this one and are created on demand to user actions, for this OO stuff i use Fiber.

So my base class looks like this:

BaseArticle = Fiber.extend(function(){
    return {
//....
        init: function () {
//....
            this.$self.dragend({
                "minTouchDistance"  : "60",
                "keyboardNavigation": true,
                "pageContainer"     : ".slides-wrapper",
                "pageElements"      : "div.slide",
                "onSwipeStart": function () {
                    self.onSwipeStart.call(self, arguments[0]);
                },
                "onSwipeEnd": function () {
                    self.animateSlide(arguments[1].data("slide-n"))
                }
              });
        },
});

My problem was that event handling was never cleaned, so per each object that instantiate i have my handlers duplicated.

I've modified this plugin in this way that works for me:

    _observe: function() {
      this.container.hammer()
        .off( "drag")//Modified
        .on( "drag", this.settings.hammerSettings, $.proxy( this._onDrag, this ) )
        .off( "dragend")//Modified
        .on( "dragend", this.settings.hammerSettings, $.proxy( this._onDragend, this ) );

    swipe: function( direction ) {
      this.activeElement = this.pages.eq( this.page );

      // Call onSwipeStart callback function
      this.settings.onSwipeStart( direction, this.container, this.activeElement, this.page ); //Modified

  $.fn.dragend = function( options ) {
    var instance = this.data( "dragend" );
    //Modified
    if (typeof instace !== "undefined") {
      this.removeData("dragend");
    }
    instance = new Dragend( this, options );
    this.data( "dragend", instance );

Hope it helps to someone.

I have a vertical slider and inside every slide i have a orizzontal slider. I should swipe some pixels horizontally to can slide vertically. It's possibile to fix it ?

Is it possible to disable the touch/drag scrolling and only use .dragend("left") and .dragend("right") events bound to some buttons?

When running in Safari 6.1 the transition caused when swiping to right or left lags for a brief period before continuing the animation. The slide works great when clicking the control elements though.

The mobile demo is not working on my iphone5 or other emulator tools.
You can swipe left and right but can not scroll vertically.

If you look at the demo on desktop it appears to work because you can scroll the page with the mousewheel however on touch devices you can not click drag the vertically.

Any fixes to this problem?
thanks,
-chris

It can probably be done by using onSwipeStart function. But how? Does onSwipeStart provide any useful object?

On Safari 7.0 (build 9357.71 on 10.9 Mavericks) got systematic crash whenever there is a drag event over an image.

Assertion failed: (error == kCGErrorSuccess), function WKSetDragImage, file /SourceCache/WebKitSystemInterface/WebKitSystemInterface-7537.64/WebKitSystemInterface.m, line 1045.

Could be reproduced on all demos pages from the distribution (not compiled), or directly from the home page.

It works OK on Chrome.

here is the crash log

Process: com.apple.WebKit.WebContent [4030]
Path: /System/Library/PrivateFrameworks/WebKit2.framework/Versions/A/XPCServices/com.apple.WebKit.WebContent.xpc/Contents/MacOS/com.apple.WebKit.WebContent
Identifier: com.apple.WebKit.WebContent
Version: 9537 (9537.71)
Build Info: WebKit2-7537071000000000~3
Code Type: X86-64 (Native)
Parent Process: ??? [1]
Responsible: Safari [3761]
User ID: 501

Date/Time: 2013-12-04 19:29:28.043 +0100
OS Version: Mac OS X 10.9 (13A603)
Report Version: 11

Crashed Thread: 0 Dispatch queue: com.apple.main-thread

Exception Type: EXC_CRASH (SIGABRT)
Exception Codes: 0x0000000000000000, 0x0000000000000000

Application Specific Information:
Assertion failed: (error == kCGErrorSuccess), function WKSetDragImage, file /SourceCache/WebKitSystemInterface/WebKitSystemInterface-7537.64/WebKitSystemInterface.m, line 1045.

Bundle controller class:
BrowserBundleController

Process Model:
Multiple Web Processes

Thread 0 Crashed:: Dispatch queue: com.apple.main-thread
0 libsystem_kernel.dylib 0x00007fff8bc11866 pthread_kill + 10
1 libsystem_pthread.dylib 0x00007fff8bc4535c pthread_kill + 92
2 libsystem_c.dylib 0x00007fff834e2bba abort + 125
3 libsystem_c.dylib 0x00007fff834aca5f assert_rtn + 321
4 com.apple.WebKit2 0x00007fff8b5c8157 WKSetDragImage + 1098
5 com.apple.WebCore 0x00007fff8d4daea0 WebCore::Pasteboard::setDragImage(WTF::RetainPtr, WebCore::IntPoint const&) + 112
6 com.apple.WebCore 0x00007fff8cfb93c0 WebCore::Clipboard::updateDragImage() + 80
7 com.apple.WebCore 0x00007fff8cb6537a WebCore::CachedImage::notifyObservers(WebCore::IntRect const) + 154
8 com.apple.WebCore 0x00007fff8cb66ffd WebCore::CachedImage::finishLoading(WebCore::ResourceBuffer) + 205
9 com.apple.WebCore 0x00007fff8cb44025 WebCore::SubresourceLoader::didFinishLoading(double) + 133
10 com.apple.WebKit2 0x00007fff8b483ea1 WebKit::WebResourceLoader::didReceiveWebResourceLoaderMessage(CoreIPC::Connection_, CoreIPC::MessageDecoder&) + 541
11 com.apple.WebKit2 0x00007fff8b4836de WebKit::NetworkProcessConnection::didReceiveMessage(CoreIPC::Connection_, CoreIPC::MessageDecoder&) + 138
12 com.apple.WebKit2 0x00007fff8b45e9b9 CoreIPC::Connection::dispatchMessage(WTF::PassOwnPtrCoreIPC::MessageDecoder) + 101
13 com.apple.WebKit2 0x00007fff8b45e8e2 CoreIPC::Connection::dispatchOneMessage() + 106
14 com.apple.WebCore 0x00007fff8ca149ce WebCore::RunLoop::performWork() + 270
15 com.apple.WebCore 0x00007fff8ca148a2 WebCore::RunLoop::performWork(void) + 34
16 com.apple.CoreFoundation 0x00007fff8e4098f1 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION* + 17
17 com.apple.CoreFoundation 0x00007fff8e3fb062 __CFRunLoopDoSources0 + 242
18 com.apple.CoreFoundation 0x00007fff8e3fa7ef __CFRunLoopRun + 831
19 com.apple.CoreFoundation 0x00007fff8e3fa275 CFRunLoopRunSpecific + 309
20 com.apple.HIToolbox 0x00007fff8353ef0d RunCurrentEventLoopInMode + 226
21 com.apple.HIToolbox 0x00007fff8353ecb7 ReceiveNextEventCommon + 479
22 com.apple.HIToolbox 0x00007fff8353eabc _BlockUntilNextEventMatchingListInModeWithFilter + 65
23 com.apple.AppKit 0x00007fff86fc228e _DPSNextEvent + 1434
24 com.apple.AppKit 0x00007fff86fc18db -[NSApplication nextEventMatchingMask:untilDate:inMode:dequeue:] + 122
25 com.apple.AppKit 0x00007fff86fb59cc -[NSApplication run] + 553
26 com.apple.AppKit 0x00007fff86fa0803 NSApplicationMain + 940
27 com.apple.XPCService 0x00007fff8bb69c0f _xpc_main + 385
28 libxpc.dylib 0x00007fff895bfb2e xpc_main + 399
29 com.apple.WebKit.WebContent 0x00000001076cfba0 0x1076cf000 + 2976
30 libdyld.dylib 0x00007fff87fa15fd start + 1

By dragging slowly in reversed direction (eg. from page 2 to 1) and stopping after a few pixels, the page won't scroll to its full and bugs out a little bit.

Especially noticable by setting the 'minDragDistance' to something like 50+ pixels. The bug appears in browsers and on mobile devices.

could it be possible with this plugin to build a scrollable tab bar like the one in the image?

The translation animation is not starting from the current position but from far right when using dragend in an iframe.
You can try it here: http://finks.dk/test.html.
When testing you might want to set duration to above 1000 to see what is happening.

Great script though.

Hi, when i try dragend.js in mobile phone click is not working and also content i cannot scroll vertically inside dragend page that is not working? Is there any solution for that ?

Only fall back to hammer if it's there. If not use native drag events.

Dragend doesn't work on Chrome anymore.

It seems that the isTouch = 'ontouchstart' in win check on line 100 isn't valid anymore. ontouchstart is present in win (but has a value of null) hence isTouch always evaluates to true. This breaks swiping on desktop browsers as mouse events are not handled anymore.

This was already the case with Firefox (see my brief investigation in issue #46) but is now also happening on Chrome. Last week everything worked fine on Chrome (desktop) as it didn't have an ontouchstart property in win and the check on line 100 returned false.

Oddly enough, mobile browsers also report that ontouchstart is null so I wouldn't know how to differentiate between desktop and mobile without using a full-fledged browser detection library. Any thoughts?

On mobile when scrolling vertically (with dragend mode set to horizontal) its annoying to have the content dragging to sides litle-by-litle when user just want to straight scroll vertically.

Also having it moving pixel-by-pixel with the finger movement is a rendering hog.
Not sure if its only the taget device..

But I think should exist a threshold to trigger the swipe movement. If the user moves certain amount for the side dragend is configured (right, in the case of horizontal) then it starts to swipe..

Since Firefox 31.x all the dragend demos stopped working. Dragging with mouse is no more possible.

I am having issues with getting the nav and next/prev buttons to work in IE9. I noticed the nav does not work in this demo in IE9. http://stereobit.github.io/dragend/demos/with-control-elements/.

Any suggestions?

Hi there! Nice piece of work!

I found a small bug that may need some attention:
The page var is not set up properly when using scrollToPage. This is also viewable in the demo: http://stereobit.github.io/dragend/demos/with-control-elements/
When clicking on the pages at the bottom, the current page button does not become active. This is because in the onSwipeEnd the this.page always seems to be 0.

The solution is at line 760 in the _calcNewPage function. In my opinion it should be this.page instead of page.

Instead of destroying it, can we just disable it and resume it later?

I am using dragend and it is working fine on the first page, then i load another page using $.mobile.changePage() method, the page which is loaded, dragend is not working there.
I am calling it with the method:
$("#gallery").dragend();

When i looked into the issue, on second page it doesn't add classes to UL which contains all the swiping elements/

Below is structure of my block which contains dragend:

Please let me know how can i make it work in above scenario.

When adding new elements via ajax and calling dragend again it does not update and the new elements are avoided.

Is there a way to update the list when we insert a new element so we can swipe to it?
So far you can only swipe pre-defined page elements.

Hey there!

Nice plugin. It works very well. One question: is there a written method to unbind? For a responsive example, when reaching a certain screen size

because document.body is undefined

Not sure what this word means in use with this library - I noticed you mention it in the README but do not explain, and additionally, I see you are using it on the nested vertical dragend.js module on your main page, and I am curious about the utility of this property.

Thanks

can you make an example with scrollToPage please, i've tried, but i can't make it work.

Best regards

hello! how to increase when viewed on a mobile device, more ios
http://stereobit.github.io/dragend/demos/responsive/

It would really be great if you could select how many elements you want to be shown on screen.

ex:

• 1 element for mobile devices
• 4 elements for monitor

then swipe by one element, keeping the rest minus the first depending on your elements.

I checked it with my nexus 7 and it worked fine, is there any unsupported feature? or some problems?

Hi,

Thanks in progress for this awesome js!
Is there an easy implementation to scroll to a page with a specific id/class?

Cheers

Nick

Hello, this is the message I'm having while I load the script. I also have hammerjs + map file (latest version), and jQuery 1.10.2.
Why this message ?
Thanks

You can see the bug if you pull the page down in the demo.
http://stereobit.github.io/dragend/

I guess this only happens on horizontal direction.

Hey there,

Normally I would use SwipeJS for mobile sliders. But I think it's time to move on as the SwipeJS repo seems to not be maintained much... That's why I tried dragend JS and I like it so far! Great job you did.

Unfortunately, I need to be able to initialize / refresh dragen manually on window.resize(). Here is what I'm trying to achieve: a Bootstrap 3 grid on desktop that turns into a touch slider on mobile.

So far, here is what I've done: http://jsfiddle.net/SiamKreative/baz8504y/1/ (notice the setTimeout is here so that dragen has time to initialize).

Cheers

hey. First of all. great plugin. Thanks for your work.
I noticed though, that ... iOS7 click events don't reach the links within the pages

even on http://stereobit.github.io/dragend/ the links won't get triggered in iOS7.

any idea? Thanks