Question

I’m using jQuery Cycle for a few slides, with content below it. jQuery Cycle sets the parent to relative and the child slides to absolute, so the content that should be below it is covered. Typically, I would give the parent container a height to solve my problem.

Since the layout is responsive, the height can change. Is there a simple solution out there for this?

EDIT:

Here’s what wound up doing it for me:

$(window).load(function(){

    var rotate_height = $('#rotate div img').height();
    $('#rotate').css('height', rotate_height);

    $(window).resize(function() {
        if($(window).width() >= 960){
            rotate_height = 290;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 768 && $(window).width() <= 959) {
            rotate_height = 230;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 480 && $(window).width() <= 767) {
            rotate_height = 210;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() <= 479) {
            rotate_height = 150;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        }
    });

    $('#rotate').cycle({
        fx: 'fade',
        fit: 1,
        containerResize: 0,
        slideResize: 0,
        height: rotate_height       
    });
});

cycle(‘next’) forces the slide to the next after a visitor resizes their monitor. Not ideal, but the images wouldn’t scale back up, only after a slide change.

Answer 1

You can use ready and resize events to trigger a function which will set the height appropriately based on the width of the window. As the page ‘responds’ to the current window width, your jQuery method will appropriately size the height of the slideshow’s parent.