Question

I am trying to get a text block to resize vertically and use the dotdotdot jQuery ellipsis-support plugin. The dotdotdot plugin features a set height parameter, and I wonder if there’s a method to dynamically update that set height. I want to take into account the total height of an adjacent div and resize the text block to fit the whole height of the particular div.

I made this jsFiddle as a loose mock-up of what I’d like to accomplish: http://jsfiddle.net/smittles/8psvZ/

Ideally, the synopsis text would expand to drop down to the red line as the red line moves down.

Because I’m using a set height this model doesn’t work right now. I don’t know what adjustments to make in order to get it working.

I do want to maintain the use of dotdotdot.js if possible.

Answer 1

Use the toggle function’s callback to re-call the dotdotdot code.

See this updated fiddle or the code snippet below:

$('.share').click(function(){
    $('.social_options').toggle('fast', function(){

      // height will be height of image frame + share button
      var new_height = $('.image_frame').height() + $('.share').height();

      // if the social options are visible, add that to height as well
      if ($('.social_options').is(':visible'))
          new_height += $('.social_options').height();

      $('.synopsis').dotdotdot({
            ellipsis    : '... ',
            wrap        : 'word',
            after       : null,
            watch       : true,
            height      : new_height
      });

    });        
});

You could prevent the redundant code too by creating a function that does the dotdotdot-ing. Call that on the page load, then call it on every subsequent toggle call as well.