javascript - jquery resizing content on browser size change gets odd values -
i trying make jquery script wrote responsive on browser window size. seems work on loading page, , when downscaling window.
when upscaling window or maximizing odd values, works when upscale slow. when pushing maximize button, gets awkward.
you can see script here : treiber-schoener-leben.de.
you can see error when downscale window, , example maximize it. wondering i´m doing wrong. maybe way of calculating aspect ratio wrong. new here, should post whole script? if so, i´ll that. put little debug information on top of slider. i´ll greatful hint. have tried many ways, can´t work right.
edit3: ok, got solved. had recode whole resizing function, , had make function gets called when resize finished.
edit2: got laptop windows xp , firefox 20 installed, works flawless there. on pc win7 64 bit it´s awkward. never had issue that.
edit:
i calling function resizeslider() with:
$(window).resize(function() { resizeslider(); }); function resizeslider() { if ( $(window).width() < c.width() ) { ratio = c.width() / $(window).width(); c.css({ 'width': $(window).width(), 'height': (c.height() / ratio) }); w.css({ 'width': $(window).width(), 'height': (w.height() / ratio) }); o.startwidth = (o.startwidth / ratio); o.endwidth =(o.endwidth / ratio); $('#'+o.container).find('img').each(function(){ $(this).css({'width':($(this).width() / ratio ) , 'height': ($(this).height() / ratio ) }); }); s.each(function(){ $(this).css({'width': o.endwidth , 'height': ($(this).height() / ratio) }); }); sw.each(function(){ $(this).css({'width': o.endwidth , 'height': ($(this).height() / ratio) }); }); }else if ( $(window).width() > c.width() && c.width() < orgsize.width) { ratio = c.width() / $(window).width(); c.css({ 'width': c.width() / ratio, 'height': c.height() / ratio }); w.css({ 'width': w.width() / ratio, 'height': w.height() / ratio }); o.startwidth = o.startwidth / ratio; o.endwidth = o.endwidth / ratio; $('#'+o.container).find('img').each(function(){ $(this).css({'width': ($(this).width() / ratio ) , 'height': ($(this).height() / ratio ) }); }); s.each(function(){ $(this).css({'width': o.endwidth , 'height': ($(this).height() / ratio) }); }); sw.each(function(){ $(this).css({'width': o.endwidth , 'height': ($(this).height() / ratio) }); }); } }
the if-part seems work, else-part getting wrong values when calculating ratio.
Comments
Post a Comment