October 13th 2008

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.

Live Demo | Download (HTML, CSS, JavaScript)

End Product:

End Product Image

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.