How to get time elapsed after loading a webpage

How to get the time elapsed time after loading a webpage, using Callback() in MS Ajax library. Here is a sample script;

[Ajax-Script]

   1: <script type="text/javascript">

   2:         // Page Load

   3:         function pageLoad() {

   4:             var loadTime = {date : new Date()};

   5:             var callback = Function.createCallback(onBtnClick, loadTime);

   6:             

   7:             $addHandler($get("Button1"), "click", callback);

   8:         }

   9:  

  10:         function onBtnClick(event, context) {

  11:             var loadTime = context.date;

  12:             var elapseTime = (new Date() - loadTime) / 1000;

  13:  

  14:             $get("Text1").value = elapseTime + " Seconds";

  15:         }

  16:     </script>

[HTML-Script]

   1: <form id="form1" runat="server">

   2:     <asp:ScriptManager ID="ScriptManager1" runat="server">

   3:     </asp:ScriptManager>

   4:     <div>

   5:         Time elapsed since PageLoad: 

   6:         <input id="Text1" type="text" />

   7:         <input id="Button1" type="button" value="Get Elapsed Time" />

   8:     </div>

   9:     </form>

Thanks.

Sys.ArgumentTypeException: Object of type 'String' cannot be converted to type 'Number'

Another careless mistake : when I used the setLocation() method in the DomElement class in Sys.UI namespace. I tried to set the location of a DIV element using the value which I read from a textbox and I’s thrown with the error:

Sys.ArgumentTypeException: Object of type 'String' cannot be converted to type 'Number'

After taking a close look, I found it. The setLocation() method clearly states that I’ve to enter the (x,y) coordinates as integer data type. Take a look:

Aaahhh…!!! See how careless I’m. Soon, I fixed the small careless-bug using ParseInt() as

Hope, you’ll be more careful.

Thanks.

Reposition a DOM element using Ajax

For handling the DOM elements, Microsoft Ajax library has a Class named DomElement in the Sys.UI namespace. The DomElement class has 2 methods as follows:

a) getLocation(element-name): returns the (x,y) coordinate of the DOM element.
b) setLocation(element, x-pos, y-pos): sets the DOM element to (x,y) position.

Here is a simple example on repositioning a DOM element using the Ajax library;

[Ajax Script]

   1: <script type="text/javascript">

   2:         //Page Load

   3:         function pageLoad() {

   4:             var btnGet = $get("btnGetPos");

   5:             var btnSet = $get("btnSetPos");

   6:  

   7:             $addHandler(btnGet, "click", getXYLocation);

   8:             $addHandler(btnSet, "click", setXYLocation);

   9:             

  10:             

  11:         }

  12:  

  13:         // Get (X,Y) Location

  14:         function getXYLocation() {

  15:             var location = Sys.UI.DomElement.getLocation(div1);

  16:  

  17:             var tbX = $get("tbXpos");

  18:             var tbY = $get("tbYpos");

  19:  

  20:             tbX.value = location.x;

  21:             tbY.value = location.y;

  22:         }

  23:         

  24:         // Set (X,Y) Location

  25:         function setXYLocation() {

  26:             var tbX = $get("tbXpos").value;

  27:             var tbY = $get("tbYpos").value;

  28:  

  29:             alert(tbX + tbY);

  30:  

  31:             Sys.UI.DomElement.setLocation(div1, parseInt(tbX), parseInt(tbY));

  32:         }

  33:  

  34:         // Unload Page

  35:         function pageUnload() {

  36:             var btnGet = $get("btnGetPos");

  37:             var btnSet = $get("btnSetPos");

  38:  

  39:             $removeHandler(btnGet, "click", getXYLocation);

  40:             $removeHandler(btnSet, "click", setXYLocation);

  41:         }

  42:     </script>

[HTML-Script]

   1: <form id="form1" runat="server">

   2:     <asp:ScriptManager ID="ScriptManager1" runat="server">

   3:     </asp:ScriptManager>

   4:     <div id="div1" style="border: ridge 1px Black; width: 250px; text-align: justify;">

   5:     This is a sample text inside an HTML for demonstrating CSS Positioning using ASP.NET Ajax Library.

   6:     </div>

   7:     <br />

   8:     <div>

   9:     X-Coord: <input id="tbXpos" type="text" /><br />

  10:     Y-Coord: <input id="tbYpos" type="text" /><br />

  11:         <input id="btnGetPos" type="button" value="Get (X,Y) Location" />&nbsp;&nbsp;&nbsp;

  12:         <input id="btnSetPos" type="button" value="Set (X,Y) Location" />

  13:     </div>

  14:     </form>

Thanks.

DomEvents in ASP.NET AJAX

In my previous article Avoid Numbers in Textbox using ASP.NET AJAX, I showed how you can prevent numbers from being entered into a Textbox, using ASP.NET AJAX Framework.

In that example, the code segment e.charCod  and preventDefault() designates a property belonging to Sys.UI.DomEvent class. The Sys.UI is the class provided by the AJAX Framework to work with the DOM components in a webpage. And you can say, Sys is the root namespace or mother-of-all classes, just like System is the root namespace in C#.

After a slight Binging, I’s able to get a lot more properties of the Sys.UI.DomEvent class. Please note, they are cross-browser objects. Here is the list:

Properties	Descriptions
rawEvent	event-data object built by the current browser
shiftKey	Returns TRUE, if SHIFT key was pressed
ctrlKey	Returns TRUE, if CTRL key was pressed
altKey	Returns TRUE, if ALT key was pressed
button	captures the mouse-button click and has values as (leftButton, middleButton and rightButton)
charCode	character code for the typed characters
clientX	returns the  x-coordinate of the mouse location relative to client area of the page
clientY	returns the  y-coordinate of the mouse location relative to  client area of the page
target	represents the Element that raised the event
screenX	x-coordinate of mouse-pointer relative to screen
screenY	y-coordinate of mouse-pointer relative to screen
type	Returns name/type of the event (click/mouse)
preventDefault()	Prevents the default action associated with that event
stopPropagation()	Prevents the event from propagation to  the element’s parent nodes

Hope this is handy.
Thanks.