How to set a non-scrolling header for WebHelp output?

Isr · Post by **Isr** » Mon Dec 31, 2012 6:14 am

hi,

How does one set a non-scrolling header in webhelp output?

I come from RH, there's a simple option you click and that's it.
I haven't found anything similar in Flare...

Thanks,
Isr.

Thomas Tregner · Post by **Thomas Tregner** » Mon Dec 31, 2012 10:26 am

Scott DeLoach posted a tip about this for everyday HTML and CSS at ClickStart:
http://www.csstothepoint.com/nonscrollingheader.htm

Scott's example is a good starting point for the basic technique. It doesn't work in WebHelp or HTML5 topic containers as far as I know. But this does:

Code: Select all

div.Header
{
	position: fixed;
	height: 100px;
	overflow: hidden;
	background-color: #ffffff;
	width: 100%;
	left: 0px;
	top: 0px;
}

div.Content
{
	overflow: auto;
	padding-top: 100px;
}

The background for the header should match the background for the body element so that it looks continuous. I just used white for the example. Scott's example indicates to change the scroll behavior for the body. But for some reason, the Content scroll is still suppressed in topic containers. So rather than touch the body element and use an absolute position for the Header, you can use a fixed position and fill in the background to hide the text of Content when scrolled. The padding on Content compensates for that space in the initial position. A topic body would use the div elements as follows:

Code: Select all

    <body>
        <div class="Header">
            <h1>Topic Title</h1>
        </div>
        <div class="Content">
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
            <p>Delete this text and replace it with your own content.</p>
        </div>
    </body>

i-tietz · Post by **i-tietz** » Wed Jan 02, 2013 2:51 am

1. I don't recommend setting the ovreflow of the header to "hidden": What if the heading is long and the line breaks? You cannot read it then. Put it to "auto" instead.
2. You might get away with not stating a height at all. With "overflow: auto;" the content will (hopefully) simply take the space it needs.
3. Don't use "width: 100%", use "right: 0px;" instead.
4. If you set it to the same background-colour, you need border-bottom to separate it from the content. It will look strange otherwise if you scroll the content and the lines vanish into nothing.
5. You will have to set padding and margin in the body to 0px.
6. You need to define the behaviour of the header div in the print medium. Why? Just try to print a page that doesn't fit on one printed page, and you'll see.
7. What is that "padding-top" supposed to do in the content div? You could apply that to the body, but then you don't need the content div ... I don't understand what you're trying to achieve with that ...

Thomas Tregner · Post by **Thomas Tregner** » Wed Jan 02, 2013 6:47 am

i-tietz wrote:1. I don't recommend setting the ovreflow of the header to "hidden": What if the heading is long and the line breaks? You cannot read it then. Put it to "auto" instead.
2. You might get away with not stating a height at all. With "overflow: auto;" the content will (hopefully) simply take the space it needs.
3. Don't use "width: 100%", use "right: 0px;" instead.
4. If you set it to the same background-colour, you need border-bottom to separate it from the content. It will look strange otherwise if you scroll the content and the lines vanish into nothing.
5. You will have to set padding and margin in the body to 0px.
6. You need to define the behaviour of the header div in the print medium. Why? Just try to print a page that doesn't fit on one printed page, and you'll see.
7. What is that "padding-top" supposed to do in the content div? You could apply that to the body, but then you don't need the content div ... I don't understand what you're trying to achieve with that ...

1. If you are okay with scroll bars in a heading and possibly obscuring content, set the header overflow to auto. See #2 and #7 for why content could be obscured.

non-scroll-0.png

2. The example sets a background in order to obscure content that flows behind div.Header when scrolling. If you do not explicitly set the height of Header and pad Content, you will have to find some other way to ensure all of the content is shown.
3. That will work also.
4. I agree. I like lighter shades of grey for that.
5. Or probably adjust div.Header and div.Content to accommodate the body style.
6. Yes and I would only define styles for div.Header and div.Content in the online medium.
7. See #2. For example with no background on div.Header and the padding removed from div.Content, you get this:

non-scroll-1.png

i-tietz · Post by **i-tietz** » Wed Jan 02, 2013 8:22 am

"Width: 100%" can easily lead to horizontal scrollbars and text vanishing underneath the vertical scrollbar. So there is no "also", I'm afraid. The reason are the different interpretations of the browsers and their versions of what 100% really means.

And concerning the pictures: Wow! Things really changed since I last looked at it.
It's true, that I need a set height to get scrollbars ... well ... then I recommend my javascript setting the height and the position of the div for you: http://forums.madcapsoftware.com/viewto ... =9&t=14654
But: I only used one div - for the header. The real text is inside the body ...

Thomas Tregner · Post by **Thomas Tregner** » Wed Jan 02, 2013 9:36 am

Inge,

That looks like a nice solution. In the context of a project which includes your JavaScript, I would definitely leave the height alone as you suggested. If a fixed height for the header is a deal breaker, I can't think of an unscripted, CSS-only solution.

Setting an ID attribute would take a little bit of process change for authors. Do you create templates which include the header DIV with the ID attribute and instruct authors use those templates? From the XML Editor, one can press the tab key to add a DIV. But I can't think of an elegant way to set an attribute from the Flare UI. Although there is a MadCap attribute called MadCap:targetName which can be set from the the UI using a right-click action. The Text Editor or an outside editor are the only options that come to mind. I guess it just depends on an author's or a team's comfort level with the Text Editor.

Does your approach handle moving the scroll bar to only the content? That was something that bothered me about the example I posted. Since the scroll bar is still the BODY scroll, the bar extends to the header area.

i-tietz · Post by **i-tietz** » Wed Jan 02, 2013 10:55 am

Thomas Tregner wrote:Setting an ID attribute would take a little bit of process change for authors. Do you create templates which include the header DIV with the ID attribute and instruct authors use those templates?

yep. Precisely. And some bits in the masterpage, too ... toolbar div, I think.
The javascript is in the masterpage.

But be careful: This only works for the IE, but not for others. It's the "document.all" that needs to be replaced to make it a universal script.

Thomas Tregner wrote:Does your approach handle moving the scroll bar to only the content? That was something that bothered me about the example I posted. Since the scroll bar is still the BODY scroll, the bar extends to the header area.

Yes, the scrollbars are those of the whole body. As I wrote above: To get a scrollbar in another element but the body you need a height value. With javascript you can retrieve the height of the displaying window and assign the remaining height to the content div, but that's not not what that javascript does.
If you know your way around with javascript you can extend that javascript. There's no copyright

OH, by the way - this is how it looks in HTML Help:

help_window.png

Stephani3 · Post by **Stephani3** » Fri Jan 04, 2013 11:52 am

I had trouble when I fixed my breadcrumbs. The links generated from the ListOf proxy opened behind my breadcrumbs. Unfortunately I couldn't figure out how to fix it automatically, so I had to make my breadcrumbs scroll with the topic. Any ideas?

MadCap Software Forums

How to set a non-scrolling header for WebHelp output?

How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?

Re: How to set a non-scrolling header for WebHelp output?