Reputation: 423
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
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