jQuery Tiny Scrollbar plugin - Fails to show all c

Question

I've implemented Tiny Scrollbar plugin on a website, for good-looking div scrolling. But weird stuff happens when I refresh the page in Safari or Chrome. It seams to clip some of my content. What happens upon a page refresh, that could make it behave like this? Please have a look at mettestentoft.dk

I've tried using the same plugin on a simple test page, where a page refresh would make the plugin add a 'scrollbar disable' class to the div, while clicking a link linking to the same page, would make i show as it should.

Tiny Scrollbar plugin demopage doesn't seem to have any problems, unless I'm missing it.

So my question is: Do I have to do something jQuery-wise, in order for a page to load equally to a linked page?

Thank you in advance :)

Answer 1

I tried your code to put js before ending the body tag. I worked for me on local machine or local host but could not solved online.

Then I found ostrgard's website reference: http://mettestentoft.dk/erhverv.html

He has solved that issue. I saw and inspected his code and found the solution there.

Just put this code to work perfect:

<script type="text/javascript">
$(window).bind("load", function() {     
    $('#scrollbar1').tinyscrollbar();
});
</script> 

Answer 2

How are you initializing the Scrollbar plugin? is it $('#cases_container').tinyscrollbar();?

Remove the set height of the #cases_container div.

Nodo.css line: 101.

#cases_container {
    /*height: 383px;*/
    width: 550px;
    /*overflow-x: hidden;*/
    /*overflow-y: hidden;*/
    /*position: relative;*/
    /*top: -200px;*/
    /*left: 250px;*/
}

I'm assuming doing this will screw up it positioning on the page so create another container div that applys all the relative positions etc. but leave the overflow hidden out of it.

Answer 3

I had a similar problem, shahzad's solution did work for me, but only on first load, never on refresh. This was caused by jQuery load cache. Solution:

$(window).load({noncache: new Date().getTime()},function() { $('#scrollbar1').tinyscrollbar();} );