Customizing the Responsive HTML5 frameset

Report · Feb 02, 2017

Hi all,

So the Responsive HTML5 frameset has a top banner, TOC/Index/Glossary pane, and the topic pane. My team is asking me to add another frame to the right of the topic pane. This new frame would contain code samples, and ideally, users would be able to open the frame by clicking links in the topic frame. See the screenshot below for an example of what my team wants.

Is this possible with RoboHelp? What would be involved?

We're using RoboHelp 2015 with FrameMaker 2015 source content in a Windows 7 environment.

We're producing Responsive HTML5 and Multiscreen HTML5 outputs.

Thank you for any advice you can offer!

Best regards,

Kate

Report · Feb 02, 2017

Hi there

The big thing about HTML 5 is that framesets are not supported in any way.

Perhaps Willam will see this thread and advise.

Cheers... Rick

Report · Feb 02, 2017

Hey Rick,

Thanks for the reply! Frameset was probably the wrong word to use. The goal is to be able to customize the layout. Specifically, my team wants our HTML5 output to include a section with descriptive text, and a section with code samples where the main Topic content usually appears. I'm eager to hear if this is possible with RoboHelp.

-Kate

Report · Feb 02, 2017

yeah, if anyone will know it will be Willam. He's like a guru with CSS3 and SCSS and all the knowledge of that stuff.

Report · Feb 02, 2017

Correction. That should have read "THE" guru!

Report · Feb 03, 2017

In re-reading your initial post, I'm wondering if a different approach might be considered?

While HTML5 doesn't recognize or respect framesets, it DOES actually offer using something called an "inline frame". With an Inline Frame (also called an IFRAME, because of the HTML code used to create such a beast) you create what amounts to a "picture in picture" sort of effect for your HTML page. I'm not exactly sure if this is what they are using here in the forums, but it would be kind of like what we see in the image below:

Basically, what you might do is to create pages that have the code snippets and whatnot and present those pages inside the Inline Frame.

I'm unaware of a way to coax them over to the right as you seem to be wanting. I've always had them as an element in the middle of a page following some text elements or whatever.

Cheers... Rick

Report · Feb 08, 2017

Ah, the great challenge of 'can it be done'. Although Rick gave the sensible answer, I couldn't resist tinkering with this a bit to see whether I could get it to work with RoboHelp.

Can you create a second frame in the output to show other content?

Yes.

Is it simple?

No. But really much simpler than I imagined 🙂

Will it be useful?

Probably not. I think you're better of by embedding a syntax highligher and using dropdown texts.

But nonetheless, here goes nothing;

PoC Output: Multi Window HTML5 test
PoC Project: http://robohelp.wvanweelden.eu/poc/html5_multi_window/Multi Window HTML5 test.zip

I created a blank skin containing only the topic view and an additional iframe. I removed all the other widgets to avoid problems with the layouts.
In the topic, I added three links: one regular link, one link to a topic in te project and a link to an external site.
In the link, type the name of the iframe you want to load the content:

Generate the output.

Of course, going this route requires more research, but it seems that it can be done. To get back to your question as to what it would involve:

A custom Screen Layout that includes the additional iFrame.
It must be tested whether the RH scripts (for search, TOC, etc.) will work when there are two iframes in the skin.
Links that should open in the iframe have to be amened as above.

Also, I have no idea whether you can set these frame options in FM Markers. Perhaps you can, but I'll believe it when I see it.