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>

Try using `$(document).ready` and not `$(window).load`. It is tricky using custom scrollbar plug-ins with dynamic content — zgood, Sep 16 '13 at 14:20
@zgood - The div content is added server-side, it's not really dynamic content. Also, `document.ready` and `window.load` make no difference in this instance as they both fire *after* the DOM is loaded. — Reinstate Monica Cellio, Sep 16 '13 at 14:25
@Rhyder Maybe this will help... http://stackoverflow.com/questions/14546252/how-to-load-jquery-tiny-scrollbar — Reinstate Monica Cellio, Sep 16 '13 at 14:26
Tried that. Same result, though the error is in the jQuery file and not in the tinyscroll.js : j.obj[0] is undefined — Rhyder, Sep 16 '13 at 14:27
So you *do* have a viewport as well as a scrollbar? It's just that you don't show that above. — Reinstate Monica Cellio, Sep 16 '13 at 14:30
No, that comment was to zgood. Tried your tip now Archer, but I still get the same error + my whole page gets messed up. — Rhyder, Sep 16 '13 at 14:45
Sorry, now it's h.obj[0] is undefined. Here's the url to the page: http://www.yoplait.se . Go to Produkter (products) and click on one of the 4 first categories. The text I'm trying to fix is the one in the bottom-right corner of the drop down box when you click a product. It worked just fine before I started to fix the scrollbars :S, now it messes up the whole thing. — Rhyder, Sep 16 '13 at 14:53
Fixed the "messed up" part, my mistake. Still get the error though. The old scrollbar is gone, but I don't get a new one. — Rhyder, Sep 16 '13 at 15:04
Fixed the error, missed the "overview" div. Still no scrollbar. Need to fix some css for the boxes. Do I need to put overflow:auto anywhere? — Rhyder, Sep 16 '13 at 15:18
I think I had a similar problem with tinyscrollbar in the past... just trying to remember how I solved it. I think it may have to do with the div that tinyscrollbar is being applied is not being visible at the time of initiation (?) I'll look into some old projects and see if I can find anything for you — zgood, Sep 16 '13 at 15:18
I think I had to assign the instance of tinyscollbar to a global variable like so `tinyscroll = $("#scrollbar1").tinyscrollbar();` Then calling `tinyscroll.tinyscrollbar_update()` when that div becomes visible — zgood, Sep 16 '13 at 15:20
Yupp, that solved a lot of it. Now I got the problem that it only works on the first loaded box and not on the rest. — Rhyder, Sep 16 '13 at 15:51

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Thanks to zgood and Archer for their help

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

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.
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; }

Tiny Scrollbar issue j.obj[0] is undefined

1 Answers1