When Truncating Text Increase the Size of the Read More Target ASP.NET ListView Example
I found a new jQuery plugin bigTarget.js via http://www.noupe.com/css/using-javascript-to-fix-12-common-browser-headaches.html. I thought the technique would work great to improve my ListView’s where I am using the truncate plugin that I found and initially posted about here Truncate Lengthy Text for Cleaner Display in ASP.NET ListView Using jQuery.
Essentially, instead of just presenting a more or less link for the user to click, the user can click anywhere in a cell to expand or contract the text.
End Product:

Instead of using the bigTarget.js plugin, I adapted the technique into the truncate plugin instead. I removed the following lines:
truncated_node.find('a:last').click(function() {
truncated_node.hide(); full_node.show(); return false;
});
full_node.find('a:last').click(function() {
truncated_node.show(); full_node.hide(); return false;
});
and replaced them with:
full_node.parent().click(function() {
truncated_node.toggle();
full_node.toggle();
return false;
})
.hover(function() {
$(this).addClass(opts.hoverClass);
}, function() {
$(this).removeClass(opts.hoverClass);
});
I also added the hoverClass to the options.
Full Plugin Code:
Be sure to checkout the demo. I undoubtedly missed something. Please let me know how this can be improved in the comments.