Can I create a coda slider navigation with variable height for its content?

Question

Hi,

Most people know the Coda Slider effect well these days but even with googling and doing a search here I could not find my answer.

Question How can I create a Coda Slider style navigation that uses horizontal sliding/scrolling but adaptes its height during the sliding animation to the height needed for the content?

For instance, the first 'slide' only has a picture in it (400px width, 300px height) but the next slide has lots of info including pictures, text and video content totalling at 400px width and 800px in height. Now, creating a 800px high container to begin with is just a waste of space for slide 1 so i need to dynamically based upon the height needed by the content of the individual slide change the height of the slide's container.

Is this possible? Maybe there is a tutorial somewhere out there and one of yous could point me towards that.

In terms of technology I am quite adapt at xHTML and CSS but only an amateur at jQuery and PHP. While this should not be a restriction to your answer, please keep it in mind when explaining things.

Thank you very much for reading, I look forward to your ideas, solution and general input.

Jannis

Answer 1

I recently rolled my own. Here is (hopefully) a useful starting point.

Here is the code for my 'next button'.

var canSlide = true;
$('.next').bind('click', function() {



            if (!canSlide) { return false } // prevent queuing up of multiple clicks

            $('.prev').fadeIn(500);

            canSlide = false;

            $('.testimonials-container').animate({ left: '-=1011px' }, 1000, function() { canSlide = true });            

            if (currentPane == totalPanes) {

                $('.next').fadeOut(500);
                canScroll = false;

            } else {
                currentPane++;


            }

To get it to adjust it's height, you'd simply add a height to the animate's JSON argument. Such as

.animate({left: '-=1011px', height: newHeight + 'px'})

And of course, you'll need some JavaScript to work out what the next height should be!