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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -