Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy Scrollable Area Code

Everything wants to be on the front page of your Web site. Not just on the front page, but "above the fold" on the front page (the area visible when the page first loads without scrolling). How can you fit more content into a limited area? One way is to place the content in boxes where the user needs to scroll to read the entire article.

In this article you'll learn how to create a scrollable area. Then you'll learn how to use style code to customize the appearance of your scrollable area. Next you'll learn how to layout your webpage with scrollable areas. And last, you'll learn how to load your scrollable area's from external files so you never need to edit your front page again.

The most basic scrollable area is an html textarea control. The code for a textarea is shown below.

<textarea cols=40 rows=12 readonly>
  Place your text here

Use the cols and rows attributes to set the size of your scrollable area. Use the readonly attribute to prevent the user from entering text into the textarea. You can use any number of textareas on your webpage and they will automatically flow into position on the webpage. You can use Style code to customize the appearance of your textareas.

The disadvantage of using a textarea is that technically a textarea is a child element of a form. If you have not defined a form on your webpage, the textareas will belong to document.forms(0). If you have defined a form, or forms on your webpage, the textareas will belong to document.forms(?). A testarea could inadvertently become an element of a submitable form. Then, when the user submits the form, the text in your text area will be sent back to the server along with the contents of the other form elements.

Another disadvantage of using a textarea is that it can contain only test. If you use an html div (division) element, it can contain html code. You can actually create an entire webpage within a div.

e hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security. Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world.

The code for a div scrollable area is shown below.

<style type="text/css">
width: 300px;
height: 250px;
padding: 10px;
border-style: solid;
border-width: 1;
overflow: auto;

<span class="scrollArea">
  Place your text here

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268