class method Element.makeClipping

View source on GitHub →

Element.makeClipping(element) → Element

Simulates the poorly-supported CSS clip property by setting element's overflow value to hidden.

To undo clipping, use Element.undoClipping.

The visible area is determined by element's width and height.

<div id="framer">
  <img src="/assets/2007/1/14/chairs.jpg" alt="example" />


$('framer').makeClipping().setStyle({width: '100px', height: '100px'});
// -> Element

Another example:

<a id="clipper" href="#">Click me to try it out.</a>
 <div id="framer">
  <img src="/assets/2007/2/24/chairs.jpg" alt="example" />
 <script type="text/javascript" charset="utf-8">
  var Example = {
    clip: function(){
      $('clipper').update('undo clipping!');
      $('framer').makeClipping().setStyle({width: '100px', height: '100px'});
    unClip: function(){
    toggleClip: function(event){
      if($('clipper').innerHTML == 'undo clipping!') Example.unClip();
      else Example.clip();
  Event.observe('clipper', 'click', Example.toggleClip);

This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.