In a recent project I worked on I needed to add the functionality to make an AJAX call when the user has stopped typing in a textbox. A solution that I came up with is to keep a counter and have it increment on every key press and decrement after a specified time. When the counter = 0 then I know that the user is done typing.


// Create a global variable
var keyCount = 0;

// On keyup event for textbox
function onKeyUpOfMyTextBox(){
// a key was pressed, user is typing, update count
keyCount++;

// fire this event after a second
setTimeout( function(){
// reduce number of key count
keyCount--;

// key count is 0, user, is done typing
if( keyCount === 0 ){
// Do your stuff
}), 1000 );
}

A common problem I come across in the projects I work on is the need to check to see if an object exists in an Array of objects.  There are numerous solutions that are available to see if a value exists in an Array.  You can use jQuery.inArray(value,array) method or Array.indexOf(array,item, start) method, but if you try those solutions when passing in an object your object does not seemed to be found.

I found that the reason those solutions don’t work is because when you are searching an Array for an object it is comparing the reference of the objects not the values.

A solution I have will loop through a passed in Array and then compare all the properties of an object against the passed in object.  If all the properties match then you get the index of the object in the Array.  If not then you get -1

Here is the code:

function( arrArray, oObject )
{
var length = arrArray.length;
for (var i = 0; i < length; i++)
{
var matchFound = false;
for( var p in arrArray[i] )
{
if( arrArray[i][p] === oObject[p] && arrArray[i].length === oObject.length )
{
matchFound = true;
}
else
{
matchFound = false;
break;
}
}
if( matchFound )
{
return i;
}

return -1;
};

(This tutorial assumes you already downloaded and installed the Asp.Net Ajax Essentials and the Asp.Net Ajax Control Toolkit)

  1. You want to make sure that one and only one ScriptManager control is on the page.
  2. To create a draggable panel like the example I have you need to use 3 Asp.Net Panel controls. One Asp.Net panel control for the “Drag Me” section, another Asp.Net panel control for the content you want to display and another Asp.Net panel control to surround the “Drag Me” panel and the content panel.
  3. Here is an example:
    <asp:Panel ID=”pnlDragContainer” runat=”server” width=”200px”>
    <asp:Panel ID=”pnlDragSection” runat=”server” style=”cursor:move; background-color:#ffdd95;”>
    Drag Me
    </asp:Panel>
    <asp:Panel ID=”pnlDragContent” runat=”server” style=”background-color:#cccccc;”>
    This is the content to be dragged.
    </asp:Panel>
    </asp:Panel>
  4. After creating your drag handle, content and container you can add the DragPanelExtender control.<ajaxToolkit:DragPanelExtender ID=”DragPanelExtender1″ runat=”server”
    DragHandleID=”pnlDragSection”
    TargetControlID=”pnlDragContainer” />
  5. The DragHandleID property is used for the “Drag Me” section of your draggable panel. The TargetControlID property is used for the Asp.Net Panel you want to drag. In my example I set it to container that surrounds the “Drag Me” section and the content. This way the “Drag Me” section will move with the content.
  6. Now some sites have problems when applying the DragPanelExtender control to the page. The issue some sites have is that when the dragging is complete, the panel snaps back to its starting location. A possible solution to this problem is to include the following JavaScript just before the closing </body> tag.<script type=”text/javascript”>
    function setBodyHeightToContentHeight() {
    document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+”px”;
    }
    setBodyHeightToContentHeight();
    $addHandler(window, “resize”, setBodyHeightToContentHeight);
    </script>

So there you have it. Easy steps to follow to create an always visible control on your site.