javascript - BXslider popup window issue - height problems -

i using bxslider, using responsive design, multiple sliders , popup window. problem. have multiple sliders working , rescaling browser size. problem popup. popup cuts off images.

note: javascript skills limited, please explain as possible. examples best non-coders me.

this post: bxslider in pop div ... makes reference bx-viewport having height of 0px (due fact initial image hidden). so, javascript tries initial image size, fails because no image shown (no image = no image height). once second image shown (due bxslider autoplay), problem fixes itself.

i tried use solution on bxslider in pop div didn't work code (it makes reference monbxslider.js, not use).

so, see causing problem ... have no idea how fix it. i've tried playing styles, doesn't work. fixed height doesn't work, because each slider different, , may have different image. below snippets of code....

header javascript info...

<link href="/js/jquery.bxslider.css" rel="stylesheet"></script> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>   <!-- popup toggle --> <script type="text/javascript"> function toggle_menu(id) {     var e = document.getelementbyid(id);     if (e.style.display == 'block') e.style.display = 'none';     else e.style.display = 'block'; } </script> 

styles popup

    [id^="popup-"], div[id*=" popup-"] {        display:none;     }      .window {            display:block;         background:white;         position:fixed;         top:0; left:0;         margin:50px 5% 0 5%;          width:90%;         z-index: 1001;       }         .window .close {       width: 22px; height: 22px; background: #000; border-radius: 50%; border: 3px solid #fff; display: block; text-align: center; color: #fff; text-decoration: none; position: absolute; top: -10px; right: -10px; z-index: 1002;}       .window .bx-viewport { min-height:200px !important; }       .window .bx-viewport ul li img { width:100% !important; padding:10px; }       .window .bx-viewport ul li { width:100% !important; }     .windowoverlay {          position: fixed;         top: 0;         left: 0;         width: 100%;         height: 100%;         background:rgba(0,0,0,0.8);         opacity:0.8;         filter:alpha(opacity=80);         z-index: 1000;        } 

bxslider css

/**  * bxslider v4.1.2 - loaded, responsive content slider  * http://bxslider.com  *  * written by: steven wanderski, 2014  * http://stevenwanderski.com  * (while drinking belgian ales , listening jazz)  *  * ceo , founder of bxcreative, ltd  * http://bxcreative.com  */   /** reset , layout ===================================*/  .bx-wrapper {     position: relative;     margin: 0 auto;     padding: 0;     /* *zoom: 1; */ }  .bx-wrapper img {     max-width: 100%;     display: block; }  /** theme ===================================*/  .bx-wrapper .bx-viewport {     background: #fff;      /*fix other elements on page moving (on chrome)*/     -webkit-transform: translatez(0);     -moz-transform: translatez(0);         -ms-transform: translatez(0);         -o-transform: translatez(0);         transform: translatez(0); }  .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {     position: absolute;     bottom: -30px;     width: 100%; }  /* loader */  .bx-wrapper .bx-loading {     min-height: 50px;     background: url(../images/bx_loader.gif) center center no-repeat #fff;     height: 100%;     width: 100%;     position: absolute;     top: 0;     left: 0;     z-index: 2000; }  /* pager */  .bx-wrapper .bx-pager {     text-align: center;     font-size: .85em;     font-family: arial;     font-weight: bold;     color:#999;     padding-top: 20px; }  .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {     display: inline-block;     *zoom: 1;     *display: inline; }  .bx-wrapper .bx-pager.bx-default-pager {     background: #999;     text-indent: -9999px;     display: block;     width: 10px;     height: 10px;     margin: 0 5px;     outline: 0;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;     border-radius: 5px; }  .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {     background: #fff; }  /* direction controls (next / prev) */  .bx-wrapper .bx-prev {     left: 10px;     background: url(../images/controls.png) no-repeat 0 -32px; }  .bx-wrapper .bx-next {     right: 20px;     background: url(../images/controls.png) no-repeat -43px -32px; }  .bx-wrapper .bx-prev:hover {     background-position: 0 0; }  .bx-wrapper .bx-next:hover {     background-position: -43px 0; }  .bx-wrapper .bx-controls-direction {     position: absolute;     top: 50%;     margin-top: -16px;     outline: 0;     width: 33px;     height: 31px;     text-indent: -9999px;     z-index: 9999; }  .bx-wrapper .bx-controls-direction a.disabled {     display: none; }  /* auto controls (start / stop) */  .bx-wrapper .bx-controls-auto {     text-align: center;     display:none; /*hide stop button*/  }  .bx-wrapper .bx-controls-auto .bx-start {     display: block;     text-indent: -9999px;     width: 10px;     height: 11px;     outline: 0;     background: url(../images/controls.png) -86px -11px no-repeat;     margin: 0 3px; }  .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {     background-position: -86px 0; }  .bx-wrapper .bx-controls-auto .bx-stop {     display: inline-block;     text-indent: -9999px;     width: 9px;     height: 11px;     outline: 0;     background: url(../images/controls.png) -86px -44px no-repeat;     margin: 0 3px; }  .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {     background-position: -86px -33px; }  /* pager auto-controls hybrid layout */  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {     position:absolute;     bottom:10px;     text-align: center;     margin:0 auto; }  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {     right: 0;     width: 35px; }  /* image captions */  .bx-wrapper .bx-caption {     position: absolute;     bottom: 0;     left: 0;     background: #666\9;     background: rgba(80, 80, 80, 0.75);     width: 100%; }  .bx-wrapper .bx-caption span {     color: #fff;     font-family: arial;     display: block;     font-size: .85em;     padding: 10px; } 

html

<a href="javascript:void(0)" onclick="toggle_menu('popup-1"> <img src="/images/feature1_300x300.jpg" alt="" /> </a>  <!-- popup -->           <script type="text/javascript"> $(document).ready(function(){     $('#slider1').bxslider({       mode: 'fade',       auto: true,       autocontrols: true,       pause: 90000,       adaptiveheight: true     }); }); </script> <div class="popup" id="popup-1">      <div class="window">                 <a href="#" onclick="toggle_menu('popup-1');">             <div class="close">x</div>         </a>          <!-- slider -->         <ul id="slider1">           <li><img src="/images/feature1.jpg" /></li>           <li><img src="/images/feature2.jpg" /></li>           <li><img src="/images/feature3.jpg" /></li>         </ul>     </div>      <div class="windowoverlay"></div> </div> <!-- popup end --> 

here site. scroll down , click van image popup: http://www.amazingdg.com/clients/testsite/

right popup starts display:none. tried making display visible, , positioned "off screen", , "move" popup onto visible screen when clicked. however, height still not recognized. out there ideas?

figure out...

when call popup, activate slider when popup displayed (changing display:none display:block). doing before popup called, , problem was. image "height" activated when popup activated, , slider run.

<script type="text/javascript">     function popupwin(id) {         var winname = document.getelementbyid(id);         if (winname.style.display == 'block') {             winname.style.display = 'none';         } else {             winname.style.display = 'block';                  $('#slider<?php echo $slidr; ?>').bxslider({               mode: 'fade',               auto: true,               autocontrols: true,               pause: 90000,               adaptiveheight: true             });         }     } </script>