Custom Colored Scroll Bars For Ning Website Latest Activity Module

[The Internet Junkie]

For as long as I can remember, I have always wanted to use custom colored scroll bars on my Ning website. Until a few days ago, I could never get it to work.

After reading this blog post http://tympanus.net/codrops/2011/09/30/scrollbar-visibility-with-jscrollpane/ and the credit in that blog post to given to another developer, I was able to add custom colored scroll bars to the latest activity module on my Ning website. You can view the demo here. Scroll down until you see the "Latest Activity Module".

If you would like to add custom colored scroll bars to your Ning website "Latest Activity Module", follow my directions below.

First:

Add this code to your advanced CSS area...

/****Controls Latest Activity Module Scroll Height and Specifics****/
.scroll-pane {height: 493px;overflow : hidden;position:relative;}

/****Controls track color****/
.jspTrack {background: #ffffff; border-left: 1px solid #D0D0D0;}

/****Controls bar color****/
.jspDrag{ background: #74A1C1;}

Next, save all files below to your computer and then upload them to your Ning website through a text box. You do this by clicking on the edit button of the text box, clicking on the "Paper Clip" and then uploading the file. Copy the URL, click the cancel button.

jquery.jscrollpane.css
jquery.jscrollpane.min.js
jquery.mousewheel.js

Take the URL for each file and paste it in the appropriate spots below. You can tell which spot the specific file goes into, by looking between the words URL-FOR-"bla-bla"-GOES-HERE". After you have uploaded and pasted all files, copy all the code below and paste it in your custom code box.

<link type="text/css" href="URL-FOR-jquery.jscrollpane.css-GOES-HERE" rel="stylesheet" media="all" />


<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


<script type="text/javascript"src="URL-FOR-jquery.jscrollpane.min.js-GOES-HERE"></script>


<script type="text/javascript"src="URL-FOR-jquery.mousewheel.js-GOES-HERE"></script>


<script type="text/javascript">$(".xg_module_activity").addClass("scroll-pane");</script>


<script type="text/javascript">$(function(){ $('.scroll-pane').jScrollPane();});</script>

Report any bugs, by replying to this discussion.



-Flint

[Bernard Lama]

Nice... thanks for sharing it

[Caribso]

Cool

 

[yasir bukhari]

not working i save all 3 files separately in ms word and then uploaded one by one text box and their url like this

<link type="text/css" href="URL-FOR-https://storage.ning.com/topology/rest/1.0/file/get/3231185?profile=..." rel="stylesheet" media="all" />


<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


<script type="text/javascript"src="URL-FOR-https://api.ning.com/files/usuQUzkCb7Q30NB5yEsKQlCSzI*zW73cH*aMddrdy4wS-mrBGlDdh0npwoZFvVqq*OiMNXaNlj8lpROgszrKxUDsrsGAubrS/jScrollPane.dox-GOES-HERE"></script>


<script type="text/javascript"src="URL-FOR-https://api.ning.com/files/QCbPCIv3aZ0alUS5pmZk588K*F-N4IJUNoXovUW3Kiy9XKL*ftUlZAMSY7hZU0-M40UOTQahwTUUlNlCNO3lrvX7yOVbx53k/Copyright.dox-GOES-HERE"></script>


<script type="text/javascript">$(".xg_module_activity").addClass("scroll-pane");</script>


<script type="text/javascript">$(function(){ $('.scroll-pane').jScrollPane();});</script>