AlwaysVisibleControl example

The AlwaysVisibleControl is a simple extender allowing you to pin controls to the page so that they appear to float over the back ground 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. To avoid having the control flash and move when the page loads, it  is recommended that you absolutely position the control in the  desired location in addition to attaching the extender.

Syntax:

<ajaxToolkit:AlwaysVisibleControlExtender ID="ace"

 runat="server"TargetControlID="timer"VerticalSide="Top" VerticalOffset="10"     HorizontalSide="Right"

    HorizontalOffset="10"    ScrollEffectDuration=".1"/>

• TargetControlID - ID of control for this extender to always make visible
• HorizontalOffset - Distance to the HorizontalSide edge of the browser in pixels from the same side of the 
•  target control. The default is 0 pixels.
• HorizontalSide - Horizontal edge of the browser
•  (either Left, Center, or Right) used to anchor the 
• target control. The default is Left.
• VerticalOffset - Distance to the VerticalSide edge of 
• the browser in pixels from the same side of the target control. The default is 0 pixels.
• VerticalSide - Vertical edge of the browser (either Top, Middle, or Bottom) used to anchor the target control. The default is Top.
• ScrollEffectDuration - Length in seconds of the scrolling effect to last when the target control is repositioned. The default is .1 second.
• UseAnimation - Whether or not to animate the element into position. The default is false.

Example:

how to use the AlwasyVisibleControlExtender of AJAX controls in an ASP.Net web page. As all you know about AJAX, AJAX is Asynchronous JavaScript and XML can be used to design your webpage with some advanced controls.

On webpage keep one ScriptManager Control and AlwaysVisibleControlExtender and one panel in which we will show the clock which is always visible.

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         <cc1:AlwaysVisibleControlExtender  
            ID="AlwaysVisibleControlExtender1" 
            runat="server" 
            TargetControlID="Panel1" 
            VerticalSide="Top" 
            HorizontalSide="Right" 
            > 
        </cc1:AlwaysVisibleControlExtender>   
        <asp:Panel  
            ID="Panel1"  
            runat="server" 
            Width="174px" 
            Height="62px" 
            BorderWidth="2" 
            BorderColor="LightPink" 
            BackColor="OrangeRed" 
            HorizontalAlign="Center" 
            > 
              <div>
    <table>
    <tr>
<td bgcolor="black" height="45">
<img src="dg8.gif" name="hr1">
<img src="dg8.gif" name="hr2">
<img src="dgc.gif" name="c">
<img src="dg8.gif" name="mn1">
<img src="dg8.gif" name="mn2">
<img src="dgc.gif" name="c">
<img src="dg8.gif" name="se1">
<img src="dg8.gif" name="se2">
<img src="dgpm.gif" name="ampm">
</td></tr></table>

<script language="javascript"><!--    start

    dg0 = new Image(); dg0.src = "dg0.gif";
    dg1 = new Image(); dg1.src = "dg1.gif";
    dg2 = new Image(); dg2.src = "dg2.gif";
    dg3 = new Image(); dg3.src = "dg3.gif";
    dg4 = new Image(); dg4.src = "dg4.gif";
    dg5 = new Image(); dg5.src = "dg5.gif";
    dg6 = new Image(); dg6.src = "dg6.gif";
    dg7 = new Image(); dg7.src = "dg7.gif";
    dg8 = new Image(); dg8.src = "dg8.gif";
    dg9 = new Image(); dg9.src = "dg9.gif";
    dgam = new Image(); dgam.src = "dgam.gif";
    dgpm = new Image(); dgpm.src = "dgpm.gif";
    dgc = new Image(); dgc.src = "dgc.gif";

    function dotime() {
        theTime = setTimeout('dotime()', 1000);
        d = new Date();
        hr = d.getHours() + 100;
        mn = d.getMinutes() + 100;
        se = d.getSeconds() + 100;
        if (hr == 100) { hr = 112; am_pm = 'am'; }
        else if (hr < 112) { am_pm = 'am'; }
        else if (hr == 112) { am_pm = 'pm'; }
        else if (hr > 112) { am_pm = 'pm'; hr = (hr - 12); }
        tot = '' + hr + mn + se;
        document.hr1.src = 'dg' + tot.substring(1, 2) + '.gif';
        document.hr2.src = 'dg' + tot.substring(2, 3) + '.gif';
        document.mn1.src = 'dg' + tot.substring(4, 5) + '.gif';
        document.mn2.src = 'dg' + tot.substring(5, 6) + '.gif';
        document.se1.src = 'dg' + tot.substring(7, 8) + '.gif';
        document.se2.src = 'dg' + tot.substring(8, 9) + '.gif';
        document.ampm.src = 'dg' + am_pm + '.gif';
    }
    dotime();
//end -->
</script> </div>
 </asp:Panel>