Create Your Own Scrollable Text Widgets
by Fran Corpier
Add a link to this post to your page.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:
- constraining its dimensions in a box,
- styling its border,
- styling the text itself, and
- 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
Example 2: Image Gallery. It's still a Text Widget!
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!):
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:
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):
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!
- 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.
- 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.
- The ANSWER TO: "What Is The Scrollbar Secret?" is:
Did you guess it?
A few uses for text widgets
- Things to Do List
- Calendar of Events as text
- News Headlines
- RSS Feed
- Image Scroller/Image Thumbnail Gallery
- Log Widget
- Testimonial Widget
- Showcase Widget
- Report Widget
Consider using a text widget when you want to fit a lot of text in a small place within your page.
MORE TO COME IN THIS SERIES...
- 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.