resize - Dynamically change a banner size on changing the browser window using Jquery -
i came solution works well, except have refresh screen change banner size.
<script type="text/javascript"> var wi = $("#containingdiv").width(); var iw = $(document).width(); $(document).ready(function () { var iw = $(document).width(); $('#test b').html(iw); $(window).resize(function () { iw = $(document).width(); $('#test b').html(iw); wi = $("#containingdiv").width(); wi = math.round(iw * .6); $('#test1 b').html(wi); $("#s1").css('width',wi); $("#s2").css('width',wi); $("#s3").css('width',wi); $("#s4").css('width',wi); $("#s5").css('width',wi); $("#s6").css('width',wi); $("#s7").css('width',wi); $("#s8").css('width',wi); }); $('#allinone_bannerrotator_classic').allinone_bannerrotator({ skin: 'classic', width: wi, height: wi /2, responsive: true, responsiverelativetobrowser: true, animationtime: 0.5, width100proc: false, autohidebottomnav: true, showpreviewthumbs: false, shownavarrows: false, showbottomnav: false, autohidenavarrows: true, loop: true, enabletouchscreen: true, showcircletimer: false, autoplay: 4, resizeimages: true, defaulteffect: 'fade' }); ////$('.bxslider').bxslider({ //// mode: 'fade', //// captions: true ////}); }); </script>
first div width have placed banner, , document width, scale images , banner. tried put banner script inside window resize, unfortunately did not work, not see images. appreciate suggestions.
first, you should put resize function next ready function, not inside.
$(document).ready(function () { //stuffs here }); $(window).resize(function () { //stuffs here });
and there .refresh()
function allinone_bannerrotator pluggin.
so, on ready, initialize pluggin, on resize, set new options (width), , refresh. read pluggin's documentation.
Comments
Post a Comment