AlwaysVisibleControlExtender Ajax Toolkit in VB.NET

Through this article you will learn: How to use AlwaysVisibleControlExtender control in ASP.NET 2.0.
  • 3143
 

Introduction

In this article I am going to discuss about 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 state visible no matter how the user scroll around the rest of 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
 
1.gif

There should be already a control name 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 visible all the time on the page, doesn't matter page is scrolling or not. Now drag and drop AlwaysVisibleControlExtender control from Toolbox and set TargetControlID to that PanelID. For testing 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

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

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.