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.
Share Improve this question edited Feb 27, 2012 at 6:33 Chords asked Feb 27, 2012 at 4:21 ChordsChords 6,8502 gold badges40 silver badges61 bronze badges 2- 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
Reset to default 4This 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.)