Show always visible content on a webpage
Introduction
In many cases, we have the need of showing some content on a webpage which should be always visible to the visitors. I.e. content should be visible even when user scrolls the page. For Ex: showing clock or no of visitors or some type of announcement or notice to the user. Real time example can be a webpage where want to show the full form of the abbreviation extensively used in that page. For Ex: If you have a page with a column ‘Status’ in grid view showing thousands of records. There are many status possible and you have used short form for this status(R-Rejected, A-Accepted, o-Open, P-Pending, C-Closed, R-under review and so on). In this case, you would like to show the full form of this status always visible to the user. In such cases, there is a need to make content always visible to the user. Another example can be a page with a lengthy article where you want the top link to be always visible at the top of the screen on the click of which user scrolls automatically to the top of the article. In HTML, this is possible by styling the div position as fixed.
Why AlwaysVisibleControlExtender control?
The same can be achieved by using readymade Asp.net Ajax control called “AlwaysVisibleControlExtender”.
Using this control is very easy. Put four fixed content in any .Net control and assign that control id to AlwaysVisibleControlExtender control.
For Ex: Below code will associate the content of panel1 to AlwaysVisibleControlExtender control and so, the content of panel1 will always be visible at the point where the panel1 is declared in the code. Even when the user scrolls the page, panel1 will be always visible in the screen at the same position.
<asp:Panel ID="Panel1" CssClass="staticPanel" runat="server">
<h2>
This Panel is always visible at the top.</h2>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" TargetControlID="Panel1" VerticalSide="Top" VerticalOffset="10" HorizontalSide="Right" HorizontalOffset="10" runat="server" />
<cc1:AlwaysVisibleControlExtender
ID="AlwaysVisibleControlExtender1"
runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
HorizontalSide="Right"
>
</cc1:AlwaysVisibleControlExtender>
Properties of AlwaysVisibleControlExtender control
As this is an Ajax toolkit control, Script Manager Tag is necessary to be included in the page.
Below are some additional properties of this Control
TargetControlID: Control ID of the server control that you want to associate with AlwaysVisibleControl.
VerticalSide: Vertical edge of the browser such as top, bottom or middle to fix the target control on y-axis.
HorizontalSide: Horizontal edge of the browser such as left, right or center to fix the target control on x-axis.
VerticalOffset: Margin between the target control and VerticalSide (Top, Bottom or Middle)
HorizontalOffset: Margin between the target control and HorizontalSide (Left, Right or Center)
ScrollEffectDuration: ScrollEffectDuration property defines the minimum time in seconds to reposition the target control on its vertical and horizontal axis. Its default value is .1 seconds.
Demo
Attached is the demo example where I am showing a panel at the top of the page. Below is the output of this demo. As you can see below, even when I have navigated to the bottom of the webpage, my panel is always visible on the right hand top side.
Conclusion:
In this article, we saw how to use AlwaysVisibleControlExtender control along with its demo.