javascript - If statement works on resize, not ready? -
i trying accomplish 2 things:
the main content div dynamically sized fit exact height of window. accomplish goal function:
$(document).on( 'ready', function() { panelsresize(); $(window).on( 'resize', panelsresize ); }); function panelsresize() { var screenheight = $(window).height(); var screenwidth = $(window).width(); if (screenwidth > 768) { $( ".panels" ).css( "height", screenheight ); } };
the class .panels
applied main content area.
this works swell.
- i trying fill
.panels
images in.large
. these images need retain aspect ratio while being scalable. have based code on answer.
this works, not on ready. have resize screen, dropping below media query switches display .large
none. when resize higher media query, switching display block, functionality works perfect.
any ideas?
here's function (and markup):
$(document).on( 'ready', function() { bgresize(); $(window).on( 'resize', bgresize ); }); function bgresize(){ $( '.large' ).each(function() { var th = $(window).height(),//box height tw = $(window).width(),//box width im = $(this).children('img'),//image ih = im.height(),//inital image height iw = im.width();//initial image width if ( iw < tw ) { im.css( { "width" : "100%", "height" : "auto" } ); } else if ( ih < th ) { im.css( { "height" : "100%", "width" : "auto" } ); } var nh = im.height(),//new image height nw = im.width(),//new image width hd = (nh-th)/2,//half dif img/box height wd = (nw-tw)/2;//half dif img/box width if (nh<nw) { im.css({marginleft: '-'+wd+'px', margintop: 0});//offset left } else { im.css({margintop: '-'+hd+'px', marginleft: 0});//offset top } }); };
this html:
<ul id="homepanels"> <li id="cat1" class="panels"> <div class="large"> <img src="#" alt="" /> </div> <div class="small"> <img src="#" alt="" /> </div> </li> </ul>
the css:
#homepanels { list-style: none; margin:0; padding:0; overflow: hidden; } .large { width:100%; height:100%; } @media (min-width: 768px) { .large{display: block;} .small{display:none} } @media (max-width: 768px) { .small {display:block;} .large {display:none;} }
i think work if use jquery ready() function.
$(document).ready(function() { bgresize(); $(window).on('resize', bgresize ); });
Comments
Post a Comment