How to append in a div with jscrollpane
We are using scrollpane.js for scrolling
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Youngib Command Line Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script>
<script src="js/scrollpane.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.jscrollpane.css" type="text/css" />
<style>
#data
{
width: 500px;
height: 200px;
overflow: auto;
float:left;
};
.scroll1{
float:left;
}
</style>
<script>
$(function(){
var api = $('.scroll').jScrollPane(
{
showArrows:true,
maintainPosition: false
}
).data('jsp');
$("#button").click(function(){
alert("here i want to append into data div ");
// var scroll=$('.scroll').jScrollPane();
api.getContentPane().append('<p>radfsf Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>');
});
api.reinitialise();
});
</script>
</head>
<body>
<div id="data" class="scroll">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt. Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum. Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur al开发者_如何学Pythoniquet, ipsum sit amet aliquet varius, est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus liber
consectetur adipiscing elit.
</p>
</div>
<div id="data" class="scroll1">
</br>
</br>
</br>
</br>
</br>
</br>
<input id="button" value="button" type="button">
</div>
</body>
</html>
it is appending the p tag but scrolling is not working with the appended div.
Please suggest what to do for proper scrolling.
Please try this
<script>
$(function(){
var api = $('.scroll').jScrollPane(
{
showArrows:true,
maintainPosition: false
}
).data('jsp');
$("#button").click(function(){
alert("here i want to append into data div ");
// var scroll=$('.scroll').jScrollPane();
api.getContentPane().append('<p>...</p>');
$('.scroll').jScrollPane(
{
showArrows:true,
maintainPosition: false
}
)
});
});
</script>
It worked well. Here are my alterations to get it to reload the html in a div:
function mod_notif_load_notif(){
var params = "";
$(document).ready(function(){
$.ajax({
type: "POST",
url: root+"modules/mod_notif/load_basic.php",
data: params,
success:function(result){
var api = $('#mod_notif').jScrollPane(
{
showArrows:false,
maintainPosition: true
}
).data('jsp');
api.getContentPane().html(result);
$('#mod_notif').jScrollPane(
{
showArrows:false,
maintainPosition: true
}
)
}
});
});
}
加载中,请稍侯......
精彩评论