Copy link to clipboard
Copied
Caveats: I am new to this forum and have been using RH 2015 since the end of May. I'm somewhere between beginner and intermediate with CSS and HTML, and I know nothing about JQuery or javascript.
I have tweaked the Desktop Catalog with Home Page multiscreen layout so that it has a fixed header and the content scrolls up underneath the header. This works well and looks lovely until clicking a link to an anchor, such as when using the MiniTOC to navigate in a topic. The anchor loads underneath the header at the top of the browser window instead of below the header at the top of the visible space.
After investigating the problem, I had hoped that I had found a fix at Hashtag Links that Don't Headbutt the Browser Window, but it didn't work.
More research and digging into how RH configures its bookmark anchors and I discovered that the bookmarks are configured with a
<a name="blahblah"></a>
tag for the anchors instead of a
<h1 id="blahblah">Blah di Blah</h1>
tag.
According to W3 Schools, "The <a> name attribute is not supported in HTML5. Use the id attribute instead." This is disappointing, since the output choice is Multiscreen HTML5.
Can anyone offer a solution that will work with RH's apparently outdated <a name="MiniTOCBookMark1></a> format?
Thanks in advance!
P.S. I am posting this at the end of the day and I will not be in to work again until morning August 22, 2016, so if I do not respond to clarification questions right away, please don't think I am ignoring you.
I have a non-scrolling header, and I just added the following to my screen layout stylesheet (targetting IE only):
a[name] {
padding-top:130px;
}
Adjust the pixel value to suit.
I had a play on Chrome, and the following seems to make it work there:
a[name] {
padding-top:130px;
margin-top:-130px;
display:block;
}
Copy link to clipboard
Copied
I'll hazard a guess here that the issue is that the Design Editor works with HTML4 and the code gets converted to HTML5 when you generate the help. That could be why your fix didn't work.
Perhaps Willam can confirm?
See Item 21 at Snippets. It was designed for WebHelp but you could try it with HTML5. Please let us know the outcome.
See www.grainge.org for RoboHelp and Authoring information
Copy link to clipboard
Copied
I have a non-scrolling header, and I just added the following to my screen layout stylesheet (targetting IE only):
a[name] {
padding-top:130px;
}
Adjust the pixel value to suit.
I had a play on Chrome, and the following seems to make it work there:
a[name] {
padding-top:130px;
margin-top:-130px;
display:block;
}
Copy link to clipboard
Copied
Thank you, Amebr! Your simple and elegant solution did the trick.
Copy link to clipboard
Copied
It's possible there is a reason this is not suggested on css tricks, so just be aware there may be unforeseen consequences, although I haven't come across them in my limited environment yet.
Copy link to clipboard
Copied
We will be using a limited environment as well. Users will only be accessing the help from work PCs and laptops equipped with IE, so as long as it works for IE11, I'm good to go.