ComponentOne SuperPanel for ASP.NET AJAX: SuperPanel for ASP.NET AJAX Task-Based Help > Client-Side Tasks > Specify Target Scroll Position > Scrolling to a Location within SuperPanel

Scrolling to a Location within SuperPanel

To scroll to an (x,y) location in the content area of the SuperPanel control you can call the client-side scrollTo() function. In this example the C1SuperPanel control scrolls to 300 pixels to the right and 200 pixels down.

To use the scrollTo() function to scroll to a location on the SuperPanel control, complete the following:

1.   Add the C1SuperPanel to your page.

2.   Add the following style markup between the <head> and </head> tags at the top of the document:

<style type="text/css">

     .elements ul

    {

        padding: 0px;

        margin: 0px;

    }

    .elements ul li {

    background-color:#DDDDDD;

    border:1px solid black;

    font-weight:bolder;

    height:100px;

    padding:50px;

    position:relative;

    text-align:center;

    width:200px;

    }

 

    .elements li {

     float:left;

     list-style: none none outside;

    }

    </style>

3.   In Source view add the following markup right after the </asp:ScriptManager> tag to create the elements class to get the style for the elements that will appear within the C1SuperPanel control. The SuperPanel’s Height, Width, and ContentTemplate properties will also be modified.

 

    <div class="elements">

               <div style="padding: 25px;">

        <cc1:C1SuperPanel ID="C1SuperPanel1" runat="server"

            UseEmbeddedVisualStyles="True" VisualStyle="ArcticFox" Width="300px" Height="300px">

            <ContentTemplate>

            <ul class="elements" style="height: 1011px; width: 1820px;">

                <li><p>0</p><a href="#" title="" class="back">go back</a></li><li><p>1</p><a href="#" title="" class="back">go back</a></li><li><p>2</p><a href="#" title="" class="back">go back</a></li><li><p>3</p><a href="#" title="" class="back">go back</a></li><li><p>4</p><a href="#" title="" class="back">go back</a></li><li><p>5</p><a href="#" title="" class="back">go back</a></li><li><p>6</p><a href="#" title="" class="back">go back</a></li><li><p>7</p><a href="#" title="" class="back">go back</a></li><li><p>8</p><a href="#" title="" class="back">go back</a></li><li><p>9</p><a href="#" title="" class="back">go back</a></li><li><p>10</p><a href="#" title="" class="back">go back</a></li><li><p>11</p><a href="#" title="" class="back">go back</a></li><li><p>12</p><a href="#" title="" class="back">go back</a></li><li><p>13</p><a href="#" title="" class="back">go back</a></li><li><p>14</p><a href="#" title="" class="back">go back</a></li><li><p>15</p><a href="#" title="" class="back">go back</a></li><li><p>16</p><a href="#" title="" class="back">go back</a></li><li><p>17</p><a href="#" title="" class="back">go back</a></li><li><p>18</p><a href="#" title="" class="back">go back</a></li><li><p>19</p><a href="#" title="" class="back">go back</a></li><li><p>20</p><a href="#" title="" class="back">go back</a></li><li id="t1"><p>21</p><a href="#" title="" class="back">go back</a></li><li><p>22</p><a href="#" title="" class="back">go back</a></li><li><p>23</p><a href="#" title="" class="back">go back</a></li><li><p>24</p><a href="#" title="" class="back">go back</a></li><li><p>25</p><a href="#" title="" class="back">go back</a></li><li><p>26</p><a href="#" title="" class="back">go back</a></li><li><p>27</p><a href="#" title="" class="back">go back</a></li><li><p>28</p><a href="#" title="" class="back">go back</a></li><li><p>29</p><a href="#" title="" class="back">go back</a></li>

            </ul>

        </ContentTemplate>

<PanelBehaviorSettings Enabled="True" showrounder="True" >

<HScroller Visibility="Always"  Value="0" SmallChange="10" />

        <VScroller Visibility="Always" Value="0" SmallChange="10"  />

</PanelBehaviorSettings>

        </cc1:C1SuperPanel>

        </div>

        </div>

4.   Add the following javascript right above the <head> tag to assign the scrollTo function to C1SuperPanel

<script language="javascript" type="text/javascript">

     function scrollTo() {

         var scroll = $find('<%=C1SuperPanel1.ClientID %>');

         scroll.get_panelBehavior().scrollTo(300, 200);

     }

     </script>

5.   Create a button element and assign the scrollTo function to the onclick property.

  &nbsp;&nbsp; &nbsp;&nbsp; <input type="button" value="scrollTo" onclick="scrollTo()" />&nbsp;&nbsp; ScrollTo(300, 200)

6.   Press F5 to build and run your project.

Run the project and observe:

Click the scrollTo button to call the scrollTo function so it scrolls 300 pixels to the right and 200 pixels down.


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.