<html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <link href="styles/jScrollPane.css" media="all" type="text/css" rel="stylesheet"> <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.mousewheel.js" type="text/javascript"></script> <script src="scripts/jScrollPane.js" type="text/javascript"></script> <!-- the following style can also be moved to a file and can be referenced --> <style type="text/css"> .scroll-pane { width: 200px;height: 200px; overflow: auto; background: #ccc;float: left; } .jScrollPaneTrack { background: url(images/windows_track.gif) repeat-y; } .jScrollPaneDrag { background: url(images/windows_drag_middle.gif) no-repeat 0 50%; } .jScrollPaneDragTop { background: url(images/windows_drag_top.gif) no-repeat; height: 4px; } .jScrollPaneDragBottom { background: url(images/windows_drag_bottom.gif) no-repeat; height: 4px; } a.jScrollArrowUp { height: 17px; background: url(images/windows_arrow_up.gif) no-repeat 0 0; } a.jScrollArrowUp:hover { background-position: 0 -20px; } a.jScrollArrowDown { height: 17px; background: url(images/windows_arrow_down.gif) no-repeat 0 0; } a.jScrollArrowDown:hover { background-position: 0 -20px; } a.jScrollActiveArrowButton, .winXP a.jScrollActiveArrowButton:hover { background-position: 0 -40px; } </style> <script type="text/javascript"> $(function() { // this initialises the demo scollpanes on the page. $('#div1').jScrollPane({showArrows:true, scrollbarWidth: 17}); }); </script> </head> <body> <div id="div1" > </div> </body> </html>
Life is a Race Thanks & Regards By Sabari Mahesh P M
R D Patel
Login to post response