Thursday, October 4, 2007

Create Your Own Scrollable Text Widgets

Create Your Own Scrollable Text Widgets

by Fran Corpier

Add a link to this post to your page.
<a href="">Create Your Own Scrollable Text Widgets, <span style="font-size:88%;">by Fran Corpier</span></a>
Copyright 2007, Fran Corpier.

Summary: Add a text widget to your page with a couple of simple lines of HTML and CSS. This article continues our discussion on small tweaks to your layout for major impact. Level: Novice - Intermediate.

A text widget is a scrollable block of text

You control its look by:

  1. constraining its dimensions in a box,
  2. styling its border,
  3. styling the text itself, and
  4. automating what happens when the text overflows the boundaries of the box.

The secret to the text widget is the scrollbar that is invisible until it's needed. When your enclosed text would normally overflow the height of the box, the vertical scrollbar "auto-magically" appears.

What does a text widget look like?

Here's one example of a text widget. Notice how it can include pictures and links, too. It can even include video. In fact, any valid HTML may be included.

Example 1: Showcase

Article Directory Project sneak peak!

"Take a sneak peak at my latest web app."

article directory sneak peek An Article Directory.

The Site is a repository for articles in Business, Health, Internet, Finance, Real Estate, Faith, Network Marketing, Web Development, and other popular categories.

Article writing is a good way to:

  • gain recognition for your expertise
  • pull visitors to your linked web site
  • contribute to the internet's knowledge base

Article publishing has advantages, too:

  • bring valuable content to your web site
  • make your site "sticky"
    • keep visitors on your site
    • keep visitors coming back
  • embrace the internet esprit de corps

This project incorporates the following elements:

  • Products and Services for Writers
  • Products and Services for Publishers
  • Reviews
  • Community for Writers
  • Profiles for Writers
  • Lists for Writers and Webmasters
  • Numerous tools and links for Writers
  • Numerous tools and links for Researchers
  • RSS feeds for each category.
  • Optional RSS feeds specific to an author
  • It's Monetized by Adsense and ClickBank

Page Layout is Unique

  • Most important content is leftmost.
  • Extraneous content is to the right of about 800 pixels.
  • Content is a full 1680 pixels wide.
  • Columns start at offsets close to 0px, 800px, 1024px, and 1280px.
  • Cumulative column widths, left to right, correlate to monitor resolution widths.
  • Since the most important content is always leftmost, whatever the resolution, horizontal scrolling is totally optional.
  • No Tables whatsoever. CSS controlled layout.

The blanks areas you see in the image are reserved for Adsense, by Google.

The Article Directory project should launch around October 15, 2007. Fran Corpier is Chief Architect.

Example 2: Image Gallery. It's still a Text Widget!

Article Directory Project

Sneak Peek Screenshots

article directory homepage sneak peek

Article Directory Homepage

article directory category index page sneak peek

Category Index Page

article directory article page sneak peek

Article Page

Launching October 15, 2007

Example 3: Report/List

See the "30 Pound Report" in my Yuwie shoutbox.

Build Your First Text Widget

Step 1: "Widget Frame"

Open a simple text editor, like Notepad for Windows, or TextWrangler or BBEdit for Macs. For your own sake and everyone else's never use Microsoft Word to build HTML.

Type the following as your 5 lines (without the line number labels!):

  1. <div id="textwidget1" style="margin:0;padding:1em;width:300px;height:100px;max-height:100px;border:thin solid #000;overflow:auto;">
  5. </div>

Although the first line wraps in your browser window, it should be just one straight line when you type it. No breaks!

You're adding three (3) returns in the middle of the start and end division tags to make it easier to study your final code.

Now you have the basic frame for your text widget. This text widget has dimensions of 300 x 100 pixels (w x h). Make it smaller if you like.

From now on, we'll call this block of code your "Widget Frame".

The larger you make text widget dimensions, the more text must appear inside, before it shows a scrollbar. Let's keep your first widget on the small side.

Try and guess the scrollbar secret. The answer is at the end of this article.

Step 2: "Html Box" - Eliminate Potential for Horizontal Scrolling

Before you place any text into your widget, you will need to create a virtual box for it, inside the widget. It's as simple as what you just typed for your framework. This box has one purpose only: to prevent horizontal scrolling.

Horizontal scrolling is an unwanted feature in a text widget. You will eliminate the potential for horizontal scrolling, by styling the width and maximum width of the html inside the widget.

Add the following 5 lines of code inside the blank space in your new widget frame, starting at line 3. Don't worry about the numbering. And don't include it. Just type in the 5 lines in between the group in step 1:

  1. <div style="margin:0;padding:0;width:100%;max-width:300px;border-style:none;">
  5. </div>

You have now set the maximum width of the ultimate text within your widget to the same width as your widget frame.

From now on, we'll call this block of code your "HTML Box".

At the end of this step, you have two boxes, the second is inside the first.

  • the "Widget Frame", which defines the outside frame of the widget, its size, and its scroll feature
  • the "HTML Box", that will restrict the width your widget's contents, so that no horizontal scrollbars appear.

Step 3: Copy and paste your HTML

You're ready to paste in the HTML code for your text widget.

Think of the text widget as a page within a page.

Your html code can include styled copy, as in the first example, or fairly plain text, as in my "30 Pound Report".

Unless your text widget is large, most videos would be too wide to include. But you could either resize the video, or create a thumbnail image of the video and link the image back to the video's main page.

Similarly, select images that are smaller than your text widget, so viewers can see the entire image without scrolling.

It helps to think of a miniature web page.

Currently your block of code looks like this. (...without the line number labels! And without text wrapping. Each line of code should be one straight line):

  1. <div id="textwidget1" style="margin:0;padding:1em;width:300px;height:100px;max-height:100px;border:thin solid #000;overflow:auto;">
  3. <div style="margin:0;padding:0;width:100%;max-width:300px;border-style:none;">
  7. </div>
  9. </div>

Ready to paste? Click your mouse into the center blank space between the beginning and end tags of your "HTML Box". That would be the same spot as line 5, in the illustration just above.


Save your page as "test-text-widget1.html".

Open test-text-widget1.html in your browser.

How's it look? Congratulations, you have just created your first text-widget!

Extra Credit!

  1. Notice that you typed an id inside the "Widget Frame" division tag. Specifically, "textwidget1". When you have more than one widget on the page, id the second one as "textwidget2". All ids on a web page must be unique.

    Later, in another post, I will show you how to use this id to place your widget anywhere on the page. Even next to Flash widget, or an image. That's why the id is important. The id allows you to move your widget anywhere on the page that you want with great accuracy.
  2. More advanced users can remove the inline styles from the tags, and put them in the stylesheet, instead, assigning them as attributes to a class or id. They are shown, here, inline, for the sake of those less comfortable with stylesheet building.
  3. The ANSWER TO: "What Is The Scrollbar Secret?" is:


    Did you guess it?

A few uses for text widgets

  1. Things to Do List
  2. Calendar of Events as text
  3. News Headlines
  4. RSS Feed
  5. Image Scroller/Image Thumbnail Gallery
  6. Log Widget
  7. Testimonial Widget
  8. Showcase Widget
  9. Report Widget

Consider using a text widget when you want to fit a lot of text in a small place within your page.


  • Side by Side Placement of Widgets, Images, and Text
  • No More ActiveX Warnings - For Internet Explorer Users

Tell me what else you want to see, along these lines, or feel free to ask questions, here.

Please feel free to post a link to your Yuwie profile or blog, where you have used techniques in this article to create your own text widget. Let us see!

Ed. This post, originally published Sept 27, 2007, was edited to include author byline and links Sept 28, 2007.

About the author: Fran Corpier has owned and operated service companies servicing the network marketing and more recently internet affiliated industries, since 1998. Her database-driven applications have been used for the administration of products, services, and data for members of popular organizations. She has had the unique perspective of studying thousands of promotions and management styles by different companies, and their effects on their agents; as well application adoption by users.

Fran: "Even I make time for Yuwie. If you're not a member of Yuwie, please join me." See the video. Yuwie is free and fun.

You: "Okay."

Add a link to this post to your page.
<a href="">Create Your Own Scrollable Text Widgets, <span style="font-size:88%;">by Fran Corpier</span></a>
Copyright 2007, Fran Corpier.

1 comment:

Bill Griffith Jr CFP said...

Hi Fran,

I was looking for a way to put a scrollable text widget on one of my web pages and I just found your post from 07. Your instructions were perfect. I just created one. Check it out at -