Search jQuery

jQuery Forum

jQuery Cycle: How to set the height of the cycled area to auto.

in Using jQuery Plugins • 9 years ago

Hey everyone,

So I'm using the Cycle plugin to cycle through some divs. These divs have quite a bit of content in them that is variable and I'm running into an issue where the content that is being cycled is getting hidden in its containing div. This div is the one that feed to the function to be cycled. When I try to toy around in dev tools and set the height of the container to auto the entire container shrinks to a height of 0 or 2px. I can't seem to figure out why this would be occurring. Any help would be greatly appreciated!

Replies(6)

charlietfl

Re: jQuery Cycle: How to set the height of the cycled area to auto.

9 years ago

Somewhat depends on other page layout issues. Also depends on how you set up your slides dimensioning as to what options will work best

cycle sets all slides position absolute, so you have to set a height for container if you have content under it.

Look at options "fit", "height", "containerResize" . Depending on situation, outer wrappers of slide content may also be helpful

Hard to advise more than that without seeing what you are working with

stavros917

Re: jQuery Cycle: How to set the height of the cycled area to auto.

9 years ago

Appreciate the response,

Its in a .net MVC environment spliced with Razor code so copying the exact code would be a little messy but here is an example of its basic structure and the javascript that is being used on that specific area. Thanks again for the help!

$('document').ready(function(){
// Challenge leader board page cycler
$(".showChallengeDetail").after('<div id="chalListNav">')
.cycle({
fx: 'scrollHorz',
speed: 300,
prev: '#prev',
next: '#next',
containerResize:0,
timeout: 0,
after: onAfter,
pager: '#nav ',
pagerAnchorBuilder: function (idx, slide) {
return '<a href="#"></a>';
}
});
// call back function to animate the height of the container
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#prev')[index == 0 ? 'hide' : 'show']();
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//animates the container's height to that of the current slide
$(this).parent().animate({ height: $ht });
}
}); //end document.ready
<div id= "container">
<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>
<div class="slidesContainer">
<div class="slide">
<div class="slideHead"></div>
<div class="slideContent">
<div class="summary"></div>
<div class="taskList"></div>
<div class="taskDetails"></div>
</div>
</div>
</div>
</div>

The content with in the slide is variable, so for instance the "taskList" div can have any number of items in it that when clicked will expand out to show the description of what that task is. As of now I have the main slide containers height able to adjust depending on how large the "slide" container is. But it will not expand if I click on the task item and display the details.

charlietfl

Re: jQuery Cycle: How to set the height of the cycled area to auto.

9 years ago

Can you post a link to a demo page? Seeing some nested html inside slides doesn't really help understand the implications of height issues as they pertain to the elements/content below the slideshow

stavros917

Re: jQuery Cycle: How to set the height of the cycled area to auto.

9 years ago

Yea sorry about that I put together a fiddle to make it easier

http://jsfiddle.net/dAaCk/4/

So if you click on the clickMe it expands the "taskDetails" container but the overall slides container will not adjust to it, so you cant see the content. I also have some text on the second slide so you can see it expand on its own if the content isnt hidden at first. It only adjust right now depending on the size of the container itself as its being displayed before it is expanded.

Thanks!

charlietfl

Re: jQuery Cycle: How to set the height of the cycled area to auto.

9 years ago

Try this, I added the same height adjust method you used in the slide transition callback

http://jsfiddle.net/dAaCk/7/

stavros917

Re: jQuery Cycle: How to set the height of the cycled area to auto.

9 years ago

Sorry it has taken so long for me respond back, I really appreciated the help. The method you showed me worked out really well with some slight alterations made to fit into my project. Thanks again!

Top Reply

Response title

Attachments

jQuery Forum

jQuery Cycle: How to set the height of the cycled area to auto.

Replies(6)

Re: jQuery Cycle: How to set the height of the cycled area to auto.

Re: jQuery Cycle: How to set the height of the cycled area to auto.

Re: jQuery Cycle: How to set the height of the cycled area to auto.

Re: jQuery Cycle: How to set the height of the cycled area to auto.

Re: jQuery Cycle: How to set the height of the cycled area to auto.

Re: jQuery Cycle: How to set the height of the cycled area to auto.

Statistics

Tags

Actions