Universal Scrolling Frames for InDesign

Justin | drawing,extensions,HTML5,InDesign,interaction,software | Tuesday, December 8th, 2015

Universal Scrolling Frames From InDesign to HTML and EPUB

Adobe InDesign is full of wonderful interactive capabilities. The DPS Overlays panel adds several additional options, such as scrolling frames.

While this extra interactivity is 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.

Download

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

Get updates from Ajar Productions

Splittext_id_400px

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

Unsubscribe at any time. Powered by ConvertKit

Related Articles

63 thoughts on “Universal Scrolling Frames for InDesign”

  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.

Leave a Reply

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