0

I need to be able to use this plugin with the "max-height" css, right now it only works if I define a definite height, but not if it has max-height instead. would there be a way to make that work too?

(function($) {
        $.fn.ellipsis = function()
        {
                return this.each(function()
                {
                        var el = $(this);

                        if(el.css("overflow") == "hidden")
                        {
                                var text = el.html();
                                var multiline = el.hasClass('multiline');
                                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width(multiline ? el.width() : 'auto')
                                        .height(multiline ? 'auto' : el.height())
                                        ;

                                el.after(t);

                                function height() { return t.height() > el.height(); };
                                function width() { return t.width() > el.width(); };

                                var func = multiline ? height : width;

                                while (text.length > 0 && func())
                                {
                                        text = text.substr(0, text.length - 1);
                                        t.html(text + "...");
                                }

                                el.html(t.html());
                                t.remove();
                        }
                });
        };
})(jQuery);
Dylan Cross
  • 5,918
  • 22
  • 77
  • 118

2 Answers2

0

Looks like we can make a new variable to check for the existence of the maxHeight property, we'll need to clean it up though.

var myHeight = (el.css('maxHeight')) ? el.css('maxHeight').split('px')[0] : el.height();

If there is a maxHeight, we'll get a value like 500px, we don't want the px, so we've split the string and taken the first piece of the array, which is the raw integer.

Now we can just replace el.height() with myHeight and you'll get the maxHeight if available, otherwise you'll get the height property.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Ok great thanks, but where am I suppose to put it in this plugin and such? – Dylan Cross Oct 26 '12 at 23:53
  • You mean where does the code I provided go, or where does the entire plugin go? – Ohgodwhy Oct 27 '12 at 00:03
  • The code I provided will go after `var el = $(this);`. The only other thing you have to do is find any instance of `el.height()` and change it to `myHeight` -- with the exception of the `el.height()` i provided in my code. – Ohgodwhy Oct 27 '12 at 00:04
  • Okay, well I have changed it all, the problem is that the dots aren't showing (only when using "max-height", they show fine with "height"), so i'm not sure why the 3 dots aren't being placed there as they should. – Dylan Cross Oct 27 '12 at 00:08
0

The problem seems to be that the max-height is not taken into consideration in jQuery's height(). I made it work by changing the plugin to accept a max_height argument rather than doing the max-height in css:

$.fn.ellipsis = function(max_height)

Then change the height function:

function height() { return t.height() > max_height; };

Not super elegant but it illustrates the problem.

By the way, the original code from above comes from here: https://stackoverflow.com/a/1022672/986840

Community
  • 1
  • 1
lemontree
  • 1