Dotdotdot.js only works after resizing the window

Question

I am trying to add ellipsis to several multi-line paragraphs on my site when they exceed a certain height. For this I use dotdotdot , the jquery plugin.

The strange thing is that it does not work when I refresh the page. It only works after resizing the window (and then it works fine). I already put all the scripts at the end of my html, so dotdotdot loads last, but it still does not work properly. Does anyone know why this will happen?

I use these settings for dotdotdot:

$(document).ready(function() { $("p.article-content").dotdotdot( { /* The HTML to add as ellipsis. */ ellipsis : '...', /* How to cut off the text/html: 'word'/'letter'/'children' */ wrap : 'word', /* jQuery-selector for the element to keep and put after the ellipsis. */ after : null, /* Whether to update the ellipsis: true/'window' */ watch : true, /* Optionally set a max-height, if null, the height will be measured. */ height : null, /* Deviation for the height-option. */ tolerance : 0, /* Callback function that is fired after the ellipsis is added, receives two parameters: isTruncated(boolean), orgContent(string). */ callback : function( isTruncated, orgContent ) {}, lastCharacter : { /* Remove these characters from the end of the truncated text. */ remove : [ ' ', ',', ';', '.', '!', '?' ], /* Don't add an ellipsis if this array contains the last character of the truncated text. */ noEllipsis : [] } }); }); 

Corresponding HTML (it's ugly, I know, I'm still experimenting with it):

 <article class="article"> <div class="article-image"></div> <h2>Title</h2> <p class="date">December 19, 2012</p> <p class="article-content">Lorem ipsum etc. (the actual content is larger)</p> </article> 

And CSS:

 article { font-size: 99%; width: 28%; line-height: 1.5; float: left; margin-left: 8%; margin-bottom: 3em; text-align: justify; } article h2 { font-size: 125%; line-height: 0.5; text-transform: uppercase; font-weight: normal; text-align: left; color: rgba(0,0,0,0.65); } .date { margin-top: 0.3em; margin-bottom: 1em; font-family: 'PT Sans'; color: rgba(0,0,0,0.5); } .article-image { background-image: url(http://lorempixel.com/g/400/300/city/7); width: 100%; height: 13em; overflow: hidden; margin-bottom: 1.5em; } p.article-content { font-family : 'PT Sans'; color : rgba(0,0,0,0.65); margin-bottom : 0; height : 7em; overflow : hidden; } 

Answer 1

Or just wrap the whole function under the .resize() function. Not the most elegant solution, but it will work:

 $(document).ready(function() { $(window).resize(function() { $("p.article-content").dotdotdot( { // All your code goes here }); }).resize(); // The second .resize() will fire when the document is ready (ie onload), // therefore executing .dotdotdot() upon loading }); 

[Edit]: As suggested by Kevin, since .dotdotdot() already listening for a resize event, you don’t even need to wrap the function. Just fire the event when the document is ready using $(window).resize() .

Answer 2

had a similar problem. it was just necessary to put dotdotdot initialization in the window load event handler instead of the finished dom.

Answer 3

At first it was so easy with dotdotdot. But I also had a problem with a responsive page containing a lot of content. After the document is ready, the containers on the page are still changing as the content fills. With your comments, my solution now:

 $(document).ready(ellipsizeText); // Plugin must have been working flawles inhere as described in documentation. window.setTimeout(ellipsizeText, 400); // Just for any case. window.setTimeout(ellipsizeText, 800); // Maybe user didn't saw it flickering. $(window).load(ellipsizeText); // Oh hell! the images are loading so not all containers are yet on their places. We wait on them.. function ellipsizeText() { $(".selectorForEllipsis").dotdotdot({ watch: true }); } 

I think the right solution would be to add a listener to each container with text when this changes its position or size to update dotdotdot, and not just to resize the window. Perhaps with Ben Alman yquery resize plugin

Or is there a plugin that handles these content loading issues better?

Answer 4

Changed from watch: "window" to watch: true

and he began to work for me!