Skip to main content
cs33889433
cs33889433
Participant
October 16, 2017
Question

Robohelp 2015 - non-scrolling region problem with mid-topic links

  • October 16, 2017
  • 1 reply
  • 380 views

In the process of converting Winhelp help files to Robohelp 2015 webhelp output, I am successfully following the great suggestion for creating non-scrolling regions posted at

http://www.grainge.org/pages/snippets/snippets.htm#content in Item 21. !

However, when I try to link to a mid-topic location in another topic, the first few lines of text at that location (to which I just linked) are hidden behind the non-scrolling region.  The only work-around is adding blank lines to compensate, in front of every potential mid-topic location.  However, that means a.) a lot of blank lines throughout the topic, and b.) a lot of effort to insert blank lines prior to all bookmarks. While coding padding-top: 50pt; to the body tag, works for preventing the hiding of the first few lines of text at the beginning of the topic, it does not work for preventing the hiding of text at the point of the mid-topic bookmark.

This topic has been closed for replies.

1 reply

A
Community Expert
AmebrCommunity Expert
Community Expert
October 17, 2017

I created an IE only work around for my multiscreen html5 output, which was implemented slightly differently from the example, but the principle should be the same.

Your post inspired me to go back and do some more research.

My changes are in the screen layout css file, my reasoning being that the fixed header was created in the screen layout so the fix should implemented there as well. From reading the snippet I assume you'll need to add yours to your regular topic stylesheet. I can't guarantee that this will work in your solution and output, but hopefully it provides some ideas. You'll need to write this manually rather than using the Robohelp style editor, and if you edit the stylesheet with the editor later, it may break the coding for you.

I added two new rules - one for IE and one for Chrome. I haven't tested in Firefox. Change all instances of 130px to the height of your fixed header.

/* a[name] rule to make links to bookmarks (with name property as per RH11 and earlier) appear below the fixed header. This works in IE11 but not Chrome. */

a[name] {

padding-top: 130px;

}

/* :target:before rule to make links to bookmarks appear below the fixed header. This works in Chrome but not IE11.

padding-top : fixed header height. Other online resources suggest using height not padding, so change if encounter problems

margin-top : negative fixed header height so the height doesn't appear on screen

z-index : So that the block doesn't cover links in the preceding paragraph and prevent them being clicked. Puts the block "underneath" all other content. Possibly need to set to -1 depending on your design

visibility: hidden  : some online sources say set this. Not sure why, but add if encounter problems */

:target:before {

content: " ";

display: block;

z-index: 0;

padding-top: 130px;

margin-top: -130px;

}

(Also, note that there is a space between the quotes for 'content'. It should work without, but I think that's one of the things RH hates.)

cs33889433
cs33889433Author
Participant
October 18, 2017

It is not clear to me where the description of padding-top applies: to the hyperlink itself or to the destination line.

E.g.

EMPLOYER. CITY is a hyperlink referring to the following line:

EMPLOYER CITY is the field specifying the city of the employer.

Which should be using the padding-top attribute?

In either case, a lot of blank space is being inserted throughout the topics, which does not really look so great when reading in a sequential manner.

A
Community Expert
AmebrCommunity Expert
Community Expert
October 19, 2017

The styles apply automatically to the bookmark. So for example:

<a name="EmployerCity"></a><p>Employer City is the field specifying</p>

However, I just thought that maybe you are using Internet Explorer and applying the bookmark to the whole paragraph, like this:

<p><a name="EmployerCity">Employer City is the field specifying</a></p>

I haven't tried this, but it might be that this results in the padding displaying for you. So you could try to adding the negative margin-top to the a[name] style to see if that corrects it for you.

If you aren't applying the bookmark to the whole paragraph and using IE I'm not sure what to suggest, as I don't get any extra space displayed in Multiscreen HTML5 using Robohelp 11 (using IE and Chrome).

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices