Reputation: 2174
I have a div that I need to be able to scroll. Unfortunately the default browsers are very ugly, an ordeal I am trying to use JScrollpane to get around.
It doesn't seem to cooperate with me however: I have added the necessary links, along with JQuery ofcourse
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
Which are corresponding to my file structure, and have called the script using
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
$('.work-description').jScrollPane();
});
</script>
My div also seems to be in place:
<div class="workdescription" id="Plumbing">
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
With a CSS value of overflow:auto;
I've also tried overflow:hidden; but that hasn't worked either. I am still stuck with the ugly scrollbars. I've received no JScript errors. What's up with this?
Upvotes: 0
Views: 543
Reputation: 23297
I've used jScrollPane before and you basically need a container, a paragraph which will be used as a wrapper, and then a call to jScrollPane which you also need to reinitialize if the container that will have a scrollbar is from an ajax response.
Based from your code I'll assume that your html look something like this:
<div class="workdescription" id="Plumbing">
<p>
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
</p>
</div>
Then your selector, just include the script after the html so you won't need to wrap your script on window.load().
<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>
Upvotes: 1
Reputation: 6662
The class name is "workdescription" in you HTML, but you used ".work-description" as your selector. It seems that's the problem ;)
Upvotes: 0