0

I'm using the Bootstrap 3 carousel for my Rails 4 application. To truncate longer captions in the carousel, I'm using the jquery dotdotdot plugin which also appends "..." at the end. While the plugin works for the first image in the carousel, it doesn't work for subsequent images.

Here's the jsfiddle: http://jsfiddle.net/michaelvli/GD3JH/9/

Why is dotdotdot not executing on all captions of the carousel? I've tried using a carousel event handler to execute the plugin every time the carousel slides but this solution isn't suitable as the user will see the full caption for a brief moment before dotdotdot has had a chance to execute:

$('.carousel').on('slide.bs.carousel', function () {
    $('.dotdotdot').dotdotdot({});
});

Alternatively, if somebody can recommend another solution that truncates multi-line captions while appending a "..." to the end, that would be great too.

Vee
  • 1,821
  • 3
  • 36
  • 60

3 Answers3

3

The problem is that since it is not showing all items it's not applying the ... at the end of each, the ones hidden are not activating. To solve this we have all items to be the class active item so they are shown then switch all but the first slide (or element 0) to item. To hide them again. So we can add this:

$( ".active.item" ).each(function( index ) {
    if(index != 0){
        $(this).removeClass('active');
    }
});

Now we have all the items affected properly by the dotdotdot.

Fiddle Here

Spencer Wieczorek
  • 21,229
  • 7
  • 44
  • 54
  • Thanks, Spencer. You are exactly right. Just to add a bit more, in my actual code to my application, I had to put your code above in a callback function to make sure the dotdotdot plugin had executed completely before stripping .active for the slides that should be hidden. Thanks again! – Vee Jun 24 '14 at 13:57
  • Making active on all items is showing all slides at once initially for a moment. Some hiccup type of feeling is there. Any idea on this? – Ankur Aggarwal Oct 23 '15 at 06:58
  • @AnkurAggarwal That's because the code isn't ran until `onload`, you can change it to `onDomReady`. You can also add the `active` class to the other items in jQuery so you don't have that effect (having only the first slide `.active` initially). [For example](http://jsfiddle.net/GD3JH/44/) – Spencer Wieczorek Oct 23 '15 at 14:59
  • @SpencerWieczorek Came up with my own solution. On Slide Carousel event applied the dot dot dot config to the current slide content and it worked fine. Only thing is to add setTimeOut for slide transition to complete. – Ankur Aggarwal Oct 24 '15 at 05:42
1

you can actually add an auto ellipsis with css

css :

.ellipsis {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;  
                -o-text-overflow: ellipsis;  
            }

and here is your updated fiddle .. I have left your dotdotdot plugin there, but you really do not need it anymore

http://jsfiddle.net/gsiry01/Ahhc6/1/

I have basically added the ellipsis class to your css and have added the ellipsis class to your

elements

<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>
G-Man
  • 7,232
  • 18
  • 72
  • 100
  • 1
    Thanks, Gaetano. While I'd prefer a pure CSS solution such as yours over one that involves adding more Javascript, using the .ellipsis class doesn't work for a scenario where I display multiple lines of text before adding the ellipsis. That's why I picked @spencer's solution. – Vee Jun 24 '14 at 14:01
0

Added to Spencer Wieczorek's code

For multiple carousels on the same page, which adds an active class to all carousel item classes and removes all active class after the dotdotdot js except for each carousel's first item

$(".item").each(function(){
   $(this).addClass('active');
})

$('.dotdotdot').dotdotdot({
    // configuration goes here
});
$(".carousel-inner").each(function(){
    $(this).find(".active.item").each(function( index ) {
        if(index != 0){
            $(this).removeClass('active');
        }
    });
});

http://jsfiddle.net/ardieziff/xj5jn7L5/

Andrew
  • 21
  • 3