jquery - Resizing Cycle2 with javascript is making things jittery -

i have cycle2 slideshow want dynamically resize on own when window width above 580px. @ 580px , less, want take height of screen, minus header , pager.

here 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 following code:

//resize slideshow 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 well, @ 580px , narrower, slideshow jittery when resizing window because cycle2 trying insert it's own height.

my second solution set height of .slideshow-container , add , remove .mobile-slideshow class depending on if window less 581px or not:

//resize slideshow 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 height of 100% !important in mobile view only.

this works too, except height of slideshow jittery above 580px because .mobile-slideshow trying readjust 100% of container's height.

is there better way this? i'm trying keep functionality simple possible, jitteryness comes resizing elements javascript making hassle.

---

update:

okay, of asked jsfiddle demo what's going on: jsfiddle

as can see, when window on 580px wide, cycle2 resizes based on data-cycle-auto-height attribute. when under 580px, jquery script determines height, shrink or expand window, jumps , forth between cycle2's auto height , jquery scripts calculated height.

finally found solution. see working fiddle http://jsfiddle.net/6azbw8re/4/

modify resize() function following,

function resize(){     if($(window).width() < 581){                     $('.header').html('jquery script determinging 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 determining height');         $('.change-height#cycle-slideshow').removeclass('change-height');                             } } 

basically, need add !important height property if want override cycle2 plugin's determined value.