Tiny Scrollbar issue j.obj[0] is undefined

Question

I want the same scrollbars on a lot of divs, but it seems like I get the same error all the time: j.obj[0] is undefined, in the tinyscroll.js file. Any clue to what I should do? The tinyscroll.js is loaded in after the jQuery and before  my js-file where I call the .tinyscrollbar();

JS:

$(window).load(function(){
if ($("#scrollbar1")) 
{ 
$("#scrollbar1").tinyscrollbar();
$("#scrollbar1").tinyscrollbar_update();
}
});

HTML:

<div id="scrollbar1" class="prod_minitext"><p>
<?php echo $post_naringsvarde; ?>
</p></div>

Answer 1

Thanks to zgood and Archer for their help

To summerize the answer to this problem, it all came down to two important bits:

1. Check out How to load Jquery Tiny scrollbar and http://baijs.nl/tinyscrollbar/ CLOSELY, because it's easy to miss the wrap-atound divs that you gotta have (with the right classname and so on) to make this work.

2. Tiny Scrollbar can only read IDs. So if you got dynamic content like I do, you gotta loop through the class and create IDs that you set the .tinyscrollbar(); to.

This is my code:

$( document ).ready(function() {

    $('.prod_minitext').each(function( index ) {
    $(this).attr('id', 'scrollbar' + index);
    });

    scrollify();

});

function scrollify () {

$('.prod_minitext').each(function() {
    var currentScroll = $(this).attr('id');
    console.log($('#' + currentScroll));
    $('#' + currentScroll).tinyscrollbar();
    $('#' + currentScroll).tinyscrollbar_update();
    });

}

Also, don't forget that .tinyscrollbar(); won't work when the div is hidden, so you gotta run the scrollify() function when it's visible.

EDIT

The CSS code has to be the same for everyone within the class, and not just for #scrollbar1 as it is on the Tiny Scrollbar page. I did some custom adjustments, but my css looks like this:

.prod_minitext {
position:absolute;
bottom:10px;
right:0;
width:320px;
clear: both;
}
.prod_minitext .viewport { width: 320px; height: 60px; overflow: hidden; position: relative; }
.prod_minitext .overview { list-style: none; position: absolute; left: 0; top: 0; }
.prod_minitext .thumb .end,
.prod_minitext .thumb { background-color: #A2D7E5; }
.prod_minitext .scrollbar { top:60px; position: relative; float: right; width: 10px; }
.prod_minitext .track { background-color: #D8EEFD; height: 100%; width:8px; position: relative; padding: 0 1px; }
.prod_minitext .thumb { height: 20px; width: 8px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.prod_minitext .thumb .end { overflow: hidden; height: 5px; width: 8px; }
.prod_minitext .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }