Jump to content

Silverback IS

  • Posts

  • Joined

  • Last visited


4 Newbie

About Silverback IS

Profile Information

  • Gender
    Not Telling
  1. Sorry, you are correct, I didn't mean to confuse the situation! It is another potential solution to the main problem that a user can get completely stuck, and would provide a way they could scroll out of the draggable area to pinch and zoom. Easiest to demonstrate on CodePen: https://codepen.io/silverbackis/pen/VKNZZN So with the draggable area larger than the container, it'd be great if AutoScroll could be set to scroll the body when it reaches the edge of the container. I hope this helps to clarify, but I'm happy to start a new topic if this is not the best place to suggest this as an alternative way of preventing a user getting stuck. Sorry for my delayed reply as well!
  2. What about the idea of scrolling the next scrollable parent (perhaps defined by the user) instead of bouncing if already at the container boundary? If enabled it could default to scrolling the body if enabled? Similar to a scrollable div in iOS with -webkit-overflow-scrolling:touch applied
  3. Fair enough, thanks Jack I'll go down the route of disabling pinch zooms through JS if possible.
  4. Or alternatively...you could have a setting so that when you reach the boundary the touch move behaviour could scroll another element (by default the body perhaps). Kind of like how iOS scrollable elements work. You can scroll to the end, you get a bounce, but when the bouncing stops, if you then try and scroll down, the next parent element which is scrollable will start scrolling. That way at least you could get out of the area where you cannot pinch-zoom. (Wouldn't work for Google Maps, but I don't know if anyone is using draggable for an infinite sized canvas)
  5. It's almost as if Apple have done something silly by not allowing developers to easily prevent zooming on mobile layouts It does seem like it may not be possible if the first touch has to have default behaviours prevented. The only thing I could think is allowing a user to only zoom if both touches are simultaneous. Also perhaps delaying the preventDefault() function by 200-300ms to see if there's a second touch but I'm not sure if that'd work either.
  6. Jonathan: The behaviour is easily replicated on any draggable element in all existing demos. The difference is that the draggable element in our site is a large area. But essentially what I need to work out if I can do is perform native zooming with the touches starting on the draggable element. You can't zoom in or out when touching the draggable element, but if I zoom in on the page then scroll into a large area where the draggable element fills the screen, a user wouldn't then be able to zoom out or scroll away. Jack: Thank you very much - I imagine it'd be a task and perhaps not possible, but thought it was worth asking the question. Thank you for your response. My other option is to disable pinch zooming using javascript which I think will be OK if there isn't another workaround. Thanks both! Sorry for my delayed reply.
  7. I don't have a CodePen url as I don't think it's necessary to explain the issue but you'll be able to see what I mean on our website www.britishwebsites.co.uk With a large draggable area, now that ios10 does not allow a developer to easily override the ability to pinch and zoom, it becomes necessary that the pinch-zoom functionality on a draggable area works. If you zoom into a large draggable area (our big map/island) you can not then zoom out again. You would have to zoom in on another part of the website then scroll into the map view, but it is possible to get completely stuck. Are there any plans to make it so the draggable plugin can allow multiple touches to perform the default behaviour (i.e. zooming)? I know I can disable pinch zooming through javascript still, but I suppose it is a good thing to allow users to zoom in on websites which is why Apple have decided to ignore user-scalable=no now.
  8. If it helps anyone else I've also found out that if you have a link surrounding an SVG shape/polygon, adding touchstart/touchend events to the shape or the link seems to result in the link having to be clicked many times on Chrome for Android. As a result, I will have to use those events and detect the distance moved manually to trigger a click like event. Probably a browser bug.
  9. After stripping out the draggable plugin until the links were working again, I've built it back up and realise the solution by OSUBlake is great and fixes the issue - thank you! Firstly, I had read that the xlink namespace was deprecated, but by not using the namespace, link links surrounding the SVG shapes were not clickable even without initialising the draggable plugin. So I got the links working again without draggable then the fun began. Without the 'allowEventDefault' value being true, not even the onClick event on Draggable will fire. By setting it to true, I can get the onClick from Draggable and the click event on the link themselves. I've only enabled that for Android mobile devices so far ( very useful mobile detection scripts here https://github.com/kaimallea/isMobile ). I have more testing to do on Explorer/Edge but thanks for helping get to this stage!
  10. I've just tried that which didn't work unfortunately - but thank you for the help. I imagine it is to do with how I've structured my HTML and the way I'm positioning the SVG shapes with a link surrounding them. Even though in the inspector I can hover over the links and they appear to be there and in the correct place I have a feeling it's got something to do with it. I'm setting up a test page on my site where I can continue to play step-by-step with what works and what doesn't. I don't know at what point it stopped working but it may have even been a browser update or something. If I take draggable off completely, those links don't appear to be clickable on the android devices. I can see now from experience that Android Chrome is very odd with how it handles touch/click events. I'll be back on here when I figure it out
  11. Thanks very much for this, it's been very helpful - it's revealed there must be something else interfering some how. The onClick handler on draggable has the same behaviour issue where the triggerElement needs to be tapped multiple times to trigger the event. I can see the CodePen works well though so it cannot be an issue with Greensock. Allowing the default event doesn't make a difference either. It is strange because once I manage to trigger that event, without dragging the area the click event triggers without an issue, as soon as I drag the element again, I have to tap lots of times. I'll keep plugging away at it. Thanks again!
  12. For more information, it appeared to work once on the device - but it may be similar to our website where the click functionality works before the element has been dragged a first time.
  13. Hi, I've created a codepen here: http://codepen.io/silverbackis/pen/GjRZLb With this simple implementation I can put an event on the clickable element inside the draggable element which triggers a popup. This works on iOS, desktop but fails on Chrome on Android - This can be replicated on a S7 Edge running the latest OS and a Samsung S5 OS 6.0.1 - Chrome on the S5 is version 52.0.2743.98 It'd be great if you can help by letting me know if there's a more recommended way of implementing this functionality. Thanks again. Daniel
  14. Thanks Carl, it may be easier for me to strip back our current site and test step by step. If I find anything useful that may be beneficial to the rest of the community I'll definitely post it here - and if I can find a simple way to recreate the problem I'll create a CodePen. Thank you for your very prompt reply.
  15. I forgot to say but the 'onClick' event on the draggable instance has the same problem. Please let me know if any more code would be helpful - thanks again.