How to add FeedSweeps with scroll bars
It is possible to have your FeedSweep widget contained within scroll bars. Scroll
bars can appear in browser pages in two ways:
- Where they are the edge features of a web page, or
- If forced when content is too large for its enclosing container.
For our purposes, the first is appropriate only if you want your FeedSweep to appear
in a pop-up window. The scroll bars would be created when you programmatically create
the new browser window.
The second option is popular because your FeedSweep widget can
be part of the content of the entire web page. The key concept here is the word "container".
To get scroll bars to appear within a page, we must create a container where the
container is smaller in dimensions than the FeedSweep widget itself. This forces
the browser to automatically create scrollbars around the container.
So the task really comes down to creating a container within a web page. Then
you simply insert your FeedSweep widget code within the container and scrollbars
are automatically created. Once again, this can be accomplished in two different
- Using HTML tables and CSS
- Using in-line CSS
Creating scroll bars with HTML tables and CSS
Here you add to the style sheet of your web page, a new CSS selector of:
Then, you create a simple table structure within our web page where you want the FeedSweep
widget to appear. For example:
<table width="400" border="0" align="center">
Note, the table cell has a span element referencing the new CSS selector
called ".scrollArea". This will produce scroll bars on both the width and
height of the FeedSweep widget:
To create scrollbars on just the width or height, adjust the .scrollArea width and
Creating scrollbars using in-line CSS
You can take advantage of an inline CSS definition to create a scrollable FeedSweep
without using tables. In the existing HTML of this web page, we locate where to
place the FeedSweep widget and use an enclosing pair of div like:
<div style="width: 200px; height: 100px; overflow: auto; padding: 5px;">
This will produce scroll bars on the FeedSweep widget as well, but in this example
only a vertical scrollbar has been added because the style width is greater
than the width of the FeedSweep widget:
Once again, adjust the width and height to achieve the desired end result.