Home / AJAX

HOW TO Use the AlwaysVisible Control

RSS
Modified on 2010/01/18 05:22 by Mike Pope Categorized as Uncategorized

AlwaysVisibleControl Demonstration

(You will see a floating "Hello :)" on the side of this page.)

Untitled Page
hello :)




AlwaysVisibleControl Description

AlwaysVisible extends any ASP.NET control and lets you pin it to the page so that it appears to float over the background body content when it is scrolled or resized. The extender keeps the position of the control a specified distance from the horizontal and vertical sides.

To avoid having the control flash and move when the page loads, you should specify absolute positioning for the control and specify the location.

Video - How Do I: Use the ASP.NET AJAX AlwaysVisible Control Extender?

AlwaysVisibleControl Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .always { background-color: Yellow } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.alwaysVisible, function() { $(".always").alwaysVisible({ useAnimation: false, VerticalSide: Sys.Extended.UI.VerticalSide.Middle }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="always"> hello :) </div> </form> </body> </html>

AlwaysVisibleControl Client Reference

Sys.Extended.UI.AlwaysVisibleControlBehavior Class

Events

  • repositioning - Adds or removes an event handler for the repositioning event.
  • repositioned - Adds or removes an event handler for the repositioned event.

Methods

  • initialize() - Initializes the behavior for the AlwaysVisible control.
  • dipose() - Disposes the AlwaysVisible control.
  • raiseRepositioning(eventArgs) - Raises the repositioning event
    • Parameters - A Sys.EventArgs object that represents event arguments for the repositioning event.
  • raiseRepositioned(eventArgs) - Raises the repositioned event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the repositioned event.

Properties

  • HorizontalOffset - Gets or sets an integer that represents the distance, in pixels, to the horizontal edge of the browser window from the side of the target control. The default is 0.
  • HorizontalSide - Gets or sets a Sys.Extended.UI.HorizontalSide object that represents the horizontal side of the browser window to anchor the control to. The default is Left.
  • VerticalOffset - Gets or sets an integer that represents the distance, in pixels, to the vertical edge of the browser window from the side of the target control. The default is 0.
  • VerticalSide - Gets or sets a Sys.Extended.UI.VerticalSide object that represents the vertical side of the browser window to anchor the control to. The default is Top.
  • ScrollEffectDuration - Gets or sets a number that represents the length, in seconds, of the scrolling effect when the target control is repositioned. The default is .1.
  • useAnimation - Gets or sets a Boolean value that specifies whether to animate the element when it is positioned. Note: In Internet Explorer 6, this value should always be true.

Sys.Extended.UI.HorizontalSide Enum

  • Left : 0
  • Center : 1
  • Right : 2

Sys.Extended.UI.VerticalSide Enum

  • Top : 0
  • Middle : 1
  • Bottom : 2

AlwaysVisibleControl Server Code Sample

        <asp:UpdatePanel runat="server" ID="UpdatePanel1" >
            <ContentTemplate>
                <div style="width:230px;height:100px">
                    <asp:Panel ID="timer" runat="server"
                        Width="250px" BackColor="White" ForeColor="DarkBlue"
                        BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;">
                            <div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
                                <p>Current Time:</p>
                                <span id="currentTime" runat="server" style="font-size:xx-large;font-weight:bold;line-height:40px;"/>
                            </div>
                    </asp:Panel>
                    <ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server"
                        TargetControlID="timer"
                        VerticalSide="Top"
                        VerticalOffset="10"
                        HorizontalSide="Right"
                        HorizontalOffset="10"
                        ScrollEffectDuration=".1" />
                </div>
                <p>
                    Choose a position for the clock from the list below. Scroll your browser window to see
                    the control maintain its always-visible position.  
                </p>
                <p>
                    Position: <asp:DropDownList ID="ddlPosition" runat="server" 
                        AutoPostBack="true" OnSelectedIndexChanged="OnChange">
                        <asp:ListItem Text="Default" Selected="true"  Value="None" />
                        <asp:ListItem Text="Top Left" Value="TL" />
                        <asp:ListItem Text="Top Center" Value="TC" />
                        <asp:ListItem Text="Top Right"  Value="TR" />
                        <asp:ListItem Text="Middle Left" Value="ML" />
                        <asp:ListItem Text="Middle Center" Value="MC" />
                        <asp:ListItem Text="Middle Right"  Value="MR" />
                        <asp:ListItem Text="Bottom Left" Value="BL" />
                        <asp:ListItem Text="Bottom Center" Value="BC" />
                        <asp:ListItem Text="Bottom Right" Value="BR" />
                    </asp:DropDownList>
                </p>
            </ContentTemplate>
         </asp:UpdatePanel>
         
         <script type="text/javascript" language="javascript">
            function updateTime()
            {
                var label = document.getElementById('ctl00_SampleContent_currentTime');
                if (label) {
                    var time = (new Date()).localeFormat("T");
                    label.innerHTML = time;
                }
            }
            updateTime();
            window.setInterval(updateTime, 1000);
        </script>



AlwaysVisibleControl Server Reference

The properties in italics are optional.

<ajaxToolkit:AlwaysVisibleControlExtender ID="ace" runat="server"
    TargetControlID="timer"         
    VerticalSide="Top"
    VerticalOffset="10"
    HorizontalSide="Right"
    HorizontalOffset="10"
    ScrollEffectDuration=".1"/>

  • TargetControlID - The ID of the control to extend.
  • HorizontalOffset - The distance, in pixels, to the HorizontalSide edge of the browser window from the side of the target control. The default is 0.
  • HorizontalSide - The horizontal edge of the browser (Left, Center, or Right) to anchor the target control to. The default is Left.
  • VerticalOffset - The distance, in pixels, to the VerticalSide edge of the browser window from the side of the target control. The default is 0.
  • VerticalSide - The vertical edge of the browser window (Top, Middle, or Bottom) to anchor the target control to. The default is Top.
  • ScrollEffectDuration - The length, in seconds, of the scrolling effect when the target control is repositioned. The default is .1.
  • UseAnimation - A Boolean value that specifies whether to animate the element when it is positioned. The default is false.

AlwaysVisibleControl Additional Code Samples