Databases
StackOverflow2013
Postsdbo
POkinetic js ipad scrolling
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POkinetic js ipad scrolling
    primarykey
    data
    text
    <p>I previously had an HTML5 canvas based application that I recently converted to using Kinetic JS. I was able to enable scrolling in desktop browsers and IOS by simply using overflow: auto on the encompassing div. Since converting over to using Kinetic scrolling no longer functions on mobile/iPad devices. </p> <p>I have tried working around this issue a few different ways though I am a bit stuck. First I tried using touchscroll though for various reasons this didn't work for me (things did scroll though the library is causing other issues). Next I tried adding the -webkit-overflow-scrolling: touch options to my div's style though this didn't seem to have any effect. </p> <p>Is there a standard way of scrolling a Kinetic JS canvas that is larger than your viewable area/div?</p> <p>Here is an example. If you view the example on an IOS device (iPad, iPhone, etc) you will notice that the top canvas does not scroll within the div while the bottom one does.</p> <p><a href="http://jsfiddle.net/blueshirts/uERVq/26/" rel="nofollow">http://jsfiddle.net/blueshirts/uERVq/26/</a></p> <pre><code>&lt;!-- KineticJS canvase, won't scroll on IOS devices. --&gt; &lt;div id="container" style="overflow: auto; width: 400px; height: 400px; background- color: gray"&gt; &lt;/div&gt; &lt;br/&gt; &lt;!-- Vanilla HTML5 Canvas, does scroll on IOS devices. --&gt; &lt;div id="canvasContainer" style="width: 400px; height: 400px; overflow: auto; background-color: red"&gt; &lt;canvas id="vanillaCanvas" width="800" height="600"&gt; &lt;/canvas&gt; &lt;/div&gt; // Create a stage instance that is larger than its parent div. var stage = new Kinetic.Stage({ container: 'container', width: 800, height: 600 }); // Create a layer. var layer = new Kinetic.Layer(); // Add some text... var text = new Kinetic.Text({ text: "KineticJS generated Canvas that won't scroll to IOS touches...", x: 0, y: 0, fontSize: 12, fontFamily: 'Calibri', textFill: 'Black' }); layer.add(text); // Add a rectangle to the layer so you can see if the content scrolls. var rect = new Kinetic.Rect({ x: 50, y: 50, width: 200, height: 100, fill: "yellow", stroke: "black", strokeWidth: 7 }); layer.add(rect); // Add the layer to the stage. stage.add(layer); // Create a "vanilla" canvas instance and draw the same rectangle on it. var canvas = document.getElementById('vanillaCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.rect(50, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke(); </code></pre> <p>Edit:</p> <p>Could be wrong though seems to me that this issue is caused by the fact that Kinetic is registering for touchmove events (and others) in the Stage class. In the handler it run's preventDefault which seems to stop mobile browsers from executing their default scroll behavior. If "I" had registered for touchmove events this would probably be desirable. Would be nice if Kinetic didn't register and handle events that I am not interested in. </p> <pre><code> _touchmove: function(evt) { this._setUserPosition(evt); var dd = Kinetic.DD; evt.preventDefault(); </code></pre> <p>I am able to demonstrate this issue here: <a href="http://jsfiddle.net/blueshirts/P9RaT/28/" rel="nofollow">http://jsfiddle.net/blueshirts/P9RaT/28/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBlueshirts
    1. USBlueshirts
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POkinetic js ipad scrolling
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POkinetic js ipad scrolling
      1. USinsertusernamehere
      1. VTFavorite
    3. VO
      singulars
      1. POkinetic js ipad scrolling
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload