Geek Answers Handbook

BxSlider inside show / hide divs

My page content is switched using different links, showing one div at a time using the showonlyone jQuery function. When loading the page, none of the divs should be displayed. I worked fine until I tried to put the image slider (bxSlider) in one of the div, newboxes1 .

Out of the box, bxSlider works great. Images are not displayed inside it. See a live example here .

This is what my code looks like:

 <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(); } else { $(this).hide(); } }); }</script> </script> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="jquery.bxSlider.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(function(){ var slider = $('#slidersample').bxSlider({ mode:'fade', controls: false }); $('#bx-prev-sample').click(function(){ slider.goToPreviousSlide(); return false; }); $('#hover-next-g-sample').click(function(){ slider.goToPreviousSlide(); return false; }); $('#bx-next-sample').click(function(){ slider.goToNextSlide(); return false; }); $('#hover-next-d-sample').click(function(){ slider.goToNextSlide(); return false; }); }); }); </script> </head> <body> <div id="left-menu"> <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br /> <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br /> <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a> </div> <div class="newboxes" id="newboxes1">DIV 1 <!-- SLIDER --> <div id="slider" style="margin-top: 0px; width="580 px"; height="375 px"> <div class="bx-prev"><div id="bx-prev-sample">←</div></div> <div class="bx-next"><div id="bx-next-sample">→</div></div> <div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div> <div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div> <ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px"> <li><img src="images/1.jpg" width="580" height="375" /></li> <li><img src="images/2.jpg" width="580" height="375" /></li> <li><img src="images/3.jpg" width="580" height="375" /></li> </ul> </div> <!-- SLIDER END--> </div> <div class="newboxes" id="newboxes2">DIV 2<br /></div> <div class="newboxes" id="newboxes3">DIV 3</div> </body> </html>

I use

 .newboxes {display:none;}

in CSS, so none of the divs show when the page loads. Removing this from CSS solves the bxSlider problem, as you can see here . However, the content is displayed when the page loads, and I want all this to be hidden. Any attempt to use display:block or display:none elsewhere in the code failed.

Can anyone think about how to fix this? Thanks.

+8
javascript jquery html bxslider
source share
4 answers

I had a similar problem with the bxSlider plugin: when the DIV containing it was initially hidden display:none , the slide show did not appear when I make the DIV visible $('#div-id').show(); . Only the slide show control buttons appeared. Then I solved the problem as follows:

 <script> var mySlider; $(function() { mySlider = $('#slider').bxSlider({ easing: 'easeInCubic', displaySlideQty: 3, moveSlideQty: 1, infiniteLoop: false, hideControlOnEnd: true }); $("#processSignUp").click(function() { // button that sets the DIV visible $("#trainings-slide").show(); // DIV that contain SLIDER mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function) }); }); </script>

As you can see, I reloaded the slideshow right after , the DIV (containing the slider) was shown, and it worked perfectly. Perhaps this will help solve your problems and avoid using visibility: hidden and other tricks.

+18
source share

I know this question was asked some time ago, but I have the same problem. I have no idea what with bxSlider and display: none. It does not seem to read the content if it is contained in a div, while there is no value on the display.

I still circumvented it by switching visibility:hidden and visibility:visible instead of displaying.

+6
source share

You can use visibility: hidden and visible: visible, but there will be some problems. And you can use height: 0px; overflow: hidden; I am using the latest solution

+2
source share

Another solution would be to let the bxslider bootloader and then hide it when it is.

 <script> var mySlider; $(function() { mySlider = $('#slider').bxSlider({ easing: 'easeInCubic', displaySlideQty: 3, moveSlideQty: 1, infiniteLoop: false, hideControlOnEnd: true, onSliderLoad: function() { $('#trainings-slide').hide(); } }); }); </script>
+2
source share

More articles:


All Articles