pvdspek/jquery.autoellipsis

Auto-ellipsis plugin for jQuery

jquery.autoellipsis's Issues

add to bower

would be nice to add this lib to bower :)

Height: auto;

When I have a container element with a max height, and change this max-height to none, leave the height to be auto, the update is not triggered as the height is not changed because the text is ellipsized and fits. I have to call:

$container.data('jqae').containerHeight += 1;

In order for it to be updated...
This is a css method I'm using for toggle'ing the height of some text, perhaps there could be a trigger method for ellipsizing? So one would not necessarily have to run the live functionality but can force a new ellipsizing after toggle.

Infinite loop with one iframe element.

When the only content within a div is an <iframe tag, calling autoellipsize on the div seems to cause an infinite loop which freezes the browser.

IE7 Crashes when running .ellipsis() in a ajax on complete function

More details to come, just wanted to get this issue started.

Basically i have an link that ajax's in javascript which updates a div's content with new html. This consistently seems to crash the IE7 browser process.
This does not happen if you are running IE8 with developer tools set to render in IE7 Browser Mode and IE7 Standards Document Mode.

here is a snippet of the link click event :

$("#id_one .class_one a").live('click', function() { 
  $.get(this.href, 
    {}, 
    function() { $(".class_two h2").ellipsis(); },
    'script'
  ); 
  return false; 
});

The ajax response looks something like this :

$('#id_one .class_three').html(<escaped javascript to insert>);

I am using 1.0.2 of jquery.autoellipsis.

I've tried these version of jquery as well and all have the result :

• 1.5.1
• 1.5.2
• 1.6.4
• 1.7.1

I am going to work on isolating this scenario in a self contained file (or set of files) and report back.

thanks !

Throws exception when text contains <BR>

It's trying to append an empty text node inside <BR>.

See isolated test at http://jsfiddle.net/v8eK7/12/

Inline fix (sry sry):

--- jquery.autoellipsis.js  (revision xxXx)
+++ jquery.autoellipsis.js  (working copy)
@@ -276,7 +276,7 @@
                 lastTextNode.get(0).nodeValue = text;

             } else {
-                lastTextNode.get(0).nodeValue = '';
+                lastTextNode.remove();

Exception thrown in Internet Explorer

An exception is thrown in Internet Explorer on Node.TEXT_NODE, since the Node interface constants are not defined in Internet Explorer. Use 3 instead of Node.TEXT_NODE.

wrong handling only one children if children larger than parent

i use firefox 17.0.1.
using plugin with {live: true} and css media queries.
after loading page i get what expected, but only in one case, when children element is larger than parent it wrong truncate text.
after resizing all looks ok.
have to use spike <span>&nbsp;</span> before child element to make it works correctly.

code looks like this:

$('.div1').ellipsis({
   live: true
 })

.div0 {
  padding-top: 15px;
  padding-right: 15px;
}

.div1 {
  height: 205px;
  padding: 0;
  margin: 0;
}

<div class="div0">
  <div class="div1">
    <p>some long text makes this paragraph height more than 205px</p>
  </div>
</div>

When updating the value of an element, and running autoellipsis again - it doesn't work

Hi.
I am using the autoellipsis, and in general it works very well. The problem comes when I need to update the text of the element. One would assume that changing the text of the element and calling the plugin again would perform the same action the initial call performed.

But, as can be seen in this fiddle - it doesn't
http://jsfiddle.net/mohoch/PxszR/3/

The only way I could make it work is by deleting the data stored on the element, and by this making the plugin run "from scratch".

Missing ; at the end of shrinked file

At the end of the file jquery.autoellipsis-1.0.8.min there should be a semicolon.
This makes trouble for us because we concatenate all JS files. And of course, if one ; is missing, it breaks all other JS.

getLastTextNode(selectedElement).get(0) returns undefined

I think I found a small mistake.

The call to getLastTextNode(selectedElement).get(0) on line 214 returns "undefined" when the last html tag is an empty tag like <br>.

This might happen when the content you are trying to ellipsis was parsed from a CMS system.
The html text that I wanted to ellipsis was something like:
<div>Here is <em>my text</em> and somebody accidentally put a <br></div>

Quick fix:

var lastTextNode = getLastTextNode(selectedElement).get(0);
if(lastTextNode) lastTextNode.nodeValue += settings.ellipsis;

But maybe a better check might be in place.

Extend option "ellipsis"

Right now you can only pass a text string as option.
It would be nice to make it possible to provide html as well. Because we often use it in combination with an "read more" link. And now it's not quite easy to append such a link at the end of the text.

Ellipsis not working directly on element.

Ellipsis is not working directly on the selected element(s). For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in faucibus massa.

$('#testdiv').ellipsis() does not work. The code assume at least a child element to work on.

Autoellipsis doesn't work on flex elements

When element has display: flex; autoellipsis seems to doesn't work

Error when the specified element is currently hidden

I got a number of DIVs and only one of these DIVs is shown at a given time. Inside my DIVs, I have buttons which I want to apply ellipsis.

I traced the error in the following line: (inside doLiveUpdater() function)

if ((containerData.containerWidth != containerElement.width())

I had to check first if containerData is valid:

if (containerData) {
if ((containerData.containerWidth != containerElement.width())
}

Firefox H2 elements being removed rather than showing ellipsis

Firefox seemed to be the only browser that would remove the content for title elements that were wrapped in H2.

To fix the issue we just altered the offset and then the problem was fixed. Its a quick hack but maybe someone else experiencing the problem can benefit from the work around.

// Iterate until wrapper element height is less than or equal to the original container element
// height plus possible wrapperOffset.
-      while (wrapperElement.innerHeight() > containerElementHeight + wrapperOffset) {
+      while (wrapperElement.innerHeight() > containerElementHeight + (wrapperOffset + 1)) {
        // Apply ellipsis on last text node, by removing one word.
        ellipsisApplied = ellipsisOnLastTextNode(selectedElement);

.ellipsis() errors when data contains reserved regex characters

Trying to call ellipsis on this HTML

The Analytical Chemistry Laboratory has a CLIA Certificate of Compliance and provides custom testing for investigators. Sample types can vary from serum/plasma to tissue or cell homogenates. However, certain tests require special sample handling. Please contact the Analytical Laboratory for more information and current pricing.

Electrolytes analyzed by NOVA analyzer.
Na+
K+
Total Ca2+
Li

produces this error in Chrome:
Uncaught Syntax error, unrecognized expression:

Documentation on "selector" option is misleading

The documentation at http://pvdspek.github.com/jquery.autoellipsis/ implies that the selector option is used, when provided, to select children on which to apply the ellipsis functionality. However, upon reading the source, I see this is only the case when combined with the live option. Either the documentation should be updated to reflect this, or the subselector should always be used.

Check for existence

Check for the existence when using the ellipsis function. When the element does not exist, it causes strange behaviours on Firefox, Safari and Chrome browsers.

$(...).data() may return undefined

In: var containerData = containerElement.data();

containerElement.data() might return undefined. At least according to the jQuery docs this is possible. The code should be fixed to handle this.

Problem with paddings

When element has paddings .ellipse() method wrongly calculates its size. I thing .ellipse() should use .width()/.height() istead of .innerWidth()/.innerHeight()

limited tags

Hi,
It work great, thanks for this piece of code, but it seems to work with only on certain tags :

<ul id="container">
<li>
<span>my too long text.</span>
</li>
</ul>
</pre>

If I try others tags (div, p ...) or simpler code like
<div id="container">my too long text</div>
, it fails

Stops setInterval timer

When executed inside a setInterval timed method it seems to stop the timer. Timer doesn't trigger a second time.
[...]
setInterval(function() {
that.updateComponents();
}, 1000);
[...]

updateComponents: function() {
[...]
for(var i = 0; i < that.components.length; ++i) {
[...]
$("div.contentComponent" + i).ellipsis("p");
[...]
}
}

Any further details on my code wanted?

Cheers,
Andreas

When I try to use, all I get is h(d).get(0) is undefined

This is what I see in the firebug console in firefox:

{{{
h(d).get(0) is undefined
ellipsis()jquery...?body=1 (line 24)
each(object=[div], callback=function(), args=undefined)jquery.js?body=1 (line 661)
each(callback=function(), args=undefined)jquery.js?body=1 (line 275)
ellipsis(b=[span.description], c=Object { ellipsis="...", setTitle="never", live=false})jquery...?body=1 (line 24)
ellipsis()jquery...?body=1 (line 24)
each(object=[span.description, span.description, span.description, 215 more...], callback=function(), args=undefined)jquery.js?body=1 (line 661)
each(callback=function(), args=undefined)jquery.js?body=1 (line 275)
ellipsis(b=undefined, c=undefined)jquery...?body=1 (line 24)
(?)()live.js?body=1 (line 4)
fire(context=Document live, args=[function()])jquery.js?body=1 (line 1065)
fireWith(context=Document live, args=[function()])jquery.js?body=1 (line 1183)
ready(wait=undefined)jquery.js?body=1 (line 438)
DOMContentLoaded()jquery.js?body=1 (line 928)
[Break On This Error](function%28a%29{function m%28%29{if%28!d%29{d=!0;...:l%28d.selector%29;return this}})(jQuery)
}}}

Looks like maybe this is broken if a more recent jquery is used? -- please fix

Maintenance of this repository.

Is there any activity of the creator? So many unresolved issues and no reaction.
Repository is not maintained anymore?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of pvdspek/jquery.autoellipsis!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library pvdspek/jquery.autoellipsis is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "pvdspek/jquery.autoellipsis",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Ellipsis does not work correctly on max-height boxes in IE

Ellipsis always completely removes content in max-height limited boxes in Internet Explorer. In other browsers ellipsis works as expected.

Doesn't care about padding

When using padding on an element, the ellipsis does apply, but the last line (in my case) is cut-off.
I'm using padding:3px;

If content of element is replaced, a second .ellipsis() fails due to existing/wrong .data('jqae')

If the content of an 'ellipsed' element is replaced, a second .ellipsis() on the element fails due to existing/wrong .data('jqae') internal storage of autoellipsis.

Scenario:

1. div.mydiv gets some content via .html( "lorem ipsum 1 long longer longest etc." )
2. $( '.mydiv' ).ellipsis() is called
3. content is 'ellipsed' ok, fine
4. div.mydiv is cleared with $( '.mydiv' ).empty()
5. div.mydiv gets new content via .html( "lorem ipsum 2 even longer or shorter or etc." )
6. $( '.mydiv' ).ellipsis() is called
7. content is not 'ellipsed', not as expected

The problem is that .empty() does (of course) not clear the .data( 'jqae' ) of div.mydiv and so the second call to $( '.mydiv' ).ellipsis() finds it and draws wrong conclusions.

Workaround, clear the .data('jqae') internal storage of autoellipsis before second call:

1. $( '.mydiv' ).data( 'jqae', null )
2. $( '.mydiv' ).ellipsis() is called
3. content is 'ellipsed' ok, fine

Thanks for this great plugin.