views:

8

answers:

0

This is the first time that I've used the jQuery plug-in called jScrollPane, and I've ran into an issue that I can't resolve.

I have two divs to which I apply the jScrollPane(). The vertical scrollbar shows up on both divs just fine; however, when I try to add the arrows to the top and bottom of the scrollbar by setting the "showArrows" setting to true, it doesn't work on either div.

My environment is .NET 3.5 and I'm using masterpages. I'll post the aspx below.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %>

<%@ Register TagPrefix="uc" TagName="CatRepLegend" Src="~/Controls/CatRepLegend.ascx" %>    

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="JQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="JQuery/jquery.mousewheel.js" type="text/javascript"></script>
    <link href="JQuery/jScrollPane.css" rel="stylesheet" type="text/css" />
    <script src="JQuery/jScrollPane.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            (function () {
                $('#pane1').jScrollPane({ showArrows: true });
                $('#pane2').jScrollPane({ showArrows: true });
            })
        );
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="pane1" class="scroll-pane" style="width: 450px; height: 260px;">
        <uc:CatRepLegend ID="ucCatRepLegend" runat="server" />       
    </div>

    <div id="pane2" class="scroll-pane" style="width: 200px; height: 100px;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, blandit sit amet, tempor vel, ligula. Phasellus ante augue, congue vitae, faucibus quis, gravida sit amet, diam. Nullam congue accumsan magna. Etiam a nunc. Aliquam elit urna, ornare vitae, ultrices et, tempus non, nisl. Duis eros neque, luctus quis, interdum ultricies, auctor eu, urna. Donec nibh. Integer in purus tempus mi venenatis mollis. Cras nunc odio, porttitor at, accumsan ac, adipiscing vitae, ante.
    </div>
</asp:Content>