doforumda Posted April 5, 2010 Share Posted April 5, 2010 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. <!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?? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.