Coding Examples

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 ways:

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:

.scrollArea {
  width: 200px; 
  height: 100px;
  padding-left: 5px;
  padding-right: 5px; 
  border-color: #6699CC;
  border-width: 1px; 
  border-style: solid;
  float: left; 
  overflow: auto;
}

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">
            <tr>
                <td>
                    <span class="scrollArea">
                        <script type="text/javascript" 
                          src="http://FeedSweepWidget_ULR_here">
                        </script>
                    </span>
                </td>
            </tr>
        </table>

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 height respectively.

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;">
  <script type="text/javascript" 
    src="http://FeedSweepWidget_ULR_here">
  </script>
</div>

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.