javascript - Elements misposition at resize (using max-width:100% to scale rel. to window size) -



javascript - Elements misposition at resize (using max-width:100% to scale rel. to window size) -

i using max-width: 100%; height: auto; on <img> elements , on image slider wrapper.

when resizing browser window, images scale correctly, many surrounding elements don't follow along , misposition. self-correct 1 time page refreshed or next image loaded in image slider. ideas?

demo - scale window, css @ line 25

pikachoose library sets sizes of few elements on each animation.

<div class="pika-stage" style="height: 355px;"> <div class="pika-aniwrap" style="position: absolute; top: 0px; left: 0px; width: 835px;">

this why fixes when next animation happens. though source , replicate animations re-sizing code , set in $(window).resize event handler. looking @ docs pikachoose seems have goto method.

you this:

$(window).resize(function(){$('#pikame').data('pikachoose').goto(3)})

where index of 3 current active slide. want utilize form of timeout , phone call 1 time improve performance.

var resizeslider = null $(window).resize(function(){ if(resizeslider) cleartimeout(resizeslider) resizeslider = settimeout(function() { $('#pikame').data('pikachoose').goto(3) }, 300) })

this should create goto fired 300ms after lastly window.resize event.

hope gives ideas.

javascript jquery html css slider

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -