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();
        }
Advertisements

Permanent Redirect with HTTP 301

How to properly do a permanent redirect with a HTTP 301.

ASP.NET 4.0 gives us this:

ASP.NET 4.0 adds a new RedirectPermanent helper method that makes it easy to issue HTTP 301 Moved Permanently responses, as in the following example:

RedirectPermanent("/newpath/foroldcontent.aspx");

Alternative to <td nowrap>

I found this link to be very helpful for dealing with nowrap.

This may seem trivial but interesting. In the world of compliance with XHTML 1.0 the best approach I have found to the nowrap attribute is in CSS white-space attribute, examples …

<td style="white-space: nowrap;">
<a style="white-space: nowrap;">

http://blogs.msdn.com/mab/archive/2006/01/18/514522.aspx

Posted in CSS, HTML. Tags: , . Leave a Comment »

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;
}

Yahoo! UI Library: TabView – Skinning without using skin class in the Body

I found an issue with the TabView skins and the Body tag.  The examples would lead you to believe that you must have the skin class in the Body tag.   What I found is that you only have to have the skin class in a container such as a DIV.  See below:

Script:

<script type="text/javascript">   
    var myTabs = new YAHOO.widget.TabView("divTabDetails");   
</script>

HTML:

<div class="yui-skin-sam">
	<div id="divTabDetails" class="yui-navset" style="width: 100%">
	    <ul class="yui-nav">
		<li id="tab1" runat="server" class="selected"><a href="javascript:void();"><em>Tab1</em></a></li>
		<li id="tab2" runat="server"><a href="javascript:void();"><em>Tab2</em></a></li>
	   </ul>
	    <div class="yui-content">
		<div id="divTab1"> 
			Tab 1 content	
		</div>
		<div id="divTab2">
			Tab 2 content
		</div>
	    </div>
	</div>
</div>

IE 6 not sending post value of Input type Image

The same issue was reported here and here.

IE 6 doesn’t send the name/value pair for <input type=”image”> elements. It only sends the x/y coordinates.  I don’t have this issue with FireFox.

Why have a value at all if you don’t display it or send it in the post? Because the W3C said so.

This isn’t a issue in ASP.NET(they take care of this with the Commands), but I was working on a ColdFusion side project and was posting forms the old school way.

My solution to this problem is not ideal but the common approach.  I have a hidden form element I set with JavaScript to be inlcuded in the form post.

Posted in HTML. Tags: , . Leave a Comment »