javascript - If statement works on resize, not ready? -


i trying accomplish 2 things:

  1. 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.

  1. 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

Popular posts from this blog

php - Admin SDK -- get information about the group -

dns - How To Use Custom Nameserver On Free Cloudflare? -

Python Error - TypeError: input expected at most 1 arguments, got 3 -