Always Visible Extender Control of Ajax is used to show some control (a panel mostly) on the page always. By always, it means that if the page has been scrolled vertically or horizontally, the extender will be showing the target control in the view area always. It can display the control horizontally in the left, center or right side of the screen and can display it vertically on the top, middle and bottom side of the screen. These orientations can be set using its HorizontalSide and VerticalSide properties.
However, in some case we need to update these properties to make room and view area for our other controls or for any other purpose. For this, its always better to update/ set these properties on client-side. This sample shows how to do it.
<head runat="server">
<title></title>
<script type="text/javascript">
function SetPosition(value) {
if (value == 1) {
$find('pnlTestExtender').set_HorizontalSide(0);
}
else
if (value == 2) {
$find('pnlTestExtender').set_HorizontalSide(1);
}
else
if (value == 3) {
$find('pnlTestExtender').set_HorizontalSide(2);
}
else
if (value == 4) {
$find('pnlTestExtender').set_VerticalSide(0);
}
else
if (value == 5) {
$find('pnlTestExtender').set_VerticalSide(1);
}
else
if (value == 6) {
$find('pnlTestExtender').set_VerticalSide(2);
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" onchange="SetPosition(this.value);">
<asp:ListItem Text="Change Horizontal to Left" Value="1"></asp:ListItem>
<asp:ListItem Text="Change Horizontal to Center" Value="2"></asp:ListItem>
<asp:ListItem Text="Change Horizontal to Right" Value="3"></asp:ListItem>
<asp:ListItem Text="Change Vertical to Top" Value="4"></asp:ListItem>
<asp:ListItem Text="Change Vertical to Middle" Value="5"></asp:ListItem>
<asp:ListItem Text="Change Vertical to Bottom" Value="6"></asp:ListItem>
</asp:DropDownList>
<asp:Panel runat="server" ID="pnlTest" Width="100px" Height="100px" BackColor="Red">
</asp:Panel>
<cc1:AlwaysVisibleControlExtender ID="pnlTestExtender" runat="server" TargetControlID="pnlTest"
HorizontalSide="Center" VerticalSide=" Middle" BehaviorID="pnlTestExtender">
</cc1:AlwaysVisibleControlExtender>
</form>
</body>
Changing the item in the drop down list, makes the panel update its orientation (horizontal and vertical sides)
