Element#makeClipping() → 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.

Example

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

Then:

$('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" />
</div>
 <script type="text/javascript" charset="utf-8">
  var Example = {
    clip: function(){
      $('clipper').update('undo clipping!');
      $('framer').makeClipping().setStyle({width: '100px', height: '100px'});
    },
    unClip: function(){
      $('clipper').update('clip!');
      $('framer').undoClipping();
    },
    toggleClip: function(event){
      if ($('clipper').innerHTML == 'undo clipping!') Example.unClip();
      else Example.clip();
      Event.stop(event);
    }
  };
  Event.observe('clipper', 'click', Example.toggleClip);
</script>

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.