AJAX Control Toolkit - How to use the AJAX Always Visible Extender 
 
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. 

For a More Basic Overview of Databases and ASP.NET go Here
 
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


We are using Server Intellect and have found that by far, they are the most friendly,
responsive, and knowledgeable support team we've ever dealt with!
 
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
 
In Order to create a Chart Control we have to have a Page to put it on so let's start with that
 
1.	First Add a Panel to the Form by dragging it from the General Section of the Toolbox

2.	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"
    
 
  
 


3.	Now we can add Text to the Panel in Code Type Something in between the Opening
and Closing Panel Tags

4.	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.

5.	At the bottom of this page you can find some filler text for your page to 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*
 
6.	Now we can add the Extender and View it working

 
 
We chose Server Intellect for its dedicated servers,for our web hosting.
They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
 
 
Add the Extender and Set it up
 
Notice that when you view the chart it has no text or labels on it, it could confuse some people
so let's put some labels on there for the end user.
 
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 Run the Page, Scroll up and Down, and witness the Panel Staying in the Top Right corner.


FILLER CODE 
 
  
 
    
 
<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>
 
  
 


FULL CODE
 
  
 
    
 
	<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 FROM ABOVE HAS BEEN REMOVED SO THAT THE FULL CODE WOULD FIT*
    </p>
 </form>
 </body>
 </html>
    
 
  
 

 
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several,
we went with Server Intellect and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.
 
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.