I am trying to create a messaging and notification system similar to facebook with nano-slider (nanoScroller.js) in the drop down. However, the content is scrolling but the slider is not visible.
This is my html code:
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<div class="nano-message nano">
<ul class="menu nano-content" >
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Well done ...</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
alt="User Image">
</div>
<h4>
Prakash Bhandari
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>I am happy with .....</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
alt="User Image">
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>We are happy with our task...</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
alt="User Image">
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Our salses ...</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
alt="User Image">
</div>
<h4>
Management
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>We are management ...</p>
</a>
</li>
</ul>
</div>
</li>
<li class="footer">
<a href="#">See All Messages</a>
</li>
</ul>
This is my javascript code:
$(".nano-message").nanoScroller();
Is there any error or other way to solve this problem?
I am sure that there is no error in the HTML and JS code. I also face same problem long time ago but I have solved by doing following.
$(".messages-menu").click(function(){
setTimeout(function () {
$(".nano-message").nanoScroller();
}, 100)
});