jQuery jScrollpane plugin strange behavior

Question

Please check this site: pixeli.ca/works/italia There I work on the site. The problem is when I just open this address, it doesn't show two panels using jScrollPane properly - these look like narrow horizontal stripes with content inside them. Then I click any of the top nav bar items and it becomes what it should be - all looks fine. What can I do to make it work right way from the beginning? Seems like there is something related to jQuery hide() function. When I turn it off in the document, it works well. Did anybody face something like this before?

Answer 1

Yes, I have solved the issue. So, there is a simple animation effect implemented in the site through jQuery fadeIn function. It shows elements gradually first time, then sets a cookie so this animation doesn't work anymore. Here is a piece of code where I made it work:

setTimeout(function () {
            loadContent('about');
            $('#doc2').fadeIn(1000);
        }, 7000);

The #doc2 div is the main container for content and I noticed that when it is visible and I load content using my function loadContent('about') it works fine but doesn't work right way if #doc2 is hidden. I just added this function to be executed the same time as fading in #doc2 and now it works well. If you have any questions regarding it, please feel free to ask.