How to apply a carousel effect to a table in Bootstrap? - javascript

We can make table scrollable by adding table-responsive class to it, but how can we loop it so that once the loop ends, first column will follow the last column as if it is the adjacent column. (this doesn't happen when we apply marquee)


Im not sure this is what you were looking for, but it sounded like a cool idea. Heres what I came up with for a "Carousel Effect on a Table" (which is what i think you were asking). Run the code snippet to see the effect. You might need to alter the css a little to get a seamless scroll effect.
var $table = $('.table-wrapper table');
var leftTimeout, left = $('.left');
function scrollLeft(){
$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()-50);
$.each($table.find('tr'),function(){
$(this).children().last().detach().prependTo(this);
});
}
left.mousedown(function(){
scrollLeft();
leftTimeout = setInterval(function(){
scrollLeft();
}, 500);
return false;
});
$(document).mouseup(function(){
clearInterval(leftTimeout);
return false;
});
var rightTimeout, right = $('.right');
function scrollRight(){
$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()+50);
$.each($table.find('tr'),function(){
$(this).children().first().detach().appendTo(this);
});
}
right.mousedown(function(){
scrollRight();
leftTimeout = setInterval(function(){
scrollRight();
}, 500);
return false;
});
$(document).mouseup(function(){
clearInterval(rightTimeout);
return false;
});
.table-wrapper
{
border: 1px solid red;
width: 200px;
height: 150px;
overflow:hidden;
}
table
{
border: 1px solid black;
margin-right: 20px;
}
td
{
min-width: 50px;
height: 20px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
<table>
<tr>
<th>1h</th>
<th>2h</th>
<th>3h</th>
<th>4h</th>
<th>5h</th>
<th>6h</th>
<th>7h</th>
<th>8h</th>
<th>9h</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
<button class='left'><</button>
<button class='right'>></button>

Related

How to remove class at serial cells in html tables

Some event were registered in calendar like html tables.
I would like to unregister these event by clicking them.
To realize this,I would like to removeclass continuous cells. like
When we click3or4,then 3,4 cell's class will be removed.
When we click 13or14or15,then 13,14,15 cell's class will be removed.
When we click 9, then only 9 cell's class will be removed.
Is it possible?
and are there any way to realize it?
Thanks
$(function() {
$("td").click(function() {
$(this).removeClass();
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

You can first use .closest() to target the parent tr element then use .find() to target all the element with the class aqua to remove them:
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

If you just change your script like below. Your code will work perfectly according to your requirement.
$(function() {
$("tr").click(function() {
$(this).children().removeClass();
});
});
or else you can change like below as well. It also work perfectly.
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
Best Answer is using second method.

You can simply target only the cells having that aqua class to achieve this, instead of targeting every cell. Then using .closest('tr') find the closest parent tr for the clicked cell and after that using .find('td.aqua') find all the cells having the class aqua and then finally remove the class from each of them.
$(function() {
$("td.aqua").click(function() {
$(this).closest('tr').find('td.aqua').removeClass('aqua');
});
});
td{transition-duration:.5s;border:solid #000 1px;padding:10px;text-align:center}
table{border-collapse:collapse}
.aqua{background-color:#0ff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

if you want to remove aqua class when clicking each row then use this
$(function() {
$("tr").click(function() {
$(this).children().removeClass('aqua');
});
});
OR when clicking on the cells themselves use this
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

Fixed row inside a horizontally scrollable table

I have a very long table with horizontal scrolling. Is it possible to implement a fixed row inside this table without horizontal scroll.
<div class="container" style="width:500px;height:100px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;height:200px;left:0;right:0">
<td colspan="7" style="width:500px;">
<div id="noscroll" style="display: inline-block;">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
EDIT: What if I need two cell in the fixed row?
<tr class="fixed-row">
<td colspan="3">
A row unaffected by
</td>
<td colspan="3">
horizontal scroll
</td>
</tr>
https://jsfiddle.net/7nz6ys2m/2/

Try the following:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0">
<td colspan="7" style="width:500px;height:22px;position: relative;">
<div id="noscroll" style="display: inline-block;position: fixed;transform: translateY(-50%);">
A row unaffected by horizontal scroll
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
What I did:
Give the noscroll-div position:fixed; and reset its position with transform. Then I set the height of its parent td to a fixed height of 22px (the other td are all 22px) and set its position to relative.
In case you need multiple td in the fixed row, I would rather take multiple div inside one td, and float them left. see this:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0;height:22px;position: relative;">
<td style="position: fixed;" colspan="7">
<div style="width:250px;float: left;">
test1
</div>
<div style="width:250px;float:left;">
test2
</div>
</div>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>

With a little bit of jQuery, we can get the behavior with safe vertical scrolling.
<div class="container" style="width:500px;height:300px;overflow:auto;">
<table style="width:1500px;height:500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr style="">
<td colspan="6" style="">
<div class="fixed-row">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(".container").scroll(function () {
$(".fixed-row").css("margin-left",$(".container").scrollLeft() + "px");
});
</script>
<style>
table{
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.fixed-row {
display: inline-block;
width: 500px;
text-align: center;
}
</style>
https://jsfiddle.net/7nz6ys2m/4/

Select Html row and get selected data

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
And my javascript codes
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
} else {
tableRow.style.backgroundColor = 'white';
}
}
</script>

You can select all td of selected row and get the innerHTML of each td.
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

You can do the same thing with pure CSS.
Below is an example, where I have used hover class for true
tr{
background: grey;
}
tr:hover{
background: white;
}
.hover:hover{
background:#dcfac9;
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1" class="hover"
onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"
onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3" class="hover"
onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.
$('#example tr').click(function() {
var values = $(this).find('td').map(function() {
return $(this).text();
}).get();
console.log(values);
});
table tr:hover {
background-color: #dcfac9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script language="javascript">
function readValues(evt){
var elem = evt.target.parentElement;
console.log(elem); //elem contains current tr element's data
}
var elem = document.querySelectorAll("#example tr");
for(var i=0;i<elem.length;i++){
bindMe(elem[i]);
}
function bindMe(elem){
elem.addEventListener("click", function(evt){
readValues(evt);
});
}
</script>
jsfiddle: https://jsfiddle.net/rxvjmvzh/

Jquery conditional selector for TD

I want to be able to add a class to a TR element, dependent on the value of the first TD element.
For example:
If I have the following array of data:
[1,2,3,4]
[5,6,7,8]
Where each array represents a tr, with each element being a td, I would like to highlight the TR where the first TD equals 5 for instance.
How would i go about doing this?
Thanks,

Below example can help!
$(function() {
var tr = $('tr').find('td:first-child');
tr.each(function() {
if ($(this).text() == 5)
$(this).parent('tr').addClass('highlight');
});
});
tr.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>

I managed to solve this by using the fnRowCallback function
'fnRowCallback': function(nRow, aData, iDisplayIndex) {
$(nRow).css('cursor', 'pointer');
$(nRow).prop('title', 'Select Company');
if (aData.CompId === "COMP01") {
$(nRow).find('td').addClass('selectedCompany');
}
return nRow;
},

You can use first-child and :contains with Jquery
$('td:first-child:contains("5")').parent('tr').addClass('selected')
tr.selected {
background: yellow;
}
tr.selected td:first-child {
font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
</tr>
</table>
Edit Note:: This will select all first td with 5 on the string

Assume the content of the desired row td is "two", either of these would work:
$(document).ready(function() {
var findMe = "two";
$('#mytable').find('tr').filter(function(index) {
var isTwo = $(this).find('td').eq(0).text() === findMe;
return isTwo;
}).addClass('highlight');
$('#mytable').find('tr').find('td:first').filter(':contains("' + findMe + '")').parent('tr').addClass('highlight');
});

Pure CSS/HTML/Javascript 2D Scrollable table with fixed column and header

I have a large table which might need to scroll both horizontally and vertically. I have seen lots of solutions for this but haven't found one that works that doesn't rely on jscript or similar. It seems like it should be doable but I've come up with problems. I think I can get the header row ok, but I am having trouble with the fixed column. I can't seem to get my body to extend beyond the viewport and my code is rendering very differently on IE8 and Firefox.
Can anyone give me any guidance?
<html>
<head>
<script type="text/javascript">
function windowwidth(){
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
}
return myWidth ;
}
function windowheight(){
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
return myHeight ;
}
function pageloader(){
var leftwidth=document.getElementById('left').offsetWidth;
document.getElementById('right').style.marginLeft=leftwidth+'px';
}
</script>
<style>
div{ border:solid; }
.left{ position:absolute; }
.right{ position:float-left; margin-left:50px;}
table,td{ border:solid; }
td{ width:200px; }
tr{ height:50px; }
</style>
</head>
<body onload='pageloader();'>
<div name=left id=left class=left>
<table>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</table>
</div>
<div name=right id=right class=right>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</body>
</html>

I worked on it further though and came up with this solution. It works pretty well and is even pretty flexible. I think it's the best solution I've seen. Please let me know if you know of something better or know of a way to improve it.
The only thing I've found impossible to fix is the vertical-align which has to be top. Does anyone know of a decent, simple solution that makes IE8 respect vertical-align center for a td with a height?
Here is the demo: http://maymay.de/demos/table.html
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
function pageloader(){
// get sizes of boxes
var leftys=document.getElementById('left').getElementsByTagName('td');
var lefty=leftys[0];
var barys=document.getElementById('topbar').getElementsByTagName('td');
var bary=barys[0];
var boxys=document.getElementById('topleft').getElementsByTagName('td');
var boxy=boxys[0];
var leftwidth=lefty.offsetWidth;
var topheight=bary.offsetHeight;
var boxwidth=boxy.offsetWidth;
var boxheight=boxy.offsetHeight;
if(topheight>boxheight){
var newtopheight=topheight;
var newinnerheight=bary.clientHeight-parseInt(getStyle(bary, "padding-top"))-parseInt(getStyle(bary, "padding-bottom"));
}else{
var newtopheight=boxheight;
var newinnerheight=boxy.clientHeight-parseInt(getStyle(boxy, "padding-top"))-parseInt(getStyle(boxy, "padding-bottom"));
}
// set new width for left column
if(leftwidth>boxwidth){
var newleftwidth=leftwidth;
var newinnerwidth=lefty.clientWidth-parseInt(getStyle(lefty, "padding-left"))-parseInt(getStyle(lefty, "padding-right"));
}else{
var newleftwidth=boxwidth;
var newinnerwidth=boxy.clientWidth-parseInt(getStyle(boxy, "padding-left"))-parseInt(getStyle(boxy, "padding-right"));
}
// apply widths and heights and margins
// alert ("newleftwidth: "+newleftwidth+" newtopheight: "+newtopheight+"\nnewinnerheight: "+newinnerheight+" newinnerwidth: "+newinnerwidth);
boxy.style.height=newinnerheight+'px';
bary.style.height=newinnerheight+'px';
boxy.style.width=newinnerwidth+'px';
lefty.style.width=newinnerwidth+'px';
document.getElementById('left').style.marginTop=newtopheight+'px';
document.getElementById('topbar').style.marginLeft=newleftwidth+'px';
document.getElementById('right').style.marginLeft=newleftwidth+'px';
document.getElementById('right').style.marginTop=newtopheight+'px';
// fix column widths and rowheights
colsync();
rowsync();
calcright();
// alert ("leftwidth: "+newleftwidth+" topheight: "+newtopheight);
}
function scrolling(){
if (window.pageXoffset) {
var xscroll=window.pageXoffset;
} else if (document.body.scrollLeft) {
var xscroll=document.body.scrollLeft;
} else if (document.body.parentElement.scrollLeft) {
var xscroll=document.body.parentElement.scrollLeft;
} else if (document.body.parentNode.scrollLeft) {
var xscroll=document.body.parentNode.scrollLeft;
} else {
var xscroll=0;
}
if (window.pageYoffset) {
var yscroll=window.pageYOffset;
} else if (document.body.scrollTop) {
var yscroll=document.body.scrollTop;
} else if (document.body.parentElement.scrollTop) {
var yscroll=document.body.parentElement.scrollTop;
} else if (document.body.parentNode.scrollTop) {
var yscroll=document.body.parentNode.scrollTop;
} else {
var yscroll=0;
}
var leftwidth=document.getElementById('left').offsetWidth;
var topheight=document.getElementById('topbar').offsetHeight;
var newleftmargin=leftwidth-xscroll;
var newtopmargin=topheight-yscroll;
document.getElementById('left').style.top=-yscroll+'px';
document.getElementById('topbar').style.left=-xscroll+'px';
}
function info(){
}
function calcright(){
// resize page to shrink to fit
var rchildrenr = document.getElementById('right').getElementsByTagName('tr');
var rchildrend = rchildrenr[1].getElementsByTagName('td');
var rcols = rchildrend.length;
var rsum = 0;
for (i=0;i<rchildrend.length;i++) {
rsum = rchildrend[i].offsetWidth;
}
document.getElementById('topbar').style.width=rchildrenr[1].offsetWidth+'px';
document.getElementById('right').style.width=rchildrenr[1].offsetWidth+'px';
}
function colsync(){
var topcells = document.getElementById('topbar').getElementsByTagName('td');
var rightrows = document.getElementById('right').getElementsByTagName('tr');
var rightcells = rightrows[1].getElementsByTagName('td');
var mypads=0;
for (i=0;i<topcells.length;i++) {
if (topcells[i].offsetWidth>rightcells[i].offsetWidth) {
mypads=parseInt(getStyle(rightcells[i], "padding-left"))+parseInt(getStyle(rightcells[i], "padding-right"));
rightcells[i].style.width=topcells[i].clientWidth-mypads+'px';
}else{
mypads=parseInt(getStyle(topcells[i], "padding-left"))+parseInt(getStyle(topcells[i], "padding-right"));
topcells[i].style.width=rightcells[i].clientWidth-mypads+'px';
}
}
}
function rowsync(){
var leftcells = document.getElementById('left').getElementsByTagName('td');
var rightrows = document.getElementById('right').getElementsByTagName('tr');
var mypads=0;
for (i=0;i<leftcells.length;i++) {
rightcells=rightrows[i].getElementsByTagName('td');
if (leftcells[i].offsetHeight>rightcells[i].offsetHeight) {
mypads=parseInt(getStyle(rightcells[i], "padding-top"))+parseInt(getStyle(rightcells[i], "padding-bottom"));
rightcells[i].style.height=leftcells[i].clientHeight-mypads+'px';
// if (i==1) alert (leftcells[i].clientHeight);
}else{
mypads=parseInt(getStyle(leftcells[i], "padding-top"))+parseInt(getStyle(leftcells[i], "padding-bottom"));
leftcells[i].style.height=rightcells[i].clientHeight-mypads+'px';
// if (i==1) alert (leftcells[i].clientHeight);
}
}
}
window.onscroll = scrolling;
</script>
<style>
body{ margin:0; }
div{ border:none; }
.left{ position:fixed; background-color:White; z-index:0;}
.topleft{ position:fixed; background-color:White; z-index:1;}
.topbar{ position:fixed; background-color:White; width:1000000px; z-index:0;}
.right{ position:absolute; margin-left:50px; width:1000000px; z-index:-1;}
table{ border:none; border-spacing:0px;}
td{ border:solid; border-width:1px; width:5px; padding:2px; vertical-align:top; text-align:center;}
tr{ height:5px; }
</style>
</head>
<body onload='pageloader();'>
<div name=topleft id=topleft class=topleft onclick=info(); >
<table id=tabletable>
<tr><td>Fixed Block</td></tr>
</table>
</div>
<div name=left id=left class=left>
<table>
<tr><td>Row-0</td></tr>
<tr><td>Row-1</td></tr>
<tr><td>Row-2</td></tr>
<tr><td>Row-3</td></tr>
<tr><td>Row-4</td></tr>
<tr><td>Row-5</td></tr>
<tr><td>Row-6</td></tr>
<tr><td>Row-7</td></tr>
<tr><td>Row-8</td></tr>
<tr><td>Row-9</td></tr>
</table>
</div>
<div name=topbar id=topbar class=topbar>
<table>
<tr>
<td>Cola</td>
<td>Colb</td>
<td>Colc</td>
<td>Cold</td>
<td>Cole</td>
<td>Colf</td>
<td>Colg</td>
<td>Colh</td>
<td>Coli</td>
<td>Colj</td>
</tr>
</table>
</div>
<div name=right id=right class=right>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
</tr>
<tr>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
</tr>
<tr>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
</tr>
<tr>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
</tr>
<tr>
<td>90</td>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
</tr>
</table>
</div>
</body>
</html>

Categories

Resources