jquery - Content not sizing to modal window until browser window resize -


i'm trying place dynamic content in modal (popup) they're not sizing properly. however, if have popup open , resize browser window, kick place. content sizing hidden div prior opening modal. how can fix this? i'm assuming jquery way go?

below screenshot of i'm facing. top part of photo appears when click link open modal & bottom pick happens after resize window (which i'm after).

here's click event code.

// lightbox link             $(context).on('click', themifygallery.config.lightbox, function(event){                 event.preventdefault();                 var $self = $(this),                     $link = ( $self.find( '> a' ).length > 0 ) ? $self.find( '> a' ).attr( 'href' ) : $self.attr('href'),                     $type = themifygallery.getfiletype($link),                     $title = (typeof $(this).children('img').attr('alt') !== 'undefined') ? $(this).children('img').attr('alt') : $(this).attr('title'),                     $iframe_width = (themifygallery.isvideo($link)) ? '100%' : (themifygallery.getparam('width', $link)) ? themifygallery.getparam('width', $link) : '700',                     $iframe_height = (themifygallery.isvideo($link)) ? '100%' : (themifygallery.getparam('height', $link)) ? themifygallery.getparam('height', $link) : '100%';                     if($iframe_width.indexof("%") == -1) $iframe_width += 'px';                     if($iframe_height.indexof("%") == -1) $iframe_height += 'px';                  if( themifygallery.isyoutube( $link ) ) {                     // youtube videos, sanitize url                     $link = themifygallery.getyoutubepath( $link );                 }                 var $args = {                     items: {                         src: $link,                         title: $title                     },                     type: $type,                     iframe: {                         markup: '<div class="mfp-iframe-scaler" style="max-width: '+$iframe_width+' !important; height: '+$iframe_height+';">'+                         '<div class="mfp-close"></div>'+                         '<div class="mfp-iframe-wrapper">'+                         '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+                         '</div>'+                         '</div>'                     }                 };                 if($self.find('img').length > 0) {                     $.extend( $args, {                         mainclass: 'mfp-with-zoom',                         zoom: {                             enabled: true,                             duration: 300,                             easing: 'ease-in-out',                             opener: function() {                                 return $self.find('img');                             }                         }                     });                 }                 if(themifygallery.isvideo($link)){                     $args['mainclass'] += ' video-frame';                 } else {                     $args['mainclass'] += ' standard-frame';                 }                 if(themifygallery.isiniframe()) {                     window.parent.jquery.magnificpopup.open($args);                 } else {                     $.magnificpopup.open($args);                     $(window).trigger('resize');                 }             }); 

i did add $(window).trigger('resize'); , works great! need implement in own scripts.js it's not overwritten someday.

thanks again,

mike

content not sizing modal window until browser window resize

if window resize event can fix problem, can trigger event after show modal form (in jquery):

 $(window).trigger('resize'); 

further debugging requires actual html markups , js codes.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -