Follow the easy steps below to create your solution.
1.
Start your Visual Studio 2005 IDE.
2.
Choose Create Web Site from the menu.
3.
In this sample application we will use the Visual Basic language for the
sample application.
4. Name
the solution AlwaysVisibleSample.
5.
Choose ASP.NET AJAX Control Toolkit Web Site.
6.
Choose File System in the location box.
7.
Click OK to create the project.
8.
Visual Studio will create your project with a Default.aspx
page and most likely a readme.txt. Go ahead and get rid of the latter file.
9.
Open Default.aspx page in design view.
10. You
noticed that there is a control on the page already called ScriptManager. (Well,
AJAX is really a script based implementation of the language JavaScript). In
Short, Script Manager Control manages client script for Microsoft ASP.NET AJAX
pages. By default, the Script Manager Control registers the script for the
Microsoft AJAX Library with the page. This enables client script to use the
type system extensions and to support features such as partial-page rendering
and Web-service calls.
11. Now
you have to fill your page with some text. In order to do so, take Listing 1
and copy and paste it many times inside the div tag within the default.aspx
page when in source mode.
Listing 1 - Page content to duplicate inside the div
tag
This is just a content of page where we should have some pictures and some talk.
<br />
Please note that this text is used only to fill the page for demo purposes
<br />
and you should have real content for this page<br /><br /><br /><br /><br />
12. After
you have filled a page, drag a panel from the standard toolbox and drop it on
page.
13. Please
format the panel in source mode as described in Listing 2 while ensuring that
it has some content.
Listing 2 - Panel HTML source for floating purpose
<asp:Panel ID="Panel1" runat="server" BackColor="#FF8080" BorderColor="Black"
BorderStyle="Solid" ForeColor="Indigo" Height="50px" Width="477px">
This is a message that should always stay visible when the user is scrolling up
and down inside the page and should give a great effect.</asp:Panel>
14. Place
the cursor after the script manager html end tag. From the Toolbox of the Toolkit
drag an AlwaysVisibleControl and set the properties as specified in Listing 3.
Please note that some of these properties cannot be specified using the normal
properties window. The target control ID specifies the control to appear as
floating (the panel in our case). The horizontal side tag specifies where to
make the panel (right, left, middle). The horizontal offset describes how much
the panel should be away from the page corner. The same goes for the vertical
tags. The only remaining tag is the scroll effect duration that is specified in
second and 0.1 is the default.
Listing 3 - Always Visible control specs
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"
runat="server" TargetControlID="Panel1" HorizontalSide="Right"
HorizontalOffset="10" VerticalOffset="10" VerticalSide="Top"
ScrollEffectDuration="3">
</ajaxToolkit:AlwaysVisibleControlExtender>