Working with AlwaysVisibleControl
page 4 of 6
by Nidal Arabi
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 29360/ 64

Creating Your AlwaysVisibleControl Solution

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" 

View Entire Article

User Comments

Title: alwaysvisiblecontrol in ajax example coding   
Name: alwaysvisiblecontrol in ajax example coding
Date: 2010-04-23 12:51:42 AM
alwaysvisiblecontrol in ajax example coding

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-04-23 12:59:48 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search