[Chrome] Page flip effect with mouse don't work

[Radigar]

Page flip effect with the mouse stopped working in chrome, is there any solution for this?

Thank you.

[ilCoso]

Same for me on Chrome 29.0.1547.66 m.

[emmanuelsio]

Yes, its a problem of the turn.js or Chrome affects some Jquery function?

[emmanuelsio]

Is there any solution? or workaround?

[umang011088]

Need some solution to this. Even I am facing the same issue with Chrome Version 29.0.1547.66 m., but works fine on Firefox and Chrome Version 26.0.1410.63

[istmin]

I am having the same problem as well. It works in Firefox and surprisingly in IE.

[AcidDragon]

The same problem for me. Note that it does work with the demos at the main site http://www.turnjs.com/ It does not work with the demos on github.

[banditqbons]

Yep , it happen to me too. And then i update turn.js source from this example http://www.turnjs.com/samples/magazine ( because it's work in chrome ) Then it fixed.Sorry for my weird english :)

---

Additional thing.If the image doesn't have same dimension with the container , then it will repeat it self.It doesn't happen in mozilla which automaticly fit image in the container. Check this http://qbons.sexyi.am/personal/fafay in FF and chrome.

[istmin]

Did you put the new source code on github? It says the latest commit was still a year ago.

[banditqbons]

No i don't.I have no idea how to do that.I'm new on this ( github ) thing.

[AcidDragon]

I found a workaround for the 3rd (free) version. It's a weird workaround, but it seems to work.

* Don't use turn.min.js. Use turn.js. *

I have no idea why, but it solves the corners problem under newer Chrome browsers.

[istmin]

Thanks. I'm going to try it and see if that works.

[axelvnk]

Having the same problem over here. Feel kinda ripped off since I payed 99$ for it, expecting it would work as demonstrated on the demo page. Is there a solution?

[jaydens]

I find turn to work fine on Chome and even chrome canary although on some pages I had a problem but worked around it. Put a snippet of your turn instance on here as there may be a workaround to it

[axelvnk]

Here you go http://pastie.org/8973176

Edit : I got it to work. I took a look at the jsfiddle thats online (http://jsfiddle.net/blasten/A9a7E/) and just did exactly what he did over there.

I took the liberty of using the library that's online (http://www.turnjs.com/lib/turn.min.js) just like in the fiddle.

I just bought a license through the website. Which allows me to use version 3, which I got in a zipfile. Since that's not working as demonstrated, I expect the developer to deliver me a license for version 4 which is the one that's online and working or deliver me a working version 3.

[maxshellmax]

use turn.js instead turn.min.js that solved for me also with opera.

[gildassamuel]

thank @AcidDragon it work fine in chrome to use turn.js instead turn.min.js

[bjoern-tantau]

It doesn't work with version 3 because Chrome exposes touch events even if no touch device is present. The solution is to always listen to both touch and mouse events. You should set the events to events = {start: 'touchstart mousedown', move: 'touchmove mousemove', end: 'touchend mouseup'} and replace every occurance of e = (isTouch) ? e.originalEvent.touches : [e]; with e = e.originalEvent.touches || [e];.

[angelbertin]

bjoern-tantau # YOUR ARE A SUPER GENIUS MAN!!!!! It really works.. !!!

(function($) { 'use strict'; var has3d, vendor ='', PI = Math.PI, A90 = PI/2, isTouch = 'Touch' in window, events = {start: 'touchstart mousedown', move: 'touchmove mousemove', end: 'touchend mouseup'}, // Contansts used for each corner // tl * tr // * // bl \ br

[tlacaelelrl]

@bjoern-tantau solution worked for me however slightly modified, downloaded the turn.js version 4.1.0 edited line 18 changed it from

isTouch = 'ontouchstart' in window to isTouch = window.DocumentTouch && document instanceof DocumentTouch

I am not setting any of the events when I instantiate turn.js so if you are you probably need also setting the events.

[angelbertin]

Thank you...It's very usefull....See you....

Ángel Bertín 

  From: tlacaelelrl <notifications@github.com>

To: blasten/turn.js turn.js@noreply.github.com Cc: angelbertin a_bertin@yahoo.com; Comment comment@noreply.github.com Sent: Thursday, October 13, 2016 1:23 PM Subject: Re: [blasten/turn.js] [Chrome] Page flip effect with mouse don't work (#399)

@bjoern-tantau solution worked for me however slightly modified, downloaded the turn.js version 4.1.0 edited line 18 changed it fromisTouch = 'ontouchstart' in window to isTouch = window.DocumentTouch && document instanceof DocumentTouchI am not setting any of the events when I instantiate turn.js so if you are you probably need also setting the events.— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[tcchau]

Just for further reference, this is what worked for me for mouse + desktop, laptop with touchpad that can act like a touch device, laptop with touchpad that acts like a mouse, and touch device (iPhone). This applies to turn.js version 4.1.0:

diff --git a/src/JS/turn.js b/src/JS/turn.js
index 98cf100..66ac176 100644
--- a/src/JS/turn.js
+++ b/src/JS/turn.js
@@ -23,15 +23,17 @@ var has3d,

   A90 = PI/2,

-  isTouch = 'ontouchstart' in window,
+  isTouch = (( 'ontouchstart' in window )
+    || ( navigator.MaxTouchPoints > 0 )
+    || ( navigator.msMaxTouchPoints > 0 )),

   mouseEvents = (isTouch) ?
     {
-      down: 'touchstart',
-      move: 'touchmove',
-      up: 'touchend',
-      over: 'touchstart',
-      out: 'touchend'
+      down: 'touchstart mousedown',
+      move: 'touchmove mousemove',
+      up: 'touchend mouseup',
+      over: 'touchstart mouseover',
+      out: 'touchend mouseout'
     }
     :
     {
@@ -2072,7 +2074,8 @@ flipMethods = {

     var pos = this.data().f.parent.offset();

-    e = (isTouch && e.originalEvent) ? e.originalEvent.touches[0] : e;
+    if ( e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0] )
+      e = e.originalEvent.touches[0] || e;

     return flipMethods._cornerActivated.call(this,
       {
@@ -2948,7 +2951,10 @@ flipMethods = {

     if (!data.disabled) {

-      e = (isTouch) ? e.originalEvent.touches : [e];
+      if ( e.originalEvent && e.originalEvent.touches ) 
+        e = e.originalEvent.touches || [e];
+      else
+        e = [e];

       if (data.corner) {

-- 
2.10.1 (Apple Git-78)

[nibhatt9]

I have one solution which may help you people.

Open your turn.js file and there you just change isTouch to false like isTouch=false at line 26.