Custom jQuery scrollbar

Question

I'm using a custom scrollbar plugin called Tiny Scrollbar. Inside the scrollbar I have an accordion type navigation.

My problem is the scrollbar doesn't update when the navigation height is changed, anyone got any ideas? I'm thinking maybe some form of ajax update on every click, however I have no experience in ajax so I don't know. This is the code for the navigation.

<div id="nav-container">
  <div class="scrollbar">
    <div class="track">
      <div class="thumb">
        <div class="end"></div>
      </div>
    </div>
  </div>
<div class="viewport">
  <div class="overview">
    <nav class="main">

    <div class="menu-item">
      <h4><a href="#">Inledning</a></h4>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
    </div>

    </nav>
  </div>
</div>
</div>

jQuery:

$(document).ready(function() {
var $ul = $('ul');

$( "h4" ).click(function() {
  $( "h4" ).removeClass( "menu-selected" );
  $ul.hide( "blind", 1000 );
$(this).toggleClass( "menu-selected" );
  $(this).next().show( "blind", 1000 );
});

$( "li" ).click(function() {
  $( "li" ).removeClass( "select" );
    $(this).addClass( "select" );
  });
});

Have you looked at the tiny scrollbar's update method tinyscrollbar_update()? — Harish
– Harish, Commented Feb 2, 2013 at 19:47
Oh and AJAX you would only use when adding content from an external file or page, you don't need to use it here. — dev
– dev, Commented Feb 2, 2013 at 20:08

dev · Accepted Answer · 2013-02-02 19:47:08Z

1

On the Tiny Scrollbar website it says that when new content is added you need to update the holding container. e.g.

//The update method can be used for adjusting a scrollbar to its new content.
var yourScrollBar = $('nav-container');
yourScrollBar.tinyscrollbar();

//The below function would be called when updating the content. 
yourScrollBar.tinyscrollbar_update();

The above code is an example from the plugin website.

For example with your code.

$( "h4" ).click(function() {
  $( "h4" ).removeClass( "menu-selected" );
  $ul.hide( "blind", 1000 );
  $(this).toggleClass( "menu-selected" );
  $(this).next().show( "blind", 1000 );
  yourScrollBar.tinyscrollbar_update(); <-------- Here. 
});

answered Feb 2, 2013 at 19:47

dev

4,0093 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

justanotherhobbyist Over a year ago

Can't get this to work, tried putting the var yourScrollBar both outside and inside document ready, and the _update is exactly where u put it. But nothing happens. :/

dev Over a year ago

The var yourScrollBar bit is just to declare a new scroll bar... you should have already done this to get it work in the first place? And the only bit you need to add is the **YourDeclaredScrollBar**.tinyscrollbar_update(); to the click function.

dev Over a year ago

I could be wrong about this though :) Have a read of the site this is where I got the update bit from.

justanotherhobbyist Over a year ago

Nah I used $('nav-container'), tried changing it to that now and it updates the scrollbar, wierd how it didn't do it with the variable though. It doesn't work perfect yet I have some stuff to figure out. Thanks for the help. =)

dev Over a year ago

No problem glad to have helped in some way :)

Collectives™ on Stack Overflow

Custom jQuery scrollbar

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related