Excudo Devshed - Explanation of resize element Function

Javascript Index

PHP

resize element

Why this script

While building internet applications i've often ran into the problem where we wanted to present data from the database on exactly one page. The problem in this, is that you never know how large the data from the database is.
The first thought to keep the size fixed, was to use a textarea. But those scrollbars made it really ugly.
I then started to write a function in PHP that would reduce the text from the database. The problem with this however is that you never know exactly how the browser will display it. Even though i approximated it quite good, small errors kept occuring every now and then.
That's when i decided to face the problem where it really occurs: clientside. And so, this javascript function came into existence. It keeps reducing the length of the string (text) until the height of the element is equal or lower then the height you want it to be.

Usage:

The only thing you need to do, is load the javascript file:

<script type="text/javascript" src="js_source.php?sid=6"></script>

And put this onload in your body tag:

 onLoad="browseElement(document.getElementById('exampleContainer'));"

This will cause all elements within the given element and that have the class resizeMe_xx, to be resized to the height of xx pixels.
In the example, the given element is referenced to by document.getElementById('exampleContainer'), but this could be any element of course, including the <body>-tag

This is the source code of the example As you can see, the actual element doesn't need to contain a single bit of javascript!

<table style="width: 500px;" border="1">
<tr>
 <td>rubbish</td>
 <td>
	<div class="resizeMe_60" style="padding-left: 20px; background-image: url(images/bg_height.png); bakcground-position: 0% 0%; background-repeat: no-repeat;">
		This is some text that should be reduced to a height of 80
		This is some text that should be reduced to a height of 80
		This is some text that should be reduced to a height of 80<br>
		<br>
		This is some text that should be reduced to a height of 80<br>
		This is some text that should be reduced to a height of 80<br>
	</div>
 </td>
</tr>
</table>

The added style="" was done so a background image could act as check for the intended effect. However, of course this is not needed to function properly