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
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
Post a Comment