Ajax AlwaysVisibleControlExtender

In this article I am going to discuss an Ajax control named 'AlwaysVisibleControlExtender' and how to use it in ASP.Net 2.0.

AlwaysVisibleControlExtender is used to define area of content on user interface to remain visible no matter how the user scrolls around the rest of the content of the page. The AlwaysVisibleControl is a simple extender allowing you to pin controls to the page so that they appear to float over the background body content when it is scrolled or resized. It targets any ASP.NET control and always keeps the position a specified distance from the desired horizontal and vertical sides. I am using a panel that will be visible all the time when you will scroll page.

Ok let's start from beginning, first of all Open Microsoft Visual Studio2005 and create a new website in ASP.NET Enabled Website.

SnapShot 1: 

 

There should be already a control named ScriptManager. Now add AjaxControl Toolkit in your Bin directory. Drag and drop a Panel control on page, and put all contents which you want to be visible all the time on the page; it doesn't matter whether the page is scrolling or not. Now drag and drop AlwaysVisibleControlExtender control from Toolbox and set TargetControlID to that PanelID. For testing whether it's working or not, put lots of contents on your page.

Here is .aspx code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

    <asp:Panel ID="Panel1" BorderStyle=solid BorderWidth=2 runat="server" Height="100px" Width="200px"    BackColor=yellow BorderColor=red>

        <p>

            <span style="font-size: 10pt; font-family: Tahoma">

                <strong>Message:</strong>

            </span>

        </p>

        <div>

            <span style="font-size: 10pt">

                <span style="font-family: Tahoma">

                    This Panel will visible all the time when you will scroll the page.

                </span>

            </span>

        </div>

        <p>

            <span style="font-size: 10pt">

                <strong>

                    <span style="font-family: Verdana">Current Time:

                    </span>

                </strong>

            </span>

            <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="10pt">

            </asp:Label>

        </p>

    </asp:Panel>

    <div>

        <cc1:alwaysvisiblecontrolextender ScrollEffectDuration=".1" HorizontalSide=Right HorizontalOffset=10
         VerticalSide="Middle" VerticalOffset="10" TargetControlID="Panel1"

         id="AlwaysVisibleControlExtender1" runat="server">

         </cc1:alwaysvisiblecontrolextender>

    </div>

Snapshot 2: 

 

I hope you will like this article. If yes drop me a line or write a comment below in the comments section.