14 Days of jQuery – Marketing Campaign

14 Days of jQuery and the New API Browser

Beginning on January 14th, we’ll start a fourteen-day event. Each day we’ll have fresh videos and announcements — there’ll be code releases, project-related updates, and jQuery UI goodness, among other things. In addition to the announcements, we’ll also be releasing a set of videos over the 14 days with talks and tutorials relating the jQuery 1.4 release and other general jQuery topics. You’ll want to check back at jQuery14.com every day during the two weeks to see what’s new, or sign up to be notified via email. Think of it like an online conference, only longer, freer, and with a bit of mystery and suspense!

Want a free jQuery book:

The jQuery project is a non-profit, open-source effort, and we rely heavily on donations and contributions to help fund everything we do. We’ll be running a fundraising drive starting now and throughout the 14 Days of jQuery. If you’re a jQuery user, show your support by making a tax-deductible donation of $20 USD or more to the project during the event, and you’ll receive a free jQuery book with your donation.

Advertisements

Hierarchical Table Manipulation with jQuery

I recently had to propagate change down a table that represented hierarchical data as well as show and hide columns.  The most important requirement was that the changes should not propagate up any levels, only down.  I have put up a sample on JSBin here that simulates generated HTML from ASP.NET(ie: dynamic control ids).  Most of the manipulation is done with class names.  The show and hide columns could probably have been done better, but you will get the gist.

jQuery functions:

       $(document).ready(function () {
            $('.HideTableDemoTab').click(function () {
                HideTableColumn(this);
            });

            $('.ShowTableDemoTab').click(function () {
                ShowTableColumn(this);
            });

            $('.TableDemoTabShowAll').click(function () {
                ShowAllColumns();
            });

        });

        function PropagateChanges(rowId, inputChanged, inputTarget, level) {
            if ($('.chkPropagate input').attr('checked')) {
                var tableRows = $('.TableDemo > tbody > tr:gt(' + rowId + ')');
                tableRows.each(function () {
                    var tableCells = $(this);
                    var currentLevel = tableCells.find('.Level').val();

                    if (currentLevel < level) {
                        tableCells.find('.' + inputTarget).val($('#' + inputChanged).val());

                    }
                    else {
                        return false; //break out of loop can't change parents

                    }

                });
            }
        }

        function HideTableColumn(column) {
            if (column.id == "tabHideCol1") {
                $("#TableDemo td:nth-child(1)").hide();
            }
            else if (column.id == "tabHideCol2") {
                $("#TableDemo td:nth-child(2)").hide();
            }
            else if (column.id == "tabHideCol3") {
                $("#TableDemo td:nth-child(3)").hide();

            }
        }

        function ShowTableColumn(column) {
            if (column.id == "tabShowCol1") {
                $("#TableDemo td:nth-child(1)").show();
            }
            else if (column.id == "tabShowCol2") {
                $("#TableDemo td:nth-child(2)").show();
            }
            else if (column.id == "tabShowCol3") {
                $("#TableDemo td:nth-child(3)").show();

            }
        }

        function ShowAllColumns() {
            $("#TableDemo td:nth-child(1)").show();
            $("#TableDemo td:nth-child(2)").show();
            $("#TableDemo td:nth-child(3)").show();
        }

jQuery Snippets for Visual Studio 2010

If you know me you know that jQuery is my favorite technology right now.  If you thought it was easy to use already, I have a treat for you.  Check out these jQuery Snippets for Visual Studio 2010 by John Sheehan to boost your jQuery productivity in Visual Studio 2010.

John also has a dedicated page to .NET Cheat Sheets I  print and use all the time.

jQuery selectors lab

Here is a nice site for playing with jQuery selectors.

http://codylindley.com/jqueryselectors/

UpdatePanel Async Postsback slow in IE…Part 3

So, I have received an updated script from Microsoft for KB 2000262.  The issues I found in the last script are now fixed.  In my testing so far it appears to be faster and stable.  The JS function is below, I am sure the KB will be updated soon.

    function disposeTree(sender, args) {
        var elements = args.get_panelsUpdating();
        for (var i = elements.length - 1; i >= 0; i--) {
            var element = elements[i];
            var allnodes = element.getElementsByTagName('*'),
                length = allnodes.length;
            var nodes = new Array(length)
            for (var k = 0; k < length; k++) {
                nodes[k] = allnodes[k];
            }
            for (var j = 0, l = nodes.length; j < l; j++) {
                var node = nodes[j];
                if (node.nodeType === 1) {
                    if (node.dispose && typeof (node.dispose) === "function") {
                        node.dispose();
                    }
                    else if (node.control && typeof (node.control.dispose) === "function") {
                        node.control.dispose();
                    }

                    var behaviors = node._behaviors;
                    if (behaviors) {
                        behaviors = Array.apply(null, behaviors);
                        for (var k = behaviors.length - 1; k >= 0; k--) {
                            behaviors[k].dispose();
                        }
                    }
                }
            }
            element.innerHTML = "";
        }
    }


Part 2
Part 1

Cancel mouse event cross browser

I had an issue this week with a form element that was contained inside a DIV. The DIV had a onclick event as well as the form element. I wanted the form element to do its work and then stop the DIV’s onclick event. Through a lot of searching and help from some co-workers I came up with this script that works pretty well. I have tested it with IE6, IE7 and FF 3.

 <asp:Label ID="lblOptions" onclick="return CancelEventReturnFalse(event);" runat="server" Text="Options"></asp:Label>
function CancelEventReturnFalse(e) {

    try {

        if (e) {
            e.returnValue = false;
            e.cancelBubble = true;

            if (e.stopPropagation) {
                e.stopPropagation();

            }
            if (e.preventDefault) {
                e.preventDefault();
            }

        }

    } catch (c) {alert(c); }

    return false;

}

IE6: Set OBJECT tag width and height dynamically

I had an issue this week with IE6 and the OBJECT tag.  The real issues is supporting IE6, but that’s another battle all together.

I was trying to use percentage based width and height on the OBJECT tag.  In IE6 this always rendered nothing.  IE7 and Firefox worked fine. If I used a fixed width and height for IE6 it worked.

Apparently IE6 did not implement the W3C standard for width and height on the OBJECT tag.

My solution was to use some JavaScript for getting the screen resolution and then calculating the percentage.  It wasn’t what I wanted but it worked.

function SetObjectTagProps(id)
{

    var obj = document.getElementById(id);
    obj.width = (GetWidth() * 0.95);
    obj.height = (GetHeigth() * 0.95);

}

function GetWidth()
{
    var myWidth = 0
    if (typeof (window.innerWidth) == 'number')
    {
        //Non-IE
        myWidth = window.innerWidth;

    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
    {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;

    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight))
    {
        //IE 4 compatible
        myWidth = document.body.clientWidth;

    }
    //alert('Width = ' + myWidth);

    return myWidth;
}

function GetHeigth()
{
    myHeight = 0;
    if (typeof (window.innerWidth) == 'number')
    {
        //Non-IE
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
    {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;

    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight))
    {
        //IE 4 compatible
        myHeight = document.body.clientHeight;

    }

    //alert('Height = ' + myHeight);

    return myHeight;
}