instance method Element#makeClipping
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.