AJAX Always Visible Extender Tutorial
This tutorial will cover the Always Visible Extender and how to add it to a Pane to make it always stay on top of the page behind it and to move with the scrollbars.
Overview
1. Create the Project and Setup for AJAX
2. Add the Panel and the Page Content
3. Add the Extender and Set it up
Create and Application and Setup for AJAX
1. Create a new Empty ASP.NET Web Application
2. Right Click on the Project and Navigate to ->Add -> New Item
3. Select a New Web Form and name it Default.aspx
4. It is good practice to add a Script Manager to all AJAX Applications seeing as you will always need it so Drag a Script Manager Control onto the Form from the AJAX Section of the Toolbox
5. Next we can Start Adding Content to the Form
Add the Panel and the Page Content
6. First Add a Panel to the Form by dragging it from the General Section of the Toolbox
7. Now we need to setup the Panel go into the Code view and Paste this into the Panel Tag
BorderColor="Black" BorderStyle="Solid" Height="200px" BackColor="Red" Width="200px" BorderWidth="2px"
8. Now we can add Text to the Panel in Code Type Something in between the Opening and Closing Panel Tags
9. The next step is we need to fill the page with text so that we can witness our Panel over Content and also witness it working with the scrollbars.
10. Here is some Filler Text you can copy and paste under the Panel Code. I copied it quite a few times, but just make sure that we have enough content to create a scroll bar on the side of the page
11. Now we can add the Extender and View it working
Add the Extender and Set it up
1. Go back to the Design view of the Form and Click the Smart Tag on the Panel and Then click Add Extender.
2. Select the Always Visible Extender from the Menu and then go into the Code View
3. Once in the Code View Past this code into the Extenders Tag
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
4. Once this is complete the Whole Page Should look like
this Run the Page and Scroll up and Down and witness the Panel Staying in the Top Right corner.
Conclusion
In This tutorial we learned how to add the Always Visible Extender to a Control on the Form causing it to always be on top and to scroll with the page. This Extender has many practical Uses, for example implementing a timer on the Panel with a display could be used to show students how long they have to finish an online Exam.
Code Section
Code 1:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien urna, consectetur lobortis laoreet sit amet, aliquet congue lorem. Sed interdum leo id dolor molestie posuere. Morbi sit amet nunc quis lorem ultricies consequat non vitae massa. Nulla facilisi. Vestibulum aliquam ornare viverra. Cras hendrerit nisl in lectus vestibulum dignissim sit amet sed erat. Fusce sed tellus vel enim fringilla eleifend nec sed purus. Maecenas posuere odio ut justo egestas at elementum lorem varius. Cras vehicula placerat pellentesque. Ut vestibulum vestibulum libero, in suscipit dui semper sit amet. Praesent eget massa sit amet erat viverra egestas sit amet quis nibh. Curabitur elementum scelerisque magna id tempor. Duis varius scelerisque magna, at ultricies justo ultrices quis. Ut at ligula lorem, non consequat ante.
Integer libero risus, accumsan nec accumsan ut, tincidunt eu justo. Nam sapien odio, tempor a aliquet et, viverra eget velit. Etiam aliquam congue magna ut commodo. Nulla porta urna vel turpis fringilla lacinia. Integer consequat pulvinar dignissim. Sed eget diam in neque convallis venenatis. Nam nibh lorem, interdum et hendrerit eu, aliquet adipiscing justo. Nulla at risus vitae leo adipiscing tincidunt. Etiam et luctus odio. Vivamus ac risus id nisl lobortis feugiat.
</p>
Code 2:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server" BorderColor="Black" BorderStyle="Solid" Height="200px" BackColor="Red" Width="200px" BorderWidth="2px">
<h2>This Panel is Always Visible and on Top</h2>
</asp:Panel>
<asp:AlwaysVisibleControlExtender ID="Panel1_avce" runat="server"
Enabled="True" TargetControlID="Panel1"
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10" >
</asp:AlwaysVisibleControlExtender>
<p>
*THE FILLER HAS BEEN REMOVED SO THAT THE CODE WOULD FIT*
</p>
</form>
</body>
</html>
