jQuery - run code after scripts are loaded

admin

Administrator
Staff member
In my header I load scripts (I keep this scripts on my server, original links are added here just for you):

Code:
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/mwheelIntent.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js">

Then on my footer I'm executing some code:

Code:
$(document).ready(function() {
            $(function(){
                $('.scroll-pane').load().jScrollPane();
            });
            numOfPics = $('#gallery-wraper img').size();
            widthOfAll = 0;
            $('#gallery-wraper img').each(function() {
                imgWidth = $(this).width() + 20;
                widthOfAll += imgWidth;
            }); // end of each
            $("#gallery-container").load().css("width",widthOfAll);

            galleryPosition = $(window).height() / 2 - 250;
            $("#gallery").css("margin-top", galleryPosition);
});// end of document.ready()

I want it yo display my images horizontally and put it inside jScrollPane (<a href="http://jscrollpane.kelvinluck.com/" rel="nofollow">http://jscrollpane.kelvinluck.com/</a>)
But it displays my images horizontally after refresh only (or even after a few page refreshes in chrome). It looks like it tries to execute my code before page content is generated (its a wordpress theme) or before scroll libraries are loaded. What is wrong with my logic here? I'm using document.ready() so why it acts this way?