CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Dónal
Dónal

Reputation: 187399

containing div does not resize correctly

On this page, 3 reviews are displayed in a Bootstrap carousel. As you paginate through the reviews, the <div> with the grey background should resize to fit the length of the review. This works reasonably well until you wrap around the end of the review list.

For example, if you use the next button to go forwards through the reviews, then when you go from the last review (#3) to to the first review, a big empty space is left under the first review. Similarly if you use the prev button to go backwards through the reviews, then when you go from the first review to the last (#3), the text of the review overflows the containing div (see screenshot below).

In summary, whenever you wrap around the list of reviews, either by using the prev button to go from #1 to #3 or the next button to go from #3 to #1) the containing div is not correctly resized.

The event handlers that are called when the user paginates through this carousel are at the bottom of the page (reproduced here for convenience):

$(document).ready(function () {

    $('#reviewsCarousel').carousel({
        interval:null
    });

    // reviewsCarousel height animation and review counter (set .reviewCount to 
    // the amount of .item in #reviewsCarousel, on .nextReview or .prevReview button 
    // clicks: set the carousel-inner class to the animate to the height of the next 
    // item or the first item if there is no next item, on carousel slide, set the 
    // reviewIndex class text to the index position of the .active .item)
    $("#reviewsCarousel .reviewCount").html($('#reviewsCarousel .item').length);
    $("#reviewsCarousel .btn.nextReview").click(function () {
        var reviewHeight = $("#reviewsCarousel .item.active").next(".item").height();
        if (reviewHeight === undefined) {
            var reviewHeight = $("#reviewsCarousel .item").first(".item").height();
        }
        $("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
        $('#reviewsCarousel').bind('slid', function () {
            $("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
        });
    });
    $("#reviewsCarousel .btn.prevReview").click(function () {
        var reviewHeight = $("#reviewsCarousel .item.active").prev(".item").height();
        if (reviewHeight === undefined) {
            var reviewHeight = $("#reviewsCarousel .item").last(".item").height();
        }
        $("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
        $('#reviewsCarousel').bind('slid', function () {
            $("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
        });
    });

});

Here are a couple of screenshots showing the problem:

enter image description here enter image description here

Upvotes: 1

Views: 118

Answers (3)

Bruno
Bruno

Reputation: 5822

Maybe best not to use strict comparison for this if statement. Try instead

if (reviewHeight == undefined)

This also enters the if statement if reviewHeight === null.

Upvotes: 1

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

reviewHeight will never be undefined

USE if (!reviewHeight) insted

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60835

I tried a little something in the console:

$("#reviewsCarousel .item.active").next(".item").height();

And found out it was null.

if (reviewHeight === undefined) // It's never this.

You never get in the if. undefined !== null :-)

Just use:

if (!reviewHeight)

Any falsey value is good enough.

Upvotes: 1

Related Questions