Something must be going around as I have suddenly received several requests for adding non-scrolling regions to topics in WebHelp. If you are not familiar with non-scrolling regions they date back to the days of volcanoes, dinosaurs, and the Microsoft Winhelp format circa Windows 3 and Windows 95.  

The non-scrolling region was an area at the top of every topic where the topic title was displayed and then the topic itself scrolled under the title. The nice bit is that this ensured that the topic title was always visible. When Microsoft moved on and developed the Microsoft HTML Help format they did not include any methods for including the non-scrolling region and adopted more of a web-style interface. Many cried, shrieked, and rent their clothing longing for the beloved non-scrolling region, but alas it was gone…at least, for a while.

Now fast forward to modern Cascading Style Sheets (CSS) capabilities and you once again can get your non-scrolling regions back! To build a non-scrolling region in Flare we will be updating three styles in the project style sheet. No code, no script, no digging around with Notepad, just some simple style sheet changes.

For this exercise I will assume that the project is already using a Flare Master Page to render breadcrumb trails at the top of every topic, and that we want to keep those breadcrumb trails as part of the non-scrolling region. To accomplish this we will be updating the following styles:

H1, or a customization thereof
MadCap|Breadcrumbs Proxy
Body

To start out, we will modify our H1 style. If you have used H1 styles only at the top of topics then you could just change the attributes for this style directly. However, if you have used H1 styles in other locations then you may want to create a custom H1 style for more control. In this example I created a style class called H1.ns, ns for non-scrolling. Once I had this custom style I applied the following attributes.

background color – Choose the color you want for your non-scrolling region
border-bottom – Choose the color you want for the line under your non-scrolling region
left – Set the distance from the left edge of the browser window. This should be 0.
margin – Distance to the edge of the browser window, again, should be 0.
padding – Distance from edge of the block to the actual content, adjust to style requirements
position – This is the critical piece, it must be set to “fixed”.
right – The opposite of left. Should be 0.
top – Distance to the top of the browser window. If you are not using breadcrumbs then 0, otherwise enough space to clear the breadcrumbs.
width – Set to 100% to make sure that your non-scrolling region fills the width of the page.

My sample settings looked like this in Flare: 

Heading 1 style adjustments

Heading 1 style adjustments

Our heading 1 is now ready to act as a non-scrolling region. However, we need to make sure that our breadcrumbs act in a similar fashion. We will make adjustments to the same style attributes as we did for our heading 1, but with some minor variations so that the breadcrumbs will render above the heading 1 text. The values that I used for the breadcrumbs proxy are:

Breadcrumb style settings

Breadcrumb style settings

Finally we need to make one minor adjustment to the body element in our style sheet. We need to increase the margin-top attribute to make sure that none of our topic text ends up hidden behind our non-scrolling region. In this example a value of 50px worked well, but adjust as necessary.

Body style adjustment

Body style adjustment

That was all that it took! Adjusting three styles and the result was a WebHelp system where the breadcrumbs information and the heading 1 of every topic was in a gray box at the top of the page…

 webhelp1

…and when you scroll the topic slides under the non-scrolling header region.

 webhelp2

For those who want to add non-scrolling capabilities to your own projects use these values as a starting point, but experiment and get the look and feel that best fits your needs.

Cheers!

Mike

About The Author

About Mike Hamilton

Mr. Hamilton has over fifteen years of experience in training, technical communication, multimedia development, and software development. Prior to joining MadCap Software, he served as the Product Manager for Macromedia's award-winning RoboHelp product line. Mr. Hamilton is often a featured speaker at industry events, including TEKOM and STC.

Last Modified: March 22, 2011

This entry was posted in MadCap Software, Tips & Tricks, Tutorials. Bookmark the permalink.

Comments

  • Andrew April 22, 2009 at 4:15 AM

    That’s a great tip! Thanks Mike!

  • Pingback: Creating a non-scrolling title for a webpage « CyberText Newsletter

  • Amy October 1, 2009 at 2:58 AM

    The problem I’ve found is that when you click hyperlinks to other lower-level headings within a page, the beginning of the linked section ends up under the non-scrolling area and is not visible without scrolling back up. Any solutions?

  • Amy October 2, 2009 at 1:10 AM

    To solve the issue with links to h2 and h3 showing up behind the non-scrolling area, we added a new tag to the styles.css file to define the anchor style. This did the trick:

    a[name] {
    height: 1px;
    padding-top: 30px;
    padding-bottom: 30px;
    }

  • Rich May 20, 2010 at 4:59 AM

    This technique works well so long as anchors (bookmarks) on the page are not used. Jumping up and down on the page with anchors really confuses the non-scrolling regon.

    Even the fix posted above does not seem to work, at least in Flare 6, that I can see.

  • Julie May 24, 2010 at 9:57 PM

    I implemented this in one of my projects but the text in my definition lists scrolls over the top of both the H1 and breadcrumbs proxy regardless of what I do to the css. It’s the same in recent FF and IE versions.

    I’m using a color for the breadcrumbs background and a background image behind the h1 but the text scrolls over the text regardless. Oddly enough the text doesn’t do this – it just disappears as you scroll.

    Has anyone encountered, and perhaps solved, this?

  • Veronique June 6, 2016 at 12:14 AM

    Can this be applied to table headers? If yes, would I have to add “ns” to “th” or to “header”? Thanks,

Have Something to Say?

Your email address will not be published. Required fields are marked *