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.

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.

• javascript
• jquery
• html
• css
• cycle

• Some sample codes would be helpful. – Starx Commented Feb 27, 2012 at 4:37
• Glad the conceptual 'nudge' was enough to steer you to a solution! – deefour Commented Feb 27, 2012 at 16:03

4 Answers 4

This is my solution:

$(window).resize(function(){
    $('.cycle-container').each(function(){      
        $(this).height($(this).find('> *:first').outerHeight());
    })
});

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.

I had the same problem, solved it like this:

HTML:

<div class="hp_slider">
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/17dd0cc96316523cbba09777c8e512769078b0bc.png" /></a>
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/39fbcef502bd01b7f13980a81b73f6e6cb5491b6.jpg" /></a>
</div>

CSS:

.hp_slider {margin-bottom:49%; width:100%; height:auto;}
.hp_slider img {width:100%; height:auto;}

jQuery:

$(document).ready(function() {
$('.hp_slider').cycle({
fx: 'fade',
containerResize: false,
slideResize: false,
fit: 1
});
});

It's a little dirty, but the margin-bottom as a percentage pushes the text down from behind the slider and keeps it in place at different sizes so it's still responsive.

i think you can do this:

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

basically, when window resizes, the slide container is forced to resized. (not sure if you should set all to true or false, please give it a try.)