Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    bxSlider within show/hide div

    My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.

    Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.

    Here's what my code looks like :

    Code:
    <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 the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.

    Can anyone think of a way to fix this? Thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    For starters, your inline CSS is all messed up. Fix this stuff:

    Code:
    <div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
    ...
    <ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
    should be:

    Code:
    <div id="slider" style="margin-top: 0px; width: 580px; height: 375px;">
    ...
    <ul id="slidersample" style="margin: 0px; padding: 0px; width: 580px; height: 375px;">
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes sir, thanks! The slider pictures are, unfortunately, still invisible.

    Since removing .newboxes {display:none;} from the CSS fixes the issue, I'm thinking all I need to get it working is find another way to have all the divs initially hidden, but I really am too much of a newbie to figure it out...

    EDIT : Got it working! I replaced .newboxes {display:none;} with .newboxes {visibility:hidden;}
    Last edited by zgant; 06-18-2012 at 04:33 PM.

  • #4
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry I could use some help too and kinda new at java : /

    PLEASE HELP! I am using bxslider version 3.0 & I am trying to control the slider outside the table and so I have some images href'ing funsctions... The last line wont work I am trying to call a specific slide. I have tried documentation but in olny states next and previous options. Any ideas?

    Ex:

    $(function(){ var slider = $('#slider1').bxSlider({ easing: '', controls: false, auto: true, speed: 800, pause: 5500 });
    $('#go-prev').click(function(){ slider.goToPreviousSlide(), slider.startShow(); return false; });
    $('#go-next').click(function(){ slider.goToNextSlide(), slider.startShow(); return false; });
    $('#go-pause').click(function(){ slider.stopShow(); return false; });
    $('#go-start').click(function(){ slider.goToNextSlide(), slider.startShow(); return false; });

    $('#go-tothree').click(function(){ slider.scrollToSlide3[/COLOR](); return false; }); <<<?????

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PLEASE HELP! I am using bxslider version 3.0 & I am trying to control the slider outside the table and so I have some images href'ing funsctions... The last line wont work I am trying to call a specific slide. I have tried documentation but in olny states next and previous options. Any ideas?

    Ex:

    $(function(){ var slider = $('#slider1').bxSlider({ easing: '', controls: false, auto: true, speed: 800, pause: 5500 });
    $('#go-prev').click(function(){ slider.goToPreviousSlide(), slider.startShow(); return false; });
    $('#go-next').click(function(){ slider.goToNextSlide(), slider.startShow(); return false; });
    $('#go-pause').click(function(){ slider.stopShow(); return false; });
    $('#go-start').click(function(){ slider.goToNextSlide(), slider.startShow(); return false; });

    $('#go-tothree').click(function(){ slider.scrollToSlide3(); return false; }); <<<????? sorry to spam... on know where that "[COLOR]" came from

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by whisennand View Post
    PLEASE HELP! I am using bxslider version 3.0 & I am trying to control the slider outside the table and so I have some images href'ing funsctions... The last line wont work I am trying to call a specific slide. I have tried documentation but in olny states next and previous options. Any ideas?

    Ex:

    $(function(){ var slider = $('#slider1').bxSlider({ easing: '', controls: false, auto: true, speed: 800, pause: 5500 });
    $('#go-prev').click(function(){ slider.goToPreviousSlide(), slider.startShow(); return false; });
    $('#go-next').click(function(){ slider.goToNextSlide(), slider.startShow(); return false; });
    $('#go-pause').click(function(){ slider.stopShow(); return false; });
    $('#go-start').click(function(){ slider.goToNextSlide(), slider.startShow(); return false; });

    $('#go-tothree').click(function(){ slider.scrollToSlide3(); return false; }); <<<????? sorry to spam... on know where that "[COLOR]" came from
    1. Please review the forum rules. posting your issue on someone elses post, usually doesnt get much of a response. you should really make your own post.

    2. You should wrap all code in code tags by using the buttons in the forum posting editor (clcik on the hashtag)

    3. You clearly did not read the documentation as the method is plainly listed in "public methods"


    that all being said, welcome to the forums, please try this, if it doesnt work please make your own post for this issue.


    Code:
    $('#go-tothree').click(function(){    slider.goToSlide(3);    return false;  });


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •