|
JavaScript - Need Help In Jscrollpane
hi
i have issue with jScrollPane. I created three divs. First and third have paragraphs and the second one i want to make it dialogue box. so the problem is when i run the code below it gives weird effect. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script type="text/javascript" src="scroller/scroller/jScrollPane.js"></script>
<script>
$(function()
{
$('.dialogue_box').jScrollPane({showArrows:true});
});
</script>
<style>
.dialogue_box {
position: fixed;
width: 300px;
height: 200px;
margin-left: 400px;
border: 1px solid #999;
background-color: #FFF;
z-index: 1000;
}
.first {
position: relative;
}
.third {
position: relative;
}
</style>
</head>
<body>
<div class="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in ante eu nisi condimentum placerat. Aliquam eget faucibus nibh. Quisque porttitor malesuada rutrum. Sed ornare magna id lorem mattis consectetur. Cras convallis dapibus erat sed malesuada. Vestibulum sed nisi nec nisi luctus rhoncus. Suspendisse potenti. Phasellus hendrerit lorem at neque bibendum aliquam. Aliquam convallis iaculis hendrerit. In vel vestibulum est.
Proin ac orci eu sem faucibus scelerisque. Phasellus sed leo urna, eget porttitor purus. Aliquam et elit et libero fringilla dapibus. Aenean ut ligula in libero aliquet lacinia sit amet quis leo. Nam nibh justo, pharetra vel tincidunt vel, ultricies in mi. Vivamus condimentum mattis lectus, sit amet pharetra neque laoreet iaculis. Phasellus consequat aliquet diam, et aliquam nisi varius a. Sed sed metus eget nibh ultricies tempor. Phasellus purus leo, scelerisque non blandit vitae, vulputate quis metus. In pellentesque augue sem, ut interdum justo. Praesent metus mi, accumsan eget venenatis ut, mattis ut sapien. Cras molestie, velit et venenatis pretium, lectus justo sagittis lorem, a viverra enim odio vitae purus. Maecenas aliquet facilisis tortor.
</div>
<div class="dialogue_box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in ante eu nisi condimentum placerat. Aliquam eget faucibus nibh. Quisque porttitor malesuada rutrum. Sed ornare magna id lorem mattis consectetur. Cras convallis dapibus erat sed malesuada. Vestibulum sed nisi nec nisi luctus rhoncus. Suspendisse potenti. Phasellus hendrerit lorem at neque bibendum aliquam. Aliquam convallis iaculis hendrerit. In vel vestibulum est.
Proin ac orci eu sem faucibus scelerisque. Phasellus sed leo urna, eget porttitor purus. Aliquam et elit et libero fringilla dapibus. Aenean ut ligula in libero aliquet lacinia sit amet quis leo. Nam nibh justo, pharetra vel tincidunt vel, ultricies in mi. Vivamus condimentum mattis lectus, sit amet pharetra neque laoreet iaculis. Phasellus consequat aliquet diam, et aliquam nisi varius a. Sed sed metus eget nibh ultricies tempor. Phasellus purus leo, scelerisque non blandit vitae, vulputate quis metus. In pellentesque augue sem, ut interdum justo. Praesent metus mi, accumsan eget venenatis ut, mattis ut sapien. Cras molestie, velit et venenatis pretium, lectus justo sagittis lorem, a viverra enim odio vitae purus. Maecenas aliquet facilisis tortor.
</div>
<div class="third">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in ante eu nisi condimentum placerat. Aliquam eget faucibus nibh. Quisque porttitor malesuada rutrum. Sed ornare magna id lorem mattis consectetur. Cras convallis dapibus erat sed malesuada. Vestibulum sed nisi nec nisi luctus rhoncus. Suspendisse potenti. Phasellus hendrerit lorem at neque bibendum aliquam. Aliquam convallis iaculis hendrerit. In vel vestibulum est.
Proin ac orci eu sem faucibus scelerisque. Phasellus sed leo urna, eget porttitor purus. Aliquam et elit et libero fringilla dapibus. Aenean ut ligula in libero aliquet lacinia sit amet quis leo. Nam nibh justo, pharetra vel tincidunt vel, ultricies in mi. Vivamus condimentum mattis lectus, sit amet pharetra neque laoreet iaculis. Phasellus consequat aliquet diam, et aliquam nisi varius a. Sed sed metus eget nibh ultricies tempor. Phasellus purus leo, scelerisque non blandit vitae, vulputate quis metus. In pellentesque augue sem, ut interdum justo. Praesent metus mi, accumsan eget venenatis ut, mattis ut sapien. Cras molestie, velit et venenatis pretium, lectus justo sagittis lorem, a viverra enim odio vitae purus. Maecenas aliquet facilisis tortor.
</div>
</body>
</html>
how can i make this work?? Similar TutorialsHi, I have a textbox placed inside a scroll pane which I need to scroll horizontally once the end of the box is reached and only go on a new line when I tell it to The scroll pane works fine vertically, adding a scroll bar once the bottom of the box has been reached but i cant get it to add the horizontal one. It just automatically puts the text onto a new line was it reaches the edge of the text box. Why wont it automatically scroll horizontal? |
|||||||