can't implement jquery jScrollPane to replace browser's scrollbars
- by Zack
I am trying to replace browser's scrollbars with jScrollPane (jQuery), it won't work.
Here are two attempts to implement it:
a basic attempt, and an attempt to imitate the full page demo for jScrollPane.
I've been trying everything I could think of to figure out what didn't work, but couldn't.
here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
html {
overflow: auto;
}
#full-page-container {
overflow: auto;
}
.scroll-pane {
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only {
height: auto;
max-height: 200px;
}
</style>
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">
$(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css(
{
'width': 1,
'height': 1
}
);
// Now make it the size of the window...
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane(
{
'showArrows': true
}
);
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
});
</script>
</head>
<body>
<div id="full-page-container">
This is the most basic implementation of jScrollPane I could create, if I am not wrong this has all it should take, yet it doesn't work.
a little lorem ipsum to make the scrollbars show up:
[here come's lot's of lorem ipsum text in the actual page...]
</div>
</body>
</html>
The other option is the same, with a link to demo.css and demo.js.
