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

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>

Image(img) doesn’t show up on initial page load, FireFox 2.0.0.16

Here is the tag <img src=”images/exampleLogo.gif” />, what is wrong with it? Well, it depends on the browser and DOCTYPE and CSS being used. In this case I was using FireFox 2.0.0.16 , DOCTYPE http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd and some CSS to center my DIV on the screen. The result was that using the img tag without the width and height defined resulted in the image not showing up unless I refreshed the screen. I have had this same issue with Javascript img rollover scripts as well. The reason this happens is because the width and height are not defined.

Does not work:
<img src=”images/exampleLogo.gif” />

Works:
<img src=”images/exampleLogo.gif” width=”100″ height=”30″ />

The DTD(see below for img definition) does not require these attributes, however this is the second time I have seen this issue.

DTD definition for img tag:

<!ELEMENT img EMPTY>
<!ATTLIST img
%attrs;
src %URI; #REQUIRED
alt %Text; #REQUIRED
name NMTOKEN #IMPLIED
longdesc %URI; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
ismap (ismap) #IMPLIED
align %ImgAlign; #IMPLIED
border %Length; #IMPLIED
hspace %Pixels; #IMPLIED
vspace %Pixels; #IMPLIED
>

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