CODEWITHSUNDEEP
javascriptjquerycss
user1110562
user1110562

Reputation: 423

Dynamically change height of div based on current slide height

I have a text slider working on the following page:

link removed

What I want to do is to have the containing DIV change it's height if a slide with a lot of text is loaded, so that it doesn't get cut off.

                var slides = $('.slide');
                var container = $('#slides ul');
                var elm = container.find(':first-child').prop("tagName");
                var item_width = container.width();
                var previous = 'prev'; //id of previous button
                var next = 'next'; //id of next button
                slides.width(item_width); //set the slides to the correct pixel width
                container.parent().width(item_width);
                container.width(slides.length * item_width); //set the slides container to the correct total width
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();


                //if user clicked on prev button

                $('#buttons a').click(function (e) {
                    //slide the item

                    if (container.is(':animated')) {
                        return false;
                    }
                    if (e.target.id == previous) {
                        container.stop().animate({
                            'left': 0
                        }, 1500, function () {
                            container.find(elm + ':first').before(container.find(elm + ':last'));
                            resetSlides();
                        });
                    }

                    if (e.target.id == next) {
                        container.stop().animate({
                            'left': item_width * -2
                        }, 1500, function () {
                            container.find(elm + ':last').after(container.find(elm + ':first'));
                            resetSlides();
                        });
                    }

                    //cancel the link behavior            
                    return false;

Upvotes: 0

Views: 1693

Answers (1)

Jemi Salo
Jemi Salo

Reputation: 3751

Remove the following row from #slides li

height: 250px;

You should now use javascript to change the height of the "slides" element. Here's an example hack that works on your page, but you should obviously pretty it up some to fit your page. Run it after changing slides. (Maybe hook it up to the buttons)

//The second list item seems to be the visible one. This will likely fail with less than 2 items.
var newHeight = document.getElementById("slides").children[0].children[1].clientHeight;
document.getElementById("slides").style.height = newHeight+"px";

Get the height of the visible item and change the height of the containing element accordingly.

Upvotes: 2

Related Questions