Resizing Cycle2 with javascript is making things jittery

Question

I have a Cycle2 slideshow that I want to dynamically resize on its own when the window width is above 580px. At 580px and less, I want it to take up the height of the screen, minus the header and pager.

Here is my markup:

<div class="header-container">
    <div class="header"></div>
</div>
<div class="slideshow-container">
    <div class="cycle-slideshow" data-cycle-auto-height="24:13" data-cycle-slides="> .slide-container" data-cycle-timeout=4000 data-cycle-pager=".pager" data-cycle-pager-template="blah blah blah">
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <div class="slide-container" style="background-image:url(yada/yada);"></div>
        <div class="slide-container" style="background-image:url(yada/yada/yada);"></div>
    </div>
</div>  
<div class="pager-container">
    <div class="pager"></div>                   
</div>

I have tried the following code:

//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
    $('.cycle-slideshow').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
    $('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}

Which works fairly well, but at 580px and narrower, the slideshow is jittery when resizing the window because Cycle2 is constantly trying to insert it's own height.

My second solution is to set the height of .slideshow-container and add and remove the .mobile-slideshow class depending on if the window is less than 581px or not:

//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
    $('.cycle-slideshow').addClass('mobile-slideshow');
    $('.slideshow-container').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
    $('.cycle-slideshow').removeClass('mobile-slideshow');
    $('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}

.mobile-slideshow has a height of 100% !important in mobile view only.

This works fairly well too, except the height of the slideshow is jittery above 580px because .mobile-slideshow is constantly trying to readjust to 100% of the container's height.

Is there a better way to do this? I'm trying to keep this functionality as simple as possible, but the jitteryness that comes with resizing elements with javascript is making it a hassle.

---

UPDATE:

Okay, some of you asked for a jsFiddle to demo what's going on: JsFiddle

As you can see, when the window is over 580px wide, Cycle2 resizes it based on the data-cycle-auto-height attribute. When it is under 580px, the JQuery script determines the height, but as you shrink or expand the window, it jumps back and forth between Cycle2's auto height and the JQuery scripts calculated height.

Answer 1

Finally found a solution. See the working fiddle http://jsfiddle.net/6azbw8re/4/

Modify your resize() function to following,

function resize(){
    if($(window).width() < 581){            
        $('.header').html('JQuery script is determinging the height');
        var newHeight = $(window).height() - $('.header-container').height() - $('.pager-container').height();        
        $('#cycle-slideshow').addClass("change-height");
        $('head').append('<style> .change-height{ height:'+ newHeight+'px !important; } </style>');  
    }
    else{
        $('.header').html('cycle 2 is determining the height');
        $('.change-height#cycle-slideshow').removeClass('change-height');                        
    }
}

Basically, you need to add !important to the height property if you want it to override the cycle2 plugin's determined value.