jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

RemoveOverflow jQuery Plugin

A jQuery plugin to remove any containing elements that overflow the selected element. Perfect for elements with a fixed size and dynamic content.

Demo Usage Styling Download Compatibility Changelog

Demo

Look below. There's a box with a blue header and a list with five items. The five items perfectly fit the box because each list item is just one line of text:

Demo

  • Demo list item 1
  • Another list item
  • Third list item
  • 3 + 1 = item 4
  • Five fingers, five item

But look what happens if we add an item with more text. The box has a fixed size and the overflow is hidden, so the last item gets clipped and only shows partially, not nice:

Demo

  • Demo list item 1
  • Another list item
  • Third list item is now on two lines
  • 3 + 1 = item 4
  • Five fingers, five item

Now in the next box, the RemoveOverflow Plugin is applied to the box and it will remove all elements that got clipped:

Demo

  • Demo list item 1
  • Another list item
  • Third list item is now on two lines
  • 3 + 1 = item 4
  • Five fingers, five item

This way you can create layouts with fixed sized elements and add content that is of unknown size without running into that clipping problem.

Now normally the plugin goes through all child elements, starting from the inside, going up the tree, ending at the direct childrens of the given element. If you switch off recursion, then only the direct childrens of the element will be removed, in our demo this can only be the "ul" that contains all the "li" elements as you can see here:

Demo

  • Demo list item 1
  • Another list item
  • Third list item is now on two lines
  • 3 + 1 = item 4
  • Five fingers, five item

This option would be the right one if we had a number of divs in the main element that contain more than one sub element where we always want to remove those top elements and not the sub elements they contain.

Usage

This is how you use the plugin with the default settings:

$(document).ready(function(){
  $("#box2 div.innerbox").removeOverflow();
});

And here's how you tell it to only remove elements on the first level (no recursion):

$(document).ready(function(){
  $("#box2 div.innerbox").removeOverflow( { recursion: false } );
});

There's a second option called "excludedTags" that lets you add tags you don't want to have removed (Note: They have to be uppercase!):

$(document).ready(function(){
  $("#box2 div.innerbox").removeOverflow( { 
    recursion: false,
    excludedTags: [ "LI", "P" ] 
  } );
});

Styling

There's no specific styling for this plugin, just make sure to use overflow hidden for the main element:

div.innerbox {
	width: 150px;
	height: 130px;
	overflow: hidden;
}

Download

Current version: jquery.removeoverflow-0.2.js (1.2k not minified)

Compatibility

Tested in:

With:

There really is nothing complicated in there, so expect the plugin to work in older browsers as well.

Changelog