• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Fixed header and anchor tags

Explorer ,
Aug 18, 2016 Aug 18, 2016

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.

Views

704

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 21, 2016 Aug 21, 2016

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;

}

Votes

Translate

Translate
Community Expert ,
Aug 19, 2016 Aug 19, 2016

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

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 21, 2016 Aug 21, 2016

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 22, 2016 Aug 22, 2016

Copy link to clipboard

Copied

Thank you, Amebr! Your simple and elegant solution did the trick.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 22, 2016 Aug 22, 2016

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 23, 2016 Aug 23, 2016

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp