Universal Scrolling Frames From InDesign to HTML and EPUB

Adobe InDesign is full of wonderful interactive capabilities. The old DPS/AEM Mobile (Folio) Overlays panel adds several additional options, such as scrolling frames.

While this extra interactivity was supported by DPS, as well as our tool—in5 (InDesign to HTML5)—it’s not supported by InDesign’s native export formats: ePUB, HTML, and Publish Online.

In looking for ways for add this interactivity for all formats, I heard from many people that scrolling frames were a high priority.

I worked with Chad Chelius to refine the CSS that would support scrolling frames in ePUB and Publish Online. Chad wrote up how to manually insert this code on epubsecrets.

Then I went one step further and created a simple panel that will let you control scrolling with zero coding.

animated demo of the panel

The scrolling frame will work in ePUB (Fixed Layout and Reflowable), HTML, DPS, Publish Online, and in5. Thus I’ve dubbed it Universal Scrolling Frames.

Compatibility

The panel works with InDesign CC or newer. Does not work with interactive PDFs.

Download

The Universal Scrolling Frames extension is free when you sign up for our newsletter.

Get Scrolling Frames

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. Jose Luis Pardo says:

    Thank you for “Universal Scrolling Frames for InDesign” but the installer does not work on Windows 10 X64 Spanish and Spanish Indesign CC 2015 x64. As I could not install I can not comment on it.

    1. Justin says:

      Hi Jose,
      Are you using the zxp or the alternate installer?

      1. Jose Luis Pardo says:

        I have tested and apparently zxp installer installs but when you open Indesign follows: Error code 30477.

        I can not post here a snapshot of the entire text.

      2. Justin says:

        There was an error in the initial release with international (non-English) versions of InDesign, but we posted an update last night. Try re-downloading from your original link. The latest version is 1.0.2.

  2. Jose Luis Pardo says:

    I downloaded it again and have installed zxp installer. When you open Indesign: Error code 30477

    1. Justin says:

      Send us an email with the screenshot and we’ll take a look.

  3. Wouter says:

    Thanks, this works really great!
    Is it posible to edit the CSS of the scroll-bars? I can’t find any place where the CSS code is written.

    1. Justin says:

      The CSS is copied into the output as its own file. You can edit that file (inside the EPUB package). There isn’t a good way to edit the CSS with Publish Online.

      1. Wouter says:

        Okay, thanks. So, if I wan’t to edit the CSS I can better do it manual as explained at: http://epubsecrets.com/adding-a-scrolling-frame-in-fxl-and-publish-online.php

      2. Justin says:

        For Publish Online, yes the manual technique will give you more control.

        For EPUB, you can unzip the file, edit the CSS file and repackage: https://indesignsecrets.com/unzip-and-zip-epub-files-safely-with-these-applescripts.php

        Alternatively, you can also attach an additional CSS file in the EPUB export dialog that overwrites the existing rules.

  4. James Howell says:

    Thanks for the scrolling bar, it works brilliantly and will help the epub!

    One thing though, the scroll doesn’t appear when scrolling using an iPad with iBooks. It does though when using iBooks on the Mac.

    Is there anyway to get the scroll bar to appear on the iPad?

    Thanks,
    James

    1. Justin says:

      Hi James,

      If the scroll is working, but not showing the scroll bar indicator, that may just be a limitation of the browser built into iBooks on the iPad.

      1. James Howell says:

        Hi Justin,
        Many thanks for getting back to me.

        Thanks,
        James

      2. Justin says:

        No problem, James. Happy to help!

  5. Sandee Cohen says:

    This is a wonderful thing. I have comments which might be bugs.

    First, I have a test page at: https://indd.adobe.com/view/d317282c-0551-4cb4-8431-066e71805297

    I discovered that an image only pasted in would not prompt the scrolling text panel to work. Sadness as some people want to move images around. (I’m doing that for my most recent project.)

    Next, I set the image as a group with a text frame. Works. As does an image in the text as an anchored object. This will be good for my purposes.

    However, the settings for Hide Scroll bars is wonky. If I set it to Hide, I can’t figure out how to scroll the text with the anchored image.

    And if I set it to Hide with Text Only, the scroll bars show up anyway.

    ?????

  6. Sandee Cohen says:

    And one more thing. The scroll bars on the right seem cut off.

    1. Justin says:

      Hi Sandee,

      Re: Pasting, I did my best to match the Overlay Scrolling Frame behavior. If you think I missed something in the implementation, feel free to send my an INDD file and I can take a look. I believe the official Overlay instructions suggest pasting a Group in.

      Re: Hide Scrollbars, hiding the scrollbars is somewhat less useful with Publish Online because Publish Online hijacks the scroll wheel event for zooming. So hidden scrollbars is really better for touch devices (or non-Publish Online projects).

      The newest version (same download link in your email) sets the horizontal scrollbar to the same thin size as the vertical. In a future version, I may add a setting for the width of the scrollbar. Although, that setting is only supported on Safari and Chrome.

  7. Andrea says:

    There is a problem on windows 10, error: 800A004C. Unable to find path. Any solutions?

    1. Justin says:

      Try reinstalling InDesign with the CC Desktop app, then open the zxp file with Extension Manager CC.

  8. David says:

    This works great – thank you very much. I still can’t get the scroll to appear on iPad though… perfect in browser but simply doesn’t appear (and no scroll functionality) on the iPad. Any ideas? Thanks.

    1. Justin says:

      Hi David,
      Probably due to an iOS bug. Which output format are you using?

      1. David says:

        Hi Justin. Created the ‘iPad web app’ first and now outputting as ‘web’. Should I use a different output method? Thanks.

      2. Justin says:

        Your output method is fine. There will be code to address this bug in the next update. In the meantime this answer will show you how to hot fix it.

  9. Sevi says:

    I have Indesign CC 2015 running on windows 10 and cannot install this extension, i get the error message saying that i need Indesign version 9 or higher. Any tips to solve this?

    1. Sevi says:

      similarly if i use the installer file, i get runtime error, path not found(800A004C). My indesign is in dutch, i had installed it (and my extensions manager)via the CC desktop app. i really need this extension so any help will be appreciated.

      1. Justin says:

        Hi Sevi,
        I’ll follow up with you via email to make sure everything’s working.

      2. Sevi says:

        Thanks for your immediate reply 🙂 I got it working now.

  10. Arne says:

    I have Indesign CC (2015) trial version installed from Creative Cloud. (Windows 10)

    When i tried to instal the extension i get error (800A004C)

    If i install it with the extensions manager they say i need indesign 9 or higher.

    I really need this :s Thank you

    1. Justin says:

      Sorry about that, Arne!
      I think I can resolve that. Can you tell me the line number (and other info) given with the error?
      Thanks!

    2. Christian says:

      I have the same problem. Adobe Extention manage says that I need InDesign 9 or above… I have inDesign CC laytest version on windows 10.

      1. Justin says:

        Hi Christian,
        Is the Scroll Frame – Installer – Win.vbs producing an error for you?

      2. Christian says:

        Hi Justin,

        I have no error using the Win.vbs file (just a dos window appear for half a second, but do not see the add-on Universal Scrolling Frames. My InDesign interface is in french… Where does it show up in the english version?
        Thanks

      3. Justin says:

        It should appear in the Window menu. The vbs installer should give you a confirmation when it’s done.

      4. Christian says:

        After clicking open Win.vbs I get a dos windows:

        c:\windows\SysWow64\CScript.exe
        Win.vbs(9,5) (null): The specified service does not exist as an installed service.

  11. Christian says:

    I had to make a print screen to see the dos windows, it visible only for 2 seconds…

    1. Justin says:

      Hi Christian,
      Sorry for hassle with the installer. I’ll follow up with you via email to help you get this resolved.

  12. bridget says:

    Hi Justin,
    THANK YOU for creating this extension! I do have a question. In Publish Online the only way I could get the text to scroll was by either moving the scroll bar with my cursor, or by clicking on the text and using my up down arrow keys. This of course means you have to choose the visible scroll bar even though the panel for the Universal Scroll in InDesign offers a Hide option. I think users will typically expect to be able to scroll content with either their mouse wheel or touch gesture, but I couldn’t get that to work for Publish Online. Instead it just zoomed the content. Do you know of any setting that solves for this or is it just one of those things?? Thanks again for creating it.

    1. Justin says:

      Hi Bridget,

      You’re welcome. Yes, that is an issue. Unfortunately there’s not much you can do with that since Publish Online hijacks the scroll wheel (short of writing your own javascript to hack their hijack :-)).

      Alternatively, you could put your content (broken up) into Object States with buttons that “scroll” through the states.

  13. bridget says:

    Thanks Justin. Appreciate the quick response and the potential work-around. This is one more reason for me to proceed with purchasing the In5 license…I’m on the free trial right now. I’ve been navigating all the digital publishing options (which I’m new to) to see what meets all my needs. Your extension solves the scrolling text issue I had, and now I’m just waiting for help (via the Ajar Answer Exchange) on an issue I’m having with the lightbox in In5 (when I select to show external links in a lightbox, I get a blank/white lightbox with no content in it). Because this is a key feature for my client, I must make sure that works before I commit. I’m only still playing around with Adobe Publish Online because my client needs to see updated links often and Publish Online gives you a link that is quickly/easily shareable. With In5 the link generated for preview is only good in my default browser on my computer where I have In5 installed. If I email that to someone they can’t use it to view. I don’t really want to go through uploading the asset files to my server every time I have to make an edit and send a revision to my client. Is there something after I purchase the full In5 license that gives a quick link I can share? I’m having to do a bit of a work-around right now with Publish Online for review purposes while I get initial design approvals. I realize I’ve just asked a completely different question, so let me know if I need to post elsewhere. Thanks!

  14. Justin says:

    Hi Bridget,

    I posted an answer to your exchange question. We plan on making uploading much easier in v3 of in5.

    I’m happy to answer questions over email. 🙂

    support ~at~ ajarproductions [dot] com

  15. bridget says:

    Thank you, Justin. Greatly appreciate your patience with the questions as I learn. I’m getting there! I also watched your lynda.com tutorial on HTML layouts which was extremely helpful. Do you have est. timing on when you’ll roll out v3 of In5?

  16. Justin says:

    No problem, Bridget. I’m happy to help.
    I’m hoping to get v3 of in5 rolled out in June.

    1. bridget says:

      Great! Look forward to it. Thanks, Justin.

  17. lemondrops says:

    Hi! I just installed the extension via extension manager (mac, InDesign CC 2015) and can open the Universal Scroll window just fine in InDesign. The problem however is that there are no settings/options in the panel, just the short info text on how to use it. Have I overlooked anything, do I have to do anything specific to use it? Or is the extension maybe not compatible with the newest version of InDesign?
    Thanks!

    1. Justin says:

      Hi,
      The panel is designed to work like the (DPS Folio) Overlays panel. Once you paste a textframe or group (using Edit > Paste Into) the options will appear in panel.

  18. to see if there is progress on the subject of functional activation of html inserted when exporting EPUB3; It would be very valuable to encourage the publication in that format.

    1. Justin says:

      Hi Daniel,

      Thanks for the comment. That’s still on hold. Most of the functionality will go into in5 first, then I’ll take a 2nd look at the EPUB format. It would likely require Apple removing a few restrictions they have for EPUBs on iBooks for the iPad before it’s really worth it.

  19. Martine Ronsse says:

    Hi,
    I realy cann’t install this plug in
    got the dialog ‘sorry this directory could’nt be verified contact support box’ followed by ‘ no compatible version of indesign is found’ (tried 2015.5 and 2017)
    so here I am contacting the support

  20. Hi,
    Just great ! It’s very simple to use and it works very well in the epub done with Indesign CC 2017.
    Thank’s very much to the team.
    Niko

    1. Justin says:

      Thanks for the feedback, Niko.

      Glad it’s working well for you! 🙂

  21. Lluc says:

    Hi,

    This works great! It’s very simple to use and it works very well in the epub done with Indesign CC2017.

    In iPad, when the pages appears, the scroll takes a second to activate. Is this normal? Can be avoided in any way? Perfect in browser, using iBooks too.

    Thank you

    1. Justin says:

      Hi Lluc,

      Glad you like it! 🙂

      The tool already applies pure CSS—which is immediate. So the delay is likely from the reader, not the code, and there probably isn’t way to remove the activation delay that you’re experiencing.

  22. Nicholas says:

    Hi, Im new to your site and extremely grateful for your efforts.

    Is there a tutorial that shows how to use it. after i installed it (indesign 2017) i can’t seem to locate it.

    Please help.

    1. Justin says:

      Hi Nicholas,
      After you restart InDesign, it will be under Window > Universal Scrolling Frames.

      1. Nicholas says:

        Hi Justin, thanks for responding..

        Im not seeing > Universal… in the windows panel. I do however see that the script is installed.

        http://tinypic.com/r/igaf6u/9

        see link for screenshot

  23. Nicholas says:

    Never mind.. thank you, i just realised it was a different script.

    I’m good now.

  24. Julia says:

    Hi

    When I click to get the extension (submit my name and email and click the button) it says ‘Thanks for signing up your extension will arrive shortly’ but then nothing happens…

    I have windows 10. Not sure what is supposed to happen but I dont think I have it?

    1. Justin says:

      Hi Julia,

      Check your spam/bulk folder for the confirmation email.

  25. Sadie says:

    Hello! Is it possible to change the color of the scroll bar?

    1. Justin says:

      In some cases, i.e., webkit browsers, you can attach your own custom CSS to color the scroll bars.
      More info:
      https://css-tricks.com/examples/WebKitScrollbars/

      1. Sadie says:

        I was able to change the color of the scroll bar when using Publish Online but I now have a vertical and horizontal scroll bar when I only need to scroll vertically. Any suggestions to remove the horizontal bar?

      2. Justin says:

        That may be due to the customization.

        A wider vertical scroll bar could theoretically trigger a horizontal scroll bar.

        Make sure you’ve selected “vertical” in the Universal Scrolling Frames panel.

        If that doesn’t work, try tweaking your custom CSS.

  26. Jake Wilson says:

    Hey, this is such an amazing plugin, thank you!!!
    Quick question 🙂

    Do you know if it’s possible to widen the clickable area of my vertical scroll bars? I’m using Publish Online, and in order to move the scroll bar, you have to click on a very narrow set of pixels. If I could go into the CSS to edit the width of this while still keeping the width of the actual scroll bar the same, that would be great. I’m just trying to make sure my clients will have an easy time figuring out that it’s clickable.

    Thanks!

    1. Justin says:

      Hi Jake,

      There isn’t a reliable way. Only certain browsers let you style the scroll bar.

      1. Jake Wilson says:

        Okay thanks. I read some advice you gave to someone else about using object states instead of a scroll bar, and that was a good call! I think I’m going to do that, thanks 🙂

      2. Justin says:

        That’s a good option, Jake. Object States will give you full control of the appearance.

  27. gert verrept says:

    I installed it in cc 2017.1 with extension manager CC. However it’s not showing up in the window panel, even with docs open the work with?

    1. gert verrept says:

      Installing with CC manager gave following error: “no data in database”.

      1. Justin says:

        Adobe removed support for Extension Manager but left it in place with some incoherent errors messages. 😉

        Use the “CC Installer” with the download instead.

      2. gert verrept says:

        Bad luck. The alt installer (windows) doesn’t do anything. I cannot select a version, and accept and install does nothing. Any other options?

      3. Justin says:

        Hi Gert,
        I replied to your email. That’s the best way to follow up on individual issues.

  28. Tony Romano says:

    Great work on this product.

    I am experiencing problems with universal scrolling frames within a document that I created a few months ago. The initial scrolling frames were created a few months ago with Universal scrolling frames— these are indeed working properly, but I am unable to create new scrolling frames within the same document. I can, however create scrolling frames in a new document. My question is why is the universal scrolling frames not working now on new scrolling frames within a document that I created a few months ago. Any ideas?

    1. Justin says:

      Hi Tony,
      Can’t say for sure. Feel free to follow up with me over email.

  29. Nick says:

    Hi there,

    Thanks for this extension. Unfortunately, when i try to publish online, the scroll function doesn’t work! Any suggestions?

    1. Justin says:

      Hi Nick,
      Send me a URL and I can take a look.

  30. Thanks a lot your products are so awesome. This one is just so good for Indesign users. It works perfectly in CC 2018

    1. Justin says:

      Thanks, Alexandre! Glad to hear it. 🙂

  31. Lotta Jaatinen says:

    Hi Justin!

    I’ve seen this plugin working fine in ID CC 2017 and it’s awesome!

    I just updated InDesign CC 2018, but now when I’m trying to install this plugin for the very first time, it says “No compatible versions of InDesign found”.
    First I was blaming InDesigns update, but then I saw Alexandres comment and I guess it should be working.

    Any ideas?

    1. Justin says:

      Check your email for the original download link. You should be able to get the updated version from that link with a 2018-compatible installer.

      1. Lotta Jaatinen says:

        I subscribed and downloaded the installer, but it keeps saying the same. The mac-installer seems to be updated 9-25-2017.

      2. Justin says:

        Hmm…mine shows CC 2018 in the list.
        Let’s follow-up by email:
        https://ajarproductions.com/pages/contact.php?category=other&software_issue=bug

  32. Can says:

    Hi Justin

    In inDesign 2018cc i saw a warning says that:

    ditto: /Applications/Adobe InDesign CC 2018/Scripts/scrollframe/Startup Scripts: Permission denied

    How can i fix that?

    1. Justin says:

      Sorry about that!

      First, you’ll probably need to be an admin on the system to install them.

      Second, you’ll need to be sure that the InDesign applications Scripts folder (and subfolders) have read and write access enabled. You do this by opening the Get Info window in the Finder (CMD+i).

      1. jorgia says:

        Still doesnt work. I am having the same problem.

        ditto: /Applications/Adobe InDesign CC 2018/Scripts/scrollframe/Startup Scripts: Permission denied

  33. Michelle says:

    Hi Justin

    I just installed this awesome plugin into my InDesign CC 2017 and it showed in windows but when I double clicked the content frame, I didn’t see the control panel
    The content already paste into content frame.

  34. Tom says:

    Hi Justin,

    Thanks for the script but i cant seem to get it to work. Ive been trying for the last hour or so. Its installed in Indesign CC2017 but no functionality in ibooks on both desktop or ipad.

    Please help!

    Tom

  35. Lukas says:

    Hi,

    I installed the plugin but when I try to run it, Indesign says this: ditto: /Applications/Adobe InDesign CC 2018/Scripts/scrollframe/Startup Scripts: Permission denied

    Is there a way to solve this problem?

    Thanks
    Lukas

      1. Therese says:

        Hi,
        I also have the problem with Premission denied. I still doesn’t work when having done everything you have recommended.

      2. Justin says:

        We can get it resolved more directly over email:
        https://ajarproductions.com/pages/contact.php

  36. chantal says:

    HI, i tryed to cut, and paste my group of objects into a round frame but when i choose universal scrolling frames the instruction window appears on the screen. I watched a tutorial on youtube and the man after this windows had a click on the frame and had been shown a new window with all selection (vertical…. etc) …can you help me ?

  37. jorgia says:

    Hi,

    I am having the same trouble as all the above comments, when I download the universal scroll and go to install this notification pops up.

    ditto: /Applications/Adobe InDesign CC 2018/Scripts/scrollframe/Startup Scripts: Permission denied

    I have done everything you have already recommended in previous comments and still nothing.

  38. barbara says:

    Hi! I’m having same error message as others. I’m running CC2018 on macOS10.12.3. I did check permissions on scripts folders. error = ditto: /Applications/Adobe InDesign CC 2018/Scripts/scrollframe/Startup Scripts: Permission denied

    1. Justin says:

      Try applying the permissions “to the enclosed items.” That part is key.

      If the issue persists, contact us to resolve it directly:
      https://ajarproductions.com/pages/contact.php

  39. Louise says:

    Hi

    I downloaded your universal scrolling frame and it doesn’t appear to be working. I have Indesign CC 2018 for Mac and I keep getting this message when I try to install the software, ‘ditto: /Applications/Adobe InDesign CC 2018/Scripts/scrollframe/Startup Scripts: Permission denied (1)’ Can you advise? Thanks,

    1. Justin says:

      Please see answers in comments above.

  40. MJ says:

    Thank u so so so so so much. XD
    I haven’t been able to work on it for a long time, but it made it easier to work.
    Thanks to you, I can do a great job.

  41. Eline says:

    I have the new version of Indesign 2019 but this extention doesn’t work on it is there a new version comming soon?

    1. Justin says:

      Just updated it for CC2019. Go back to your confirmation email with the link and re-download. New installer should work for you. 🙂

  42. Erin says:

    Does the Universal Scroll Frame not working within a button? Basically I have a module designed with pop-ups and the pop-ups hold too much content, so a scroll is needed. However, I am finding that the scroll is not working.. so just wanted confirmation is this…

    Thanks

    1. Justin says:

      The click listening that the button does may interfere with the scrolling. I would suggest putting the scrolling frame in an MSO instead.
      More info: https://ajarproductions.com/in5course/?lesson=msos
      (This works better with in5 than it does in Publish Online).

  43. Elias Sarantopoulos says:

    I am having trouble installing on W10 using the Microsoft Windows Based Script Host, it gives me the Error: ActiveX component can’t create object, Code: 800A01AD. Any other solutions?

    Thank you!

    1. Justin says:

      You can use a non-Adobe ZXP installer along with the .zxp file found within the assets subfolder of the zip package.

  44. Martina says:

    I have InDesign CC 2019, when I click on the script to run it on the text it gives me this error: “.findGrep is not a function” (line 80). How do I solve it? Thank you

    1. Justin says:

      Do you have text highlighted or a text frame selected (with the selection tool)?

      Feel free to email:
      https://ajarproductions.com/pages/contact.php?category=other&software_issue=bug

  45. Jordan says:

    Hey Justin,

    Hoping you can help me out here. I’m running InDesign 14.0.1 CC.

    When I try to use the Mac Installer, I get a prompt telling me that “No compatible versions of InDesign found”.

    When I run the .zxp through EM, I’m told “This extension can not be installed, it requires InDesign version 9 or greater.”

    I’m at a bit of a loss here. Thanks for any advice you may have,

    1. Jordan says:

      Crisis averted.

      Stumbled into a solution.

      Downloaded the latest version of Indesign (14.0.2 instead of 14.0.1) and the installed it with https://zxpinstaller.com.

      Neither EM or the Mac Installer that came with the Frame Scroll would work, but for some reason ZXP Installer did.

      Thanks for all your hard work, this is a really helpful extension.

      1. Justin says:

        Yes, EM was abandoned by Adobe and the error messages are useless. The alternate Extension Installer is a good way to go.

Leave a comment

Leave a Reply to Nick Cancel reply

Your email address will not be published. Required fields are marked *