August 25, 2000 - Removing Paragraphs on the Fly | WebReference

August 25, 2000 - Removing Paragraphs on the Fly

Yehuda Shiran August 25, 2000
Removing Paragraphs on the Fly
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

You can use the display property to remove paragraphs and reflow the page. For example, you can implement your page in such a way that the user may remove a paragraph when he or she wants to squeeze the amount of data on the page. Since the paragraph is removed, there is no way to return it but by reloading the page or implementing a link that, upon clicking, reclaims the lost data. The following examples demonstrate the first of these options. Mouse over any of the examples below to remove them. Reload the page from the browser menu to return the page to its initial condition:

Paragraph 1

Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1

Paragraph 2

Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2

Paragraph 3

Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3

We just wrapped each paragraph in a DIV element:

<DIV onMouseOver="this.style.display = 'none'">
  <SPAN ....
  </SPAN>
</DIV>

Learn more about the subject in Column 66, Dynamic Styles.