instance method Element#undoClipping

View source on GitHub →

Element#undoClipping() → Element

Sets element's CSS overflow property back to the value it had before Element.makeClipping was applied.

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

Then:

$('framer').undoClipping();
// -> Element (and sets the CSS overflow property to its original value).

Another example:

<a id="clipper" href="#">Click me to try it out.</a>
 <div id="framer">
  <img src="/assets/2007/2/24/chairs_1.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 == 'clip!') Example.clip();
      else Example.unClip();
      Event.stop(event);
    }
  };
  $('framer').makeClipping().setStyle({width: '100px', height: '100px'});
  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.