Elipsis
HTML
<p id="cont">
“Edge of Darkness” is an emotionally charged thriller set at the intersection of politics and big business. Thomas Craven (Mel Gibson) is a veteran homicide detective for the Boston Police Department and a single father. When his only child, twenty-four year-old Emma (Bojana Novakovic), is murdered on the steps of his home, everyone assumes that he was the target. But he soon suspects otherwise, and embarks on a mission to find out about his daughter’s secret life and her killing. His investigation leads him into a dangerous, looking glass world of corporate cover-ups, government collusion and murder – and to shadowy government operative Darius Jedburgh (Ray Winstone), who has been sent in to clean up the evidence.
</p>
<a class="toggler" href="#cont" rel="Collapse">Expand</a>
CSS
p {
border: solid 1px red;
}
p.expanded {
border: solid 1px green;
overflow: hidden;
}
JavaScript
toggler = $$('.toggler');
text = $$('p');
Element.implement({
getHash: function(){
return this.get('href').split('#').getLast();
},
wordLimiter: function(limit){
return this.get('html').split(' ').slice(0, limit).join(' ');
},
elipsis: function(){
this.store('default:text', this.get('text'));
var cont = $(this.getHash());
cont.store('expanded', {
'html': cont.get('html'),
'height': cont.getSize().y
});
cont.set('html', cont.wordLimiter(20) + '...');
cont.set('styles', {
'height': cont.getSize().y
});
this.addEvents({
click: function(e){
if (e) e.stop();
var switchLabel = this.get('text') === this.retrieve('default:text') ? this.get('rel') : this.retrieve('default:text');
this.toggleClass('closed')
.set('text', switchLabel)
.set('title', switchLabel);
}
});
}
});
$$('.toggler')[0].elipsis();