Action-dependant Javascript/Jquery - how to activate a command only AFTER another script has finished?

Question

I'm working on my website and I decided it would be to my advantage to use 'designed' scroll bars instead of the ones browsers come with. I was lucky enough to come across this script http://www.hesido.com/web.php?page=customscrollbar which basically does exactly what I need.

The only problem I've got is that I am trying to apply the custom scrollbars to some divs which are initially hidden and then toggle via a link div between hide/show. As the programming page (http://www.hesido.com/flexcroll/flexcroll-programming.htm) explains, sometimes the scrollbar needs to be updated and/or manually applied, because being in hidden divs they do not load when the page opens.

I've checked my CSS and my HTML and the code works fine if the div is not hidden, so I am 100% that this has to do with the way I am hiding my divs.

The basic format for that is

$(document).ready(function() { $('#iddiv').hide();});

 $(document).ready(function() { $('#id').click(function() { $('#iddiv').animate({ height: 'toggle' }, 2000 ); });}); 

So I hide it initially, and then toggle it via a button. Now, in this logic - the manual application of fleXenv.fleXcrollMain("your-div-id"); should be somewhere above the last line of script (the one containing }); ).

This, however, either makes the div unscrollable or messes up the rest of my Javascript (scrollTo functions stop working, etc...)

My question is, as a bit of a noobie JS user - WHERE do I need to place that piece of code that manually activates the custom scrollbar in my code AFTER the toggle is activate and WHAT is the structure? By which I mean, does fleXenv.fleXcrollMain("your-div-id"); stand on its own, does it need its own separate function, does it get a $ before it?

Loads of thanks to anyone who can help me with this! Final bit stopping me from launching my website.

UPDATE! HERE is the CSS/HTML and code for an example of what I am trying to achieve; because one of the files in the script needs to be downloaded to work, I think the only way is to copy and paste all the bits in a new HTML document.

Answer 1

The jQuery .animate() function accepts more arguments. One of them is a function that gets called when the animation completes.

function activateScrollbar () {
    fleXenv.fleXcrollMain('iddiv');
}

$('#iddiv').animate({
        height: 'toggle'
    },
    2000,
    activateScrollbar
);

You can also use an anonymous function, like this:

$('#iddiv').animate({
        height: 'toggle'
    },
    2000,
    function () {
        fleXenv.fleXcrollMain('iddiv');
    }
);

Most functions in jQuery that include an animation, (like .hide() or .fadeOut() ), allow you to pass a function that gets called when the animation completes. Most of these jQuery functions allow you to pass these extra arguments in a configuration object which can be more readable:

$('#iddiv').animate({
        height: 'toggle'
    },
    {
        duration: 2000,
        complete: function () {
            fleXenv.fleXcrollMain('iddiv');
        }
    }
);

See the .animate() documentation for more details.

Here's a full example with the click behavior included:

$('#myButton').click(function () {

    $('#iddiv').animate({
            height: 'toggle'
        },
        {
            duration: 2000,
            complete: function () {
                fleXenv.fleXcrollMain('iddiv');
            }
        }
    );

});

Answer 2

Try this:

$(document).ready(function() {
 $('#id').click(function() {
      $('#iddiv').animate({
           height: 'toggle'
           }, 2000,
           function(){
               fleXenv.fleXcrollMain( $(this).attr('id') );
           }
      );
 });

That function is callback executed after animate function is complete.