How to add keyboard navigation for Jquery UI Tabs

We make use of Jquery UI a lot and their widgets are just awesome. One feature which was missing in Jquery (correct me if I am wrong) UI tabs was the option to use arrow keys or any key for tab navigation. So wrote this small script to make it happen. This concept can be modified in any manner so that we can give “Google Reader” like keyboard shortcut features in our web page.

$('body').keyup(function(e) {

 var direction = null;

 // handle cursor keys
 if (e.keyCode == 37) {
 // slide left
 direction = 'prev';
 } else if (e.keyCode == 39) {
 // slide right
 direction = 'next';
 }
 if (direction != null) {
 var totaltabs = $('#tabs').tabs('length'); //gettting the total # of tabs
 var selected = $('#tabs').tabs('option', 'selected');//getting the currently selected tab
if (direction == 'next') {
 if (selected <= totaltabs - 1)
 $('#tabs').tabs('select',selected + 1)
 }
 else
 {
 if (selected != 0)
 $('#tabs').tabs('select',selected - 1)
 }
 }
});

Hope this helps.

Happy Programming!!!

Cheers,

Raja

Javascript – Getting URL Values

I found this nice function at Snipplr. This is a simple function but the thought behind such a simple function amazed me. I used to get the query string values using <% %> and adding the values to a hidden span. This is much more effective since it gets the values in name value pairs.

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
 var vars = [], hash;
 var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

 for(var i = 0; i < hashes.length; i++)
 {
 hash = hashes[i].split('=');
 vars.push(hash[0]);
 vars[hash[0]] = hash[1];
 }

 return vars;
}

Hope this helps.

Happy Programming!!!

Cheers,

Raja

Automatic redirect upon session timeout – using Javascript

We had a requirement that the logged in user should be automatically logged out after 5 minutes of inactivity. We tried the session_end event in global.asax but it didnt work as it should have. After thinking a bit me and bryan came up with a simple solution using Javascript which works really nice.

var wintimeout;

function SetWinTimeout() {
 wintimeout = window.setTimeout("window.location.href='../weblogin/default.aspx';",300000); //after 5 mins i.e. 5 * 60 * 1000
 }
 $('body').click(function() {

window.clearTimeout(wintimeout); //when user clicks remove timeout and reset it

SetWinTimeout();

});
 SetWinTimeout();

That is it. Just put the above code in document load ($) and it works like a charm. Just 5 mins away from keyboard and monitor would do a world of good.

Hope this helps.

Happy Programming!!!

Cheers,

Raja

Impressed with Jquery UI image manipulation

We are using JQuery UI for our current project. I am particularly impressed with their image manipulation using CSS. I am talking about the Framework Icons which is one image ( 5  Kb) but it can be manipulated in such a way that the coordinates are changed to just bring a particular image portion up front. They are using a pretty effective technique using the background-position. I have heard of this technique before but was really excited to see that in action. Let me give you an example:  If you want to use the delete image (trash can) then you can use the following class:

“ui-icon ui-icon-trash” (CSS : .ui-icon-trash { background-position: -176px -96px; }).

so just mouseover the framework icon in the link above, get the class name and use it. The required image would appear. Pretty sweet.

Hope this helps.

Happy Programming!!!

Cheers,

Raja

Method Overloading in JQuery

This is a code script which I did while I was helping out a friend in his project. This is a pretty neat implementation of having overloaded methods in JQuery. For this to work I utilized a sweet method which John Resig wrote as given below:

// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
    var old = object[ name ];
    object[ name ] = function(){
        if ( fn.length == arguments.length )
            return fn.apply( this, arguments );
        else if ( typeof old == 'function' )
            return old.apply( this, arguments );
    };
}

Given below is how I utilized the addMethod of Johns to have a overloaded method implementation:

function UploadFileWithData() {
    addMethod(this, "upload", function(oframe, FileDescription, List){
       if (document.getElementById(oframe) != null) {

            ifUpload = document.getElementById(oframe);
            ifUpload.contentWindow.document.getElementById("hiddenDescription").value = FileDescription;
            ifUpload.contentWindow.document.getElementById("hiddenFilesList").value = List;
            ifUpload.contentWindow.document.getElementById("hiddenIsEditRequired").value = "0";
            ifUpload.contentWindow.document.getElementById("btnSubmit").click();
        }
        var oSection = document.getElementById("hSection");

        if (oSection != null) {

            oSection.value = List;
        }
    }
    );
    addMethod(this, "upload", function(oframe, FileDescription, List, AddEdit,Id, IsFileDeleted){
        if (document.getElementById(oframe) != null)
        {

        ifUpload = document.getElementById(oframe);
        ifUpload.contentWindow.document.getElementById("hiddenDescription").value = FileDescription;
        ifUpload.contentWindow.document.getElementById("hiddenFilesList").value = List;
        ifUpload.contentWindow.document.getElementById("hiddenIsEditRequired").value = "1";
        ifUpload.contentWindow.document.getElementById("hiddenSId").value = Id;
        ifUpload.contentWindow.document.getElementById("hiddenIsFileDeleted").value = IsFileDeleted;
        ifUpload.contentWindow.document.getElementById("btnSubmit").click();

        }
        var oSection = document.getElementById("hSection");

        if (oSection != null) {

            oSection.value = List;
        }
    }
    );
}

Hope it helps.

Happy Programming!!!

Cheers,

Raja

Checkbox + JQuery Pattern

We were working on a project which includes multiple selection entries under multiple categories. All the checkboxes are dynamically generated (Database lookup) since those were master items maintained by the admins of the system. We were able to easily generate the checkboxes by bringing in data using JSON and dynamically appending checkboxes to a DIV using JQuery. Now the problem was to get all the selected entries per category. That is when we brought in the following pattern by which a good naming convention followed by the amazing power of Jquery came into play. We made sure that all our check boxes followed a particular pattern like chk+category+id(the primary id). And then wrote the function given below to get the selected items in a particular category.

function GetCheckedItems(item)
{
    var strIDList="";   
    //this is the pattern: the class is going to be the checkboxtype followed by checkbox ex. contactcheckbox
    //so to get the generalized checkbox typ replace the checkbox with ""
    //this would give us just .contact. so taking the substring from 1 which would give us contact
    var strSearch=item.toString().replace(('checkbox'),'').substring(1);  
    //now prefixing chk to it so that we get the checkbox name
    strSearch="chk"+strSearch;
    //alert (strSearch);
    $(item).each(
        function()
        {
            if ($(this).is(":checked"))
                //replacing the chk followed by the checkbox type to get the IDs
                strIDList+=$(this).attr("id").replace((strSearch),"") + ",";
        }
    )
    //getting the length to negate the last ,
    var strLength=strIDList.length - 1;
    return strIDList.substring(0,strLength);
}

Hope this helps.

Happy Programming!!!

Cheers,

Raja