Fixed position and HTML paging
Fixed position and HTML paging
I use a fixed position Heading, however when I use the page up & page down keys the paging value does not take into account the fixed region. The result is the page buttons scroll an entire screen rather than just the unfixed portion of the screen.
Re: Fixed position and HTML paging
When you use position:fixed on elements like headings, they are removed from the normal page flow. You can think of them as being on a separate layer from the rest of your page content. If you want them to take up space in the page flow, you'll have to constrain the rest of the page.
Instead of modifying the header, I suggest you put the content in a smaller box:
1. In your stylesheet, create a new class for the div element. We'll call it scrollbox.
2. Set the height property of div.scrollbox to whatever your design requires. It cannot be automatic or 100%, because it needs to (a) be smaller than its usual height, and (b) fit on the same page as your heading. You'll probably have to play with this a bit until you find the right value.
3. Make sure the overflow property is set to auto.
4. In your topic, select all of the content you want to be scrollable, then press Tab.
5. In the Create Group window, select div and click OK.
6. Set the class of the div you just created to scrollbox.
7. Build your content and test it. Your content should scroll inside the box you created (assuming there is more content than the box can show at one time.)
If you want the content to take up the rest of the window below the heading, even if the user resizes the window, then your only option is to use frames. You'll need to do that outside Flare, and I recommend you look at a site like W3Schools for instructions on how to create frames in HTML.
Instead of modifying the header, I suggest you put the content in a smaller box:
1. In your stylesheet, create a new class for the div element. We'll call it scrollbox.
2. Set the height property of div.scrollbox to whatever your design requires. It cannot be automatic or 100%, because it needs to (a) be smaller than its usual height, and (b) fit on the same page as your heading. You'll probably have to play with this a bit until you find the right value.
3. Make sure the overflow property is set to auto.
4. In your topic, select all of the content you want to be scrollable, then press Tab.
5. In the Create Group window, select div and click OK.
6. Set the class of the div you just created to scrollbox.
7. Build your content and test it. Your content should scroll inside the box you created (assuming there is more content than the box can show at one time.)
If you want the content to take up the rest of the window below the heading, even if the user resizes the window, then your only option is to use frames. You'll need to do that outside Flare, and I recommend you look at a site like W3Schools for instructions on how to create frames in HTML.
Re: Fixed position and HTML paging
And:
Eliminate the "regular" scrollbars ... overflow: hidden ... for html or for body - can't remember which one - or, just to make sure, for both ... otherwise you might get two scrollbars.
And: Add that topic structure to your templates, because if you forget the box ...
Positioning the box is more of a challenge than you might think. Having fixed elements on the page is hard work and a lot of trial and error. You better make notes to not try the same combination of values more than once.
E.g.:
do not assign width and height, but rather the left, bottom and right.
You might also set the position to "relative" to simply make it follow the heading, ...
Do not forget to set the margin to 0.
You have to check things like:
What if the heading has more than one line?
What happens if you link to a bookmark inside the box?
...
Eliminate the "regular" scrollbars ... overflow: hidden ... for html or for body - can't remember which one - or, just to make sure, for both ... otherwise you might get two scrollbars.
And: Add that topic structure to your templates, because if you forget the box ...
Positioning the box is more of a challenge than you might think. Having fixed elements on the page is hard work and a lot of trial and error. You better make notes to not try the same combination of values more than once.
E.g.:
do not assign width and height, but rather the left, bottom and right.
You might also set the position to "relative" to simply make it follow the heading, ...
Do not forget to set the margin to 0.
You have to check things like:
What if the heading has more than one line?
What happens if you link to a bookmark inside the box?
...
Inge____________________________
"I need input! - Have you got input?"
"I need input! - Have you got input?"