Highlighted

Fixed header and anchor tags

Explorer ,
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.

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

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;

}

Topics

HTML5 layout

Views

425

Likes

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

Fixed header and anchor tags

Explorer ,
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.

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

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;

}

Topics

HTML5 layout

Views

426

Likes

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
Adobe Community Professional ,
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

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

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
Reply
Loading...
Adobe Community Professional ,
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;

}

Likes

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
Reply
Loading...
Explorer ,
Aug 22, 2016

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Adobe Community Professional ,
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.

Likes

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
Reply
Loading...
SHillaby LATEST
Explorer ,
Aug 23, 2016

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.

Likes

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
Reply
Loading...