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.

Avoid numbers in Textbox using ASP.NET AJAX

An old question which was recently asked for an interview.

How can you prevent numbers from being entered into a Textbox, using Microsoft ASP.NET AJAX Framework. Thinking about UpdatePanel’s? Be clever, I have some client-side codes, using the framework itself.

[Client-Side]

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

   2:     function pageLoad() {

   3:         var tbox = $get("Text1");

   4:         $addHandler(tbox, 'keypress', text1_keypress);

   5:     }

   6:  

   7:     function text1_keypress(e) {

   8:         var code = e.charCode;

   9:         if (code >= 48 && code <= 57)

  10:             e.preventDefault();

  11:     }

  12:  

  13:     function pageUnload() {

  14:         var tbox = $get("Text1");

  15:         $removeHandler(tbox, 'keypress', text1_keypress);

  16:     }

  17: </script>

[Markup-Code]

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

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

   3: </asp:ScriptManager>

   4: <div>

   5:     Enter text value:

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

   7: </div>

   8: </form>

Thanks.

What are Mashups?

It’s been a long time, I’ve been hearing about mashups in the web world. Surprisingly, I came across the same when I’s reading Manning’s ASP.NET AJAX in Action.

A mashup is a web application that consumes content from more than
one external source and aggregates it into a seamless, interactive experience
for the user.

If you ask me a live example, here it is PageFlakes.

Exiting an Application on Error

Error handling is always a nightmare for every programmer. Because, testing you application in your development lab and exposing the application to a real-world lies in two extremities. The very reason where everyone go for alpha/beta and finally the RC release. Hey…Hey…I’m not going into core-concepts.

Recently, I’s re-optimizing a 6-month old c#-code (written in .NET 2.0) to .NET 3.5. Re-optimizing the code is a tough task, specially when the code was written by someone else. It deals with studying the code, understanding the logic and also good, if you can preview the test-cases encountered while re-designing.

When digging deep into the logic, I came across code-blocks where, even if you catch an Exception, you can’t continue because that might cause an abnormal exception at some other point. Huh! and I’s forced to kill the application at that point, using one-line code.

   1:  

   2: Environment.Exit(1);

   3:  

Remember, use this code safely. Use it only when you came across a do-or-die situation. Killing an application unnecessarily is bad way of programming.

Happy Programming.