Advertisements

Archive

Posts Tagged ‘AlwaysVisibleControlExtender’

How to create always visible div using Ajax/ Always visible div in ASP.Net using Ajax

September 22, 2012 1 comment

                                  DOWNLOAD SOURCE CODE FOR ALWAYS VISIBLE DIV

Create very simple always visible div using ajax in ASP.Net

Here we are demonstrating how to create a very simple always visible div using Ajax in ASP.Net/C#. Some of the WebPages we may need to show some information always visible to user even they are scrolling down and up.   In this situation we can achieved it by different method. In our previous post we already posted how to create a always visible div using CSS. Here we are going to implement the always visible div using Ajax in ASP.Net/C#.

Register Ajax Control Toolkit

In order to implement always visible div using Ajax, we need to download and refer ajax control toolkit to our project. First of all download ajaxtoolkit dll from here and right click the ‘References’ under the ASP.Net project from Visual Studio and browse the dll and press OK.

In the ASPX page we need to register this ajax toolkit dll like below mentioned code.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajax” %>

How to implement AlwaysVisibleControlExtender in AJAX Controls?

Always vissible Control Extender in Ajax control tool kit is using to implement always vissible div or any controls in ASP.Net/C#.

After registering the ajax control tool kit we can implement alwaysvisibleextender as below mentioned code.

<ajax:alwaysvisiblecontrolextender id="ace" runat="server" targetcontrolid="pnlTimer"
 verticalside="Top" verticaloffset="10" horizontalside="Right" horizontaloffset="10"
 scrolleffectduration=".1" />

We are having some properties in the alwaysvisiblecontrolextender and we can adjust the postion and controls for always visible extender. Below are the main properties of alwaysvissibleextender in ajax.

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.

 ASPX Page

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="AjaxControls.aspx.cs" 
Inherits="ExperimentLab.AjaxControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
</head>
<body>
 <form id="form1" runat="server">
 <ajax:ToolkitScriptManager ID="Scriptmanager1" runat="server">
 </ajax:ToolkitScriptManager>
 <div>
<ajax:AlwaysVisibleControlExtender id="ace" runat="server" 
targetcontrolid="pnlTimer"
 verticalside="Top" verticaloffset="10" horizontalside="Right" 
horizontaloffset="10"
 scrolleffectduration=".1" />
<div runat="server" id="pnlTimer" style="border: 2px solid green; 
height: 100px;
 width: 200px; text-align: center; padding-top: 50px; 
font-weight: bold;">
 This div is always visible to user
</div>
 <br />
 <br />
 Scroll down .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 Scroll down
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 Scroll down
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 Still 'Always visible div' is available ...!
 </div>
 </form>
</body>
</html>

------

                                                        DOWNLOAD SOURCE CODE FOR ALWAYS VISIBLE DIV


		
Advertisements
%d bloggers like this: