overflows()

The overflows() method returns a boolean value indicating whether an HTML element overflows its box boundaries.

This function could for instance be used in a design where content needs to flow separately from the main text flow, or where a new, full-page, multi-column box should be inserted when the current one overflows.

Note that when called in a Standard script, this method runs before the pagination of Print output. After pagination - in the output, and in Preview mode - the element's overflow may have changed, especially when the element is combined with floating elements (i.e. elements that have the CSS style float) and located near a page-break.
To prevent this from happening, it may help to set the element's CSS style to overflow:hidden.
The overflows() method can also be used in a Post Pagination script.

Examples

var $box = query("#mybox");
while ( ! $box.overflows()) {
	//do something
}

A slightly shorter version:

while ( ! query("#mybox").overflows()) {
	//do something
}

The following script selects three boxes that all have the class box (selector: .box). It loops over them, inserting as many products from an array as possible into the box. In fact, it inserts one too many and removes the last one before moving on to the next box.

var products = ["Appetizer","Beans","Beef","Lettuce","Sprouts","Coconut","Juice","Soup","Coriander","Cheese","Pasta","Sugar","Vinegar","Bread"];
var i = 0;
results.each( function() {
	// Add elements to the box until it overflows.
	while ( ! this.overflows() && i < products.length ) {
		this.append("<p>" + products[i] + "</p>");
		i++;
	}
	// Go one step back unless we processed all items in our array.
	if( i < products.length ) {
		query("p:last-child", this).remove();
		i--;
	}
});