September 5, 2000 - Reflowing a Page | WebReference

September 5, 2000 - Reflowing a Page

Yehuda Shiran Sepetember 5, 2000
Reflowing a Page
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The display property can be used for removing HTML elements from the page and reclaiming the empty space. Notice that using this property yields different results than when using the visibility property. When you turn off the visibility, the HTML element seems to be transparent, but the empty space is not reclaimed. There are a few ways to use the display property. One way is to trigger the disappearance and reappearance of a certain HTML element from another HTML element. Clicking the following link will cause the disappearance of the first paragraph below:

Click here to remove or bring back the first paragraph below:

Mouse over this paragraph and see how the font size changes to size 30. Mouse out and see it go down to 8. This is a good way to pack more text on a window-size page and let the user magnify the paragraph currently being read. See how the browser reflows the page as if this paragraph was originally written with the current font size. Mouse over this paragraph and see how the font family changes to size Courier. Mouse out and see it changing to Arial. This is a good way to emphasize the paragraph currently being read. See how the browser reflows the page as if this paragraph was originally written with the current font family. To implement the above behaviour you have to add three items to your page. First, you need to add the line where the user can click to remove or bring back the first paragraph. This is a simple SPAN element:

<SPAN STYLE="cursor: hand; color: tan" onClick="disappear(fontPar)">Click 
 here to disappear or bring back the first paragraph below:</SPAN>

Secondly, you have to make sure the first paragraph has an ID which is assigned here the value of fontPar:

<SPAN ID="fontPar" STYLE="color:purple">

And finally, you need to add the following script that implements the disappear() function:

function disappear(obj) {
  if (obj.style.display == "none") {
    obj.style.display = "";
  }
  else {
    obj.style.display = "none";
  }
}