To scroll to a child in the content area of the SuperPanel control you can call the client-side scrollToChild() function.
To use the scrollToChild() function to scroll to a child element within C1SuperPanel, 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 scrollToChild function to C1SuperPanel
function scrollToChild() {
var scroll = $find('<%=C1SuperPanel1.ClientID %>');
var d = $get('t1');
d.style.border = "1px solid red";
scroll.get_panelBehavior().scrollToChild(d);
}
5. Create a button element and assign the scrollToChild() function to the onclick property.
<input type="button" value="scrollTo" onclick="scrollTo()" /> ScrollTo(300, 200)
6. Press F5 to build and run your project.
Run the project and observe:
Click the scrollToChild() button to call the scrollToChild() function so it scrolls to the child item and adds a red border around the child element like the following:
|
