Jscrollpane plugin for pop up box issue
I'm using the jscrollpane jquery plugin to be applied for a pop up div box(lightbox for short), but the jscrollpane scroll bar does not show up. Here is the html:
{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="JScrollPaneScripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="JScrollPaneScripts/jquery.jscrollpane.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "sample1.css"></link>
<script type="text/javascript">
$( document ).ready( function( )
{
$( function( )
{
$( '#testing2' ).jScrollPane( );
});
$( "#testing" ).click( function( )
{
$( "#testing2" ).show( 5000 );
});
}
);
</script>
</head>
<body>
<div id = "wrapperdiv">
<a id = "testing" href="#">Link</a>
<div id = "testing2">
lksjflksjdlkflskdjflksjdflkjslkjdflk
lsdkflksjgliowtjlskdfjlskdfjlskgs
lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
lksjflksjdlkflskdjflksjdflkjslkjdflk
lsdkflksjgliowtjlskdfjlskdfjlskgs
lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
lksjflksjdlkflskdjflksjdflkjslkjdflk
lsdkflksjgliowtjlskdfjlskdfjlskgs
lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
lksjflksjdlkflskdjflksjdflkjslkjdflk
lsdkflksjgliowtjlskdfjlskdfjlskgs
lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
lksjflksjdlkflskdjflksjdflkjslkjdflk
lsdkflksjgliowtjlskdfjlskdfjlskgs
开发者_StackOverflow中文版 lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj
lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll
llvalkiwujoitjlkgskjdkgjlsd,fjlsllll
</div>
</div>
</body>
</html>
}
Here is the css:
*
{
padding: 0px;
margin: 0px;
}
#wrapperdiv
{
width: 1000px;
margin: 500px auto 0px auto;
}
#testing
{
width: 100px;
height: 50px;
border: 1px solid;
font-size: 22px;
display: block;
text-align: center;
padding: 25px 0px 0px 0px;
}
#testing2
{
display: none;
width: 270px;
height: 300px;
background: yellow;
border: 1px solid;
bottom: 100px;
left: 10%;
position: relative;
z-index: 999;
}
jScrollPane doesn't work on items which are invisible when you initialise it. This is because it can't calculate the size that it is meant to be. So you need to reinitialise jScrollPane after showing the content as shown in this example:
http://jscrollpane.kelvinluck.com/invisibles.html
A callback can be provided as the second parameter to jQuery show so you can replace:
$( "#testing2" ).show( 5000 );
with:
$( "#testing2" ).show(
5000,
function() // callback function
{
$('#testing2').jScrollPane();
}
);
As a side note, the spaces around the = signs in your HTML will probably stop it from validating...
A Few things to try:
If I recall correctly elements must have the css property
overflow:auto;
applied so stick that into your css for #testing2
The issue because the element your targeting is hidden so you could try initializing scrollPane after the show function:
$(document).ready(function() {
$('#testing').click(function(){
$('#testing2').show(5000, function(){
$('#testing2').jScrollPane();
});
});
});
Try without the element hidden to see if that works ok.
Also check out these links - comment5 here: http://code.google.com/p/jscrollpane/issues/detail?id=30
This ('#myDiv').show().jScrollPane() fix worked perfectly for me.
in which case my above code would become
$(document).ready(function() {
$('#testing').click(function(){
$('#testing2').show(5000).jScrollPane();
});
});
and http://jscrollpane.kelvinluck.com/invisibles.html - which explains using it on invisble elements
加载中,请稍侯......
精彩评论