Anthony Russo
Anthony Russo

Reputation: 931

How to run a script after another one?

I have a browser resize script:

$(document).ready(function() {
    $(window).on('resize', function() {
        if ($(this).height() <= 800) {
            $('.content').css('max-height', '500px'); //set max height
        } 
        else {
            $('.content').css('max-height', ''); //delete attribute
        }
    }).resize()
})

I want to make the jscrollpane run after the window resizes because that is when I will need the scrollbar. At the current code I have it just shows the regular scrollbar.

$(function() {
    $('.scroll-pane').jScrollPane();
});

Is there a way to run this script after the max height script is completed?

Upvotes: 0

Views: 764

Answers (2)

Elliot B.
Elliot B.

Reputation: 17651

<script type="text/javascript">
$(document).ready(function() {

   $(window).on('resize', function(){
     if ($(this).height() <= 800){
      $('.content').css('max-height', '500px'); //set max height
     } else{
      $('.content').css('max-height', ''); //delete attribute
   }

   $('.scroll-pane').jScrollPane(); //why not call it here?

 }).resize()
})
</script>

Upvotes: 4

Chris Beemster
Chris Beemster

Reputation: 362

You're just calling a method here:

$('.scroll-pane').jScrollPane();

..JavaScript is perfectly capable of doing more things than just one within a single script block. You don't have to regard each action as a separate script.

So just put your method-call within the resize-event-handler, such as:

$(window).on('resize', function(){
    if ($(this).height() <= 800){
        $('.content').css('max-height', '500px'); //set max height
    } else{
      $('.content').css('max-height', ''); //delete attribute
    }

    $('.scroll-pane').jScrollPane(); // just call it here!
}

..and you're done.

It might be useful to read some articles about JavaScript. Or some books.

Some nice starting points:
http://www.w3schools.com/js/default.asp
http://www.codecademy.com/

Enjoy!

Upvotes: 0

Related Questions