Adding a Scrolling Frame in FXL and Publish Online

  • Sumo

At the InDesign Conference in Denver last month, Chad Chelius demonstrated how to add a scrolling sidebar to the Fixed-Layout EPUB exported from InDesign. This is one of my favorite iBooks Author widgets – it allows for a practically unlimited amount of text to be included in a small space on a page. As a bonus, Chad’s solution also works in Publish Online, the new InDesign-to-Web export. I asked Chad to write up his method. Here it is.


The Fixed-Layout EPUB format (FXL) has grown in popularity since InDesign started supporting it in full force with the 2014 release of Creative Cloud. With animations, audio, video, buttons, and multi-state objects, it offers almost as much as DPS and, in the case of animations, even more! One feature that a lot of users have been missing, however, is the ability to add scrollable frames when exporting to FXL out of InDesign. Many users of DPS used these heavily because it maximizes screen real estate by allowing you to scroll content within a limited area. Well, I’m here to tell you that it is in fact possible to create scrolling frames in both FXL and Publish Online!

Adding Scrolling frames for FXL

This technique was originally posted on the InDesign forums by Jacob Wodzynski. It’s a great solution, and I’m using it with some additional tweaks that I made. Essentially, I simplified the CSS code. Setting up scrolling frames for export to FXL and Publish Online is virtually the same as it is for DPS output.

You need two frames in InDesign. One frame is the container or viewport, if you will, and the other houses the content that scrolls within the container. I typically make the content frame about 10px smaller than the container frame to leave room for the scroll bar that appears to the right of the scrolling frame. This prevents the scroll bar from overlapping any of the content.

scroll_001

Next, you need to cut (Edit> Cut) the frame containing the content (the one on the right in the figure above), then select the container frame (the frame on the left) and choose Edit > Paste Into. This places the content frame within the containing frame (just like an image appears when you place it). Select the content frame and reposition so that the upper left corner of both frames align, or set the x and y coordinates of the content frame to 0.

Next, select the container frame and choose Object > Object Export Options. Under the EPUB and HTML tab, click on the epub:type drop-down menu and choose Document Divisions > subchapter, then click Done. This adds an attribute of epub:type with a value of subchapter to the Div that is created in the HTML of the FXL EPUB.

scroll_002

Finally, we need to create a very basic .css file to include when we export to the FXL file. Create a new text document using your text editor of choice and add the following code:

div[*|type = "subchapter"] > div {
overflow: auto;
}

Save the file with a .css extension. I called mine scrollframe.css.

This code targets the child div of the subchapter in the resulting FXL file, and enables the overflow property. This is essentially the content frame in the InDesign file.

The last step is to export the InDesign document as a Fixed-Layout EPUB file.

The important step here is to go to the CSS section of the EPUB – Fixed Layout Export Options dialog box and click the Add Style Sheet button. Choose the .css file you just created, then click OK to export the EPUB.

scroll_003

Open the FXL EPUB in the reader of your choice that supports the FXL format and test the scrolling frame. You should see that the content scrolls within the container as expected.

scroll_004

Making It Work with Publish Online

After performing the steps above, I got excited and used the Publish Online feature in InDesign to generate the file as HTML. I was disappointed when the scrolling frame didn’t work. I was expressing my disappointment to my friend Justin Putney of AJAR Productions, and he said that there’s no reason we shouldn’t be able to get it to work with Publish Online. So after some testing and a few e-mails back and forth, we figured it out.

The setup is exactly the same. You need two frames in InDesign: a container frame and a content frame. The epub:type attribute doesn’t get passed on to Publish Online, however, so you need to take a few additional steps.

First, create an Object Style and apply it to the container frame:

  1. Create a new Object Style and in the definitions for the Object Style, give the style a name (I called mine Scroll).
  2. Next, click on Export Tagging (in the Basic Attributes section of the Object Style Options dialog box).
  3. Choose div from the tag drop-down menu in the next dialog box, and enter Scroll (or whatever name you desire) in the Class field.
  4. Click OK and, again, make sure that you apply this style to the container frame.

scroll_005

Next, we need to add some CSS that will tell these frames what to do. Copy the following code to your clipboard:

<style>.Scroll > div { overflow:auto; -webkit-overflow-scrolling:touch; }
.Scroll > div::-webkit-scrollbar { -webkit-appearance:none; width:7px; } /*add back scrollbar for webkit*/
.Scroll > div::-webkit-scrollbar-thumb { border-radius:4px; background-color:rgba(0,0,0,.5); }</style>

NOTE: See update at end of post for revised code. 

The first line enables the overflow option for any child div whose parent contains the .scroll class applied. This was accomplished when we applied the object style to the container frame. The remaining code enables the scroll bar for webkit browsers that hide the scroll bar.

Since there are no options to add CSS when using Publish Online, you must add this CSS to the InDesign document. Insert it onto the page on which the scrolling frame appears:

  1. Choose Object > Insert HTML.
  2. Paste the above code into the Edit HTML dialog box and click OK. You can position the resulting frame anywhere on the page.

scroll_006

scroll_007

That’s it! Click the Publish Online button. Once the assets are uploaded, you’ll be provided with a link that will take you to the online version of your document.

scroll_008

To see a working example, take a look at this sample that I uploaded. The scrolling frame is on page 7 (About the Photographer) of the document.

scroll_009

With a little bit of basic CSS knowledge, you too can incorporate scrolling frames in your FXL and Publish Online content.


UPDATE

As Justin mentioned in the comments below, our fix didn’t make the article deadline but here is a screen capture of the updated code that allows the scrolling frame to work with Publish Online on an iOS device.

Sandee Cohen and Laura Brady mentioned the fact that you don’t get a hand when hovering over the scrolling frame like you do with DPS folios. This is a limitation of how these scrolling frames work in HTML. You’ll need to actually use the scrollbar instead of clicking on the frame itself.

<style>.Scroll > div { overflow:auto; }  
.Scroll > div::-webkit-scrollbar { -webkit-appearance:none; width:7px; } /*add back scrollbar for webkit*/
.Scroll > div::-webkit-scrollbar-thumb { border-radius:4px; background-color:rgba(0,0,0,.5); }</style>

And here’s how it looks in Object > Insert HTML.

scroll_010


Chad Chelius is an Adobe Certified Instructor, author and consultant. He teaches clients around the world how to use and make the most of Adobe software and speaks at various industry conferences. Based in the Philadelphia area, you can learn more about him here and  follow him on twitter.

22 Responses to “Adding a Scrolling Frame in FXL and Publish Online”

  1. Sandee Cohen pointed out that the scrolling (and the scrollbar) on not functional on Publish Online on iOS. This is due to other code on housed within Publish Online and iOS limitations.

    Chad and I came up with a solution, but it didn’t make it into the article before publication.

    To fix this, you can simply remove the CSS rule that reference “touch” (-webkit-overflow-scrolling:touch;) The resulting HTML/CSS would be:

    .Scroll > div { overflow:auto; } .Scroll > div::-webkit-scrollbar { -webkit-appearance:none; width:7px; } /*add back scrollbar for webkit*/ .Scroll > div::-webkit-scrollbar-thumb { border-radius:4px; background-color:rgba(0,0,0,.5); }

  2. Note that the opening and closing style tags were automatically removed from my previous comment. They should still be present when you use “Insert HTML.”

  3. Genius, again Chad, genius!

    I’ve made a mention of this tip on my Dtch blog:
    http://fvdgeest-dtp.blogspot.nl/2015/12/geniaal-scrollbare-kaders-in-epub-nu.html

    And an example:
    https://indd.adobe.com/view/ce06594d-d99d-421a-b87d-9a1e5ccdd17d

    This is such a relief for those who used the Subchapter method but lost it in the new Publish Online!

    Thanks again my good man for such a useful tip 🙂

    !

  4. Chad Chelius says:

    I updated the link to the Publish Online sample as well. You can see that the scrolling frame on page 7 now works on iOS devices. Thanks again to Justin for this great fix!

  5. […] 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. […]

  6. Frans van der Geest says:

    I read that Justin even made a panel so we can use that. That would be great but what I noticed trying out Justins panel was… that it would not work in my Dutch (non English) version. I guess it calls a menu by its name not number 🙁

  7. Frans van der Geest says:

    And Justin already fixed it! Working great, also in my Dutch version now. Thanks Justin!

  8. Juanma Pérez says:

    i tried but i couldn’t get it. Could anyone share some examples with the necessary files (indd, Css)?

    Thanks 😉

  9. […] week, I wrote up a post on EPUBSecrets.com describing a method to create scrolling frames in both Fixed-Layout EPUB and […]

  10. Peter Maas says:

    Could it be that
    A: this works only when publishing from MacOS? When I do the same on InddCC2015 Win8 it doesn’t work.
    B: horizontal scroll is not supported on iOS? I can’t get it to work.

    Thanks very much for making this possible. I will post a reference to this article shortly.

  11. […] This shouldn’t be possible, but it is: Adding a Scrolling Frame in FXL and Publish Online […]

  12. Kevin Callahan says:

    Here’s a response from Justin:

    Hi Juanma and Peter,

    Try the tool in this post (from Dec 7 on this blog):

    http://epubsecrets.com/super-easy-scrolling-frames-in-fxl-epub-and-publish-online.php

    It produces updated CSS in the output (and it’s a bit easier to use).

  13. Great article Chad, I really like the way you expanded this concept!

  14. DANIEL DOMINGUEZ says:

    Hi anyone can share me one indesign document with the scrollable text working please I have tried but i can’t make it. my mail is danieldominguec1@gmail.com

  15. Mary says:

    Wow! Thank you. Hope to see more InDesign Publish Online “secrets” as time goes on! The scrolling text is essential to my usage, so THANK YOU!! 🙂

  16. Lydia says:

    Wow this is brilliant THANK YOU.

    I just started using your Unlimited Scrolling Frames panel in InDesign (Mac). Is it possible to allow scrolling in both directions horizontally? For example, I’m using this feature for an oversized panorama that I’ve centered on my spread, and I’d like to allow people to scroll both to the left and the right, as what’s viewable without scrolling is just the middle of the image. Thanks to anyone who can provide some insight on this!

  17. Erdem says:

    Thank you very much for this information. It works. How can we find a solution about the problem of button and slide show interactions?

  18. Sam Sheng says:

    Thanks for the tips, but I do have a question. I was able to use the tips provided to make text scroll and also make a scroll bar; however, I do have the need to turn the scroll frame into an interactive button element so that it is first hidden when the page is on and then it can be activated later. It seems it loses the scrolling function (the scrollbar does show though) and it cannot be hidden when turned into a button element. Your tips will be greatly appreciated!

  19. Claudia says:

    It worked perfectly!!! Thank you very much! I could not find the answer anywhere else 🙂
    Thanks!!!!!!

Leave a Reply

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