Forum Discussion

AVT-Digital's avatar
AVT-Digital
Community Member
3 years ago

Disable slide drag move on mobile (not transition)

Is there any way to disable finger drag moving a slide, on mobile devices? I've disabled swipe transition (Prev, Next) in the 'Slide Navigation and Gestures' but this doesn't seem to disable the slide moving, when dragged. Am I missing some setting here?

See attached clip for example. Captured in Chrome using developer tools (device toolbar).

Even a JS hack would be welcome.

storyline 360

1 Reply

  • ChrisHodgson's avatar
    ChrisHodgson
    Community Member
    3 months ago

    I'm really glad I found this post! I thought I was going mad when I noticed this happening today with my client's mobile-focused project. It's not something I've paid much attention to before so I figured this issue was something that happened because of a recent update, so I was surprised to see this has been going on for at least three years!

    When I emailed Articulate Support about the problem yesterday, the person that responded basically told me he considered this expected behaviour, which I cannot get my head around at all!..

    If anyone stumbles on this post in the future because you're also being frustrated by this then I have a code hack you can try that I think fixes the problem, but I need more people to try it to make sure it doesn't have any unknown side-effects. For my project though it seems to be doing the trick:

    Step 1 - Create an Execute JavaScript trigger that fires as soon as the activity loads, e.g. when timeline starts on first slide. You can also add to the slide master if users may load in on different slides.

    Step 2 - Paste the following code:

    (function() {

    var css = '.slide { transform: none !important; }';
    var styleId = 'storyline-slide-transform-fix-01';

    if (document.getElementById(styleId)) {
        console.log('Storyline JS: No action taken - CSS already injected (ID: ' + styleId + ').');
        return;
    }

    // If the element doesn't exist, proceed to create and inject it.
    var styleElement = document.createElement('style');
    styleElement.id = styleId;
    styleElement.type = 'text/css';

    if (styleElement.styleSheet) {
        styleElement.styleSheet.cssText = css;
    } else {
        styleElement.appendChild(document.createTextNode(css));
    }

    var head = document.head || document.getElementsByTagName('head')[0];

    if (head) {
        head.appendChild(styleElement);
        console.log('Storyline JS: Injected CSS (ID: ' + styleId + '): ' + css);
    } 
})();

    Now republish your project and hopefully you should no longer have a moving slide when any static area is swiped on mobile.

Related Content