fixed header, problem with alignment, must support all browsers

Greenhorn

Posts: 4

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello there,

I have an issue when i try to fix header for my table, i have one table which is surrounded by a div tag. I also used jquery to calculate width and alignment. I'm also using javascript to add and delete rows dynamically for every onclick event. When i try to add rows dynamically, a horizontal scroll bar will appear and my static header alignment changes. I want my static header alignment should match the dynamic header alignment. The header alignment is working in firefox but it wont works with IE 6 and i dont know abt other IE's whether it supports or not. But my problem is that it must support all browsers.

This is my html
-------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD><TITLE>Stupid Fixed Header for HTML table</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>BODY {
	FONT-SIZE: 12px; LINE-HEIGHT: 1.7em; FONT-FAMILY: Verdana, Arial; LETTER-SPACING: 0px; BACKGROUND-COLOR: #ccc
}
#container {
	PADDING-RIGHT: 2em; PADDING-LEFT: 2em; PADDING-BOTTOM: 2em; MARGIN: 0px auto; WIDTH: 750px; PADDING-TOP: 0.5em; BACKGROUND-COLOR: white
}
H1 {
	MARGIN-TOP: 1em; FONT-SIZE: 2.5em; TEXT-DECORATION: underline
}
H2 {
	BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 1.2em; PADDING-BOTTOM: 3px; BORDER-LEFT: gray 1px solid; COLOR: #555; PADDING-TOP: 3px; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #eee
}
H3 {
	FONT-SIZE: 1.1em
}
PRE {
	BORDER-RIGHT: #aaa 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #aaa 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #aaa 1px solid; PADDING-TOP: 1em; BORDER-BOTTOM: #aaa 1px solid
}
.dataTable {
	BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 12px; BORDER-LEFT: black 1px solid; WIDTH: 750px; BORDER-BOTTOM: black 1px solid; BORDER-COLLAPSE: collapse
}
.dataTable TD {
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; MARGIN: 0px; BORDER-LEFT: black 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: black 1px solid
}

UNKNOWN {
	MARGIN: 1px
}
UNKNOWN {
	MARGIN: 1px
}

</STYLE>

<SCRIPT type=text/javascript>
		$(document).ready(function(){
			$("#data").fixedHeader({
				width: 760,height: 250
			});
		})
		
	</SCRIPT>

<div align="right">
<table halign="right" class=dataTable id=data>
  <THEAD>
  <TR>
    <TH><A 
      href="http://jacky.seezone.net/fixedheader/fixedheader.html#">Name</A></TH>
    <TH><A 
      href="http://jacky.seezone.net/fixedheader/fixedheader.html#">Email</A></TH>
    <TH><A href="http://jacky.seezone.net/fixedheader/fixedheader.html#">Added 
      Date</A></TH>
   </TR></THEAD>
  <TBODY>
  <TR>
    <TD style="WIDTH: 50px">Test</TD>
    <TD>Test Emailzxzxzxzxzxzasasas</TD>
    <TD>16-OCT-2008xxxxxxxxxxxxx</TD>
   </TR>
</TBODY>
</table>
</div>

<SCRIPT type=text/javascript>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
			//alert("rowCount="+rowCount);
            var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);

if(rowCount >10)
			{
				//alert();
				document.getElementById( 'table2' ).style.height="300px";
			}

}

function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }

}
            }catch(e) {
                alert(e);
            }
        }

</SCRIPT>

</BODY></HTML>

I also used jquery with this html.

Please help to solve the issue.

Jay Ganesh

Greenhorn

Posts: 4

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

forgot to add one more thing

jquery.fixedheader.js
-------------------------

(function($){
	
	/* created fixed headers , require jquery dimenions plugins*/
	$.fn.fixedHeader = function(o){
		var s = {adjustWidth: $.fixedHeader.calcWidth};
		if(o) $.extend(s,o);
		
		return this.each(function(){
			var table = $(this); //table
			var tId = this.id;
			
			var scrollBarWidth = $.fixedHeader.getScrollBarWidth();
			var IE6 = $.browser.msie && $.browser.version == '6.0';
			
			//wrap a body container
			var bodyContainer = table.wrap('<div></div>').parent()
				.attr('id', tId + "_body_container")
				.css({
					width: s.width,
					height: s.height,
					overflow: 'auto'
				});
			
			//Wrap with an overall container
			var tableContainer = bodyContainer.wrap('<div></div>').parent()
				.attr('id', tId + '_table_container')
				.css('position','relative');

//clone the header
			var position = table.position();
			var headerContainer = $(document.createElement('div'))
				.attr('id', tId + '_header_container')
				.css({
					width:  bodyContainer.innerWidth() - scrollBarWidth,
					height: table.find('thead').outerHeight(), 
					overflow: 'hidden',
					top: position.top, left:position.left
				})
				.prependTo(tableContainer);
			
			var headerTable = table.clone(true)
				.find('tbody').remove().end()
				.attr('id',tId + "_header")
				.addClass(s.tableClass || table[0].className)
				.css({
					//width: $.browser.msie? table.outerWidth():table.width(), 
					'table-layout':'fixed',
					position:'absolute',
					top:0, left:0
				})
				.append(table.find('thead').clone(true))
				.appendTo(headerContainer);
			
			//sync header width
			var headThs = headerTable.find('th');
			table.find('th').each(function(i){
				headThs.eq(i).css('width', s.adjustWidth(this));
			})
			
			//sync scroll
			var selects = IE6? table.find("select"): null;
			bodyContainer.scroll(function(){
				if(IE6 && selects.size()>0){
					selects.each(function(i){
						this.style.visibility =
							($(this).offset().top - bodyContainer.offset().top) <= table.find("thead").outerHeight() + 10
							? 'hidden':'visible';
					});
				}
				headerTable.css({
					left: '-' + $(this).scrollLeft() + 'px'
				});
			})
			
			//Move it down
			headerContainer.css({
				'position': 'absolute',
				'top': 0
			});
		});
	}
	
	$.fixedHeader = {
		calcWidth: function(th){
			var w = $(th).width();
			var paddingLeft = $.fixedHeader.getComputedStyleInPx(th,'paddingLeft');
			var paddingRight = $.fixedHeader.getComputedStyleInPx(th,'paddingRight');
			var borderWidth = $.fixedHeader.getComputedStyleInPx(th,'borderRightWidth');			
			if($.browser.msie) w = w+borderWidth;
			if($.browser.opera) w = w+borderWidth;
			if($.browser.safari) w = w+paddingLeft+paddingRight+borderWidth*2;
			if($.browser.mozilla && parseFloat($.browser.version) <= 1.8) w=w+borderWidth; //FF2 still got a border-left missing problem, this is the best I can do.
			return w;
		},
		getComputedStyleInPx: function(elem,style){
			var computedStyle = (typeof elem.currentStyle != 'undefined')
				?elem.currentStyle
				:document.defaultView.getComputedStyle(elem, null);
			var val = computedStyle[style];
			val = val? parseInt(val.replace("px","")):0;
			return (!val || val == 'NaN')?0:val;
		},
		getScrollBarWidth: function() { //calculate or get from global the scroll bar width
			if(!$.fixedHeader.scrollBarWidth){ 
				var inner = $(document.createElement('p')).css({width:'100%',height:'100%'});
				var outer = $(document.createElement('div'))
					.css({
						position:'absolute',
						top: '0px',
						left: '0px',
						visibility: 'hidden',
						width: '200px',
						height: '150px',
						overflow: 'hidden'
					})
					.append(inner)
					.appendTo(document.body);
				
				var w1 = inner[0].offsetWidth;
				outer[0].style.overflow = 'scroll';
				var w2 = inner[0].offsetWidth;
				if (w1 == w2) w2 = outer[0].clientWidth;
				document.body.removeChild (outer[0]);
				$.fixedHeader.scrollBarWidth = (w1 - w2);
			}
			return $.fixedHeader.scrollBarWidth;
		}
	}
	
})(jQuery);

I'm full of tinier men! And a tiny ad:

The Low Tech Laboratory Movie Kickstarter is LIVE NOW!

https://www.kickstarter.com/projects/paulwheaton/low-tech