I am trying to implement a drop-down menu containing notifications, like this page has: http://infinite-woodland-5276.herokuapp.com/index.html. The bullhorn icon in the top right part of the site, and it's menu, is what I am trying to recreate.
I have succesfully made a header menu icon, with a list of items. However I can't make the scrollbar work.
It's using the jquery plugin slimScroll, found here: http://rocha.la/jQuery-slimScroll.
The attatchment of the scrollbar seems extremely simple and straight forward, in the tutorials. Here is what I do:
$(document).ready(function(){
$('#main-navbar-notifications').slimScroll({
height : 250
});
});
After implementing this code, This code appears in my DOM:
<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
These appear not inside the #main-navbar-notifications, as I would have expected, but subsequently. However, I found that the exact same DOM structure is present in the example I am trying to copy. Seems like it is as it should.
But my scrollbar simply does not work. If I hover the mouse over the div, nothing happens. I tried setting the scrollbar to always be visible, and still nothing happened. Then I went into the HTML itself, in chrome inspector, and manually set the scrollbar and rail to be visible. That worked for visibility, as they visually appeared exactly as I would have expected them to, but they still didn't react to any mouse actions.
The only info I have been able to find on the subject, is to make sure that my scrolling div is set to position: relative;, but that didn't do anything. There are no error messages, or any messages at all in my console either.
I've tried to recreate my problem in a fiddle, but I was unable to upload the slimscroll-library there.
Does anyone know what this error could be about? Or any strategies for figuring out what the problem actually is?
Turns out, I had manually copied a <div class="slimScrollDiv">, a wrapping div which is supposed to be generated from the plugin, for the scrolling pane. Once I removed that div, slimScroll worked perfectly...