if someone know cssanimation.io, i have a little problem..
How can i set the animation-delay? I put it everywhere but the animation always starting when i reload the page rather than after 5s
You can set animationdelay delay = 5000;
change delay in below code from 100(default) to 5000(5s)
window.onload = function () {
splitText()
};
function splitText() {
var a = document.getElementsByClassName('cssanimation');
for (var i = 0; i < a.length; i++) {
var $this = a[i];
var letter = $this.innerHTML;
letter = letter.trim();
var str = '';
var delay = 5000;
for (l = 0; l < letter.length; l++) {
if (letter[l] != ' ') {
str += '<span style="animation-delay:' + delay + 'ms; -moz-animation-delay:' + delay + 'ms; -webkit-animation-delay:' + delay + 'ms; ">' + letter[l] + '</span>';
delay += 150;
}
else
str += letter[l];
}
$this.innerHTML = str;
}
}
DEMO
Related
I have a JavaScript timer here, and I am trying to remove the white-space around the numbers so that the entire timer is green.
I have tried using CSS to remove the white-space but have had no luck. I am unsure whether CSS or JS has to be used to remove the space.
This is the code for the timer
An image can be found here
I just want to remove the white-space around the numbers. Thanks
var flagclock = 0;
var flagstop = 1;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
var thetable = document.getElementById("timerTable");
// Adjust limits and colors here
// Specify limits in seconds
var limit1 = 0;
color1 = "lightgreen";
var limit2 = 360;
color2 = "orange";
var limit3 = 600;
color3 = "red";
function startstop() {
var startdate = new Date();
var starttime = startdate.getTime();
if (flagclock == 0) {
startstop.value = 'Stop';
flagclock = 1;
counter(starttime);
} else {
startstop.value = 'Start';
flagclock = 0;
flagstop = 1;
splitdate = '';
}
}
function counter(starttime) {
output = document.getElementById('output');
clock = document.getElementById('clock');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if (flagstop == 1) {
timediff = timediff + stoptime
}
if (flagclock == 1) {
clock.value = formattime(timediff, '');
refresh = setTimeout('counter(' + starttime + ');', 100);
var secs = timediff / 1000;
var thecolor = "white";
if (secs > limit3) thecolor = color3;
else if (secs > limit2) thecolor = color2;
else if (secs > limit1) thecolor = color1;
thetable.style.backgroundColor = thecolor;
console.log(timediff / 1000)
} else {
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime, roundtype) {
if (roundtype == 'round') {
var ds = Math.round(rawtime / 100) + '';
} else {
var ds = Math.floor(rawtime / 100) + '';
}
var sec = Math.floor(rawtime / 1000);
var min = Math.floor(rawtime / 60000);
ds = ds.charAt(ds.length - 1);
if (min >= 15) {
startstop();
}
sec = sec - 60 * min + '';
if (sec.charAt(sec.length - 2) != '') {
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
} else {
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if (min.charAt(min.length - 2) != '') {
min = min.charAt(min.length - 2) + min.charAt(min.length - 1);
} else {
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec;
}
<body onload="startstop();">
<table id="timerTable">
<tr>
<td>
<input class="timerArea" id="clock" type="text" value="00:00" style="text-align:center;font-weight:bold;font-size:14pt;" readonly><br>
</td>
</tr>
</table>
</body>
In order to make the entire timer green, you can set the CSS property background-color of the <input> element to "transparent". I've also removed the element's default border.
.timerArea {
text-align: center;
font-weight: bold;
font-size: 14pt;
background-color: transparent;
border: none;
}
Here's a demonstration:
var flagclock = 0;
var flagstop = 1;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
var thetable = document.getElementById("timerTable");
// Adjust limits and colors here
// Specify limits in seconds
var limit1 = 0;
color1 = "lightgreen";
var limit2 = 360;
color2 = "orange";
var limit3 = 600;
color3 = "red";
function startstop() {
var startdate = new Date();
var starttime = startdate.getTime();
if (flagclock == 0) {
startstop.value = 'Stop';
flagclock = 1;
counter(starttime);
} else {
startstop.value = 'Start';
flagclock = 0;
flagstop = 1;
splitdate = '';
}
}
function counter(starttime) {
output = document.getElementById('output');
clock = document.getElementById('clock');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if (flagstop == 1) {
timediff = timediff + stoptime
}
if (flagclock == 1) {
clock.value = formattime(timediff, '');
refresh = setTimeout('counter(' + starttime + ');', 100);
var secs = timediff / 1000;
var thecolor = "white";
if (secs > limit3) thecolor = color3;
else if (secs > limit2) thecolor = color2;
else if (secs > limit1) thecolor = color1;
thetable.style.backgroundColor = thecolor;
console.log(timediff / 1000)
} else {
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime, roundtype) {
if (roundtype == 'round') {
var ds = Math.round(rawtime / 100) + '';
} else {
var ds = Math.floor(rawtime / 100) + '';
}
var sec = Math.floor(rawtime / 1000);
var min = Math.floor(rawtime / 60000);
ds = ds.charAt(ds.length - 1);
if (min >= 15) {
startstop();
}
sec = sec - 60 * min + '';
if (sec.charAt(sec.length - 2) != '') {
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
} else {
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if (min.charAt(min.length - 2) != '') {
min = min.charAt(min.length - 2) + min.charAt(min.length - 1);
} else {
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec;
}
startstop();
.timerArea {
text-align: center;
font-weight: bold;
font-size: 14pt;
background-color: transparent;
border: none;
}
<table id="timerTable">
<tr>
<td>
<input class="timerArea" id="clock" type="text" value="00:00" readonly><br>
</td>
</tr>
</table>
I have a Google Sheets file which calls Google Analytics and pulls metrics. This works great. What I want to do is pull metrics by channel so that the far left column is a collection of channels (PPC, Display, Organic, Social, Email, Referral, Affiliate, Direct). Do I need to use the Multi-Channel Funnel setup? Or is there a better way to do this?
function getGAData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("test Data");
// var startDate = dateToYMD(sheet.getRange(3,3).getValue());
// var endDate = dateToYMD(sheet.getRange(3,4).getValue());
var dateRanges = readDateRanges(sheet);
var profileIds = readProfileIds(sheet);
var GAMetrics = readGAMetrics(sheet);
var results = [];
var metrics = [];
var optArgs = [];
var filterCount = 0;
var prevFilter = '**NONE**';
var i, j, k;
var profileResults;
var tempResults;
for (i = 0; i < GAMetrics[0].length; i++) {
// Utilities.sleep(100);
if (prevFilter != GAMetrics[1][i]) {
metrics[filterCount] = GAMetrics[0][i];
optArgs[filterCount] = {
'start-index': '1',
'max-results': '10' // Display the first 250 results.
};
if (GAMetrics[1][i] != '')
optArgs[filterCount].filters = GAMetrics[1][i];
if (GAMetrics[2][i] != '')
optArgs[filterCount].segment = GAMetrics[2][i];
filterCount++;
} else {
metrics[filterCount-1] = metrics[filterCount-1] + ',' + GAMetrics[0][i];
}
prevFilter = GAMetrics[1][i];
}
for (i = 0; i < profileIds.length; i++) { // get GA data for each of the rows of input
profileResults = [];
var tableId = 'ga:' + profileIds[i][0];
var startDate = dateToYMD(dateRanges[i][0]);
var endDate = dateToYMD(dateRanges[i][1]);
for (j = 0; j < metrics.length; j++) {
var metric = metrics[j];
var options = optArgs[j];
//var options = {
// 'dimensions': 'ga:source',
//};
try {
// Make a request to the API.
tempResults = Analytics.Data.Ga.get(
'ga:' + profileIds[i][0], // Table id (format ga:xxxxxx).
dateToYMD(dateRanges[i][0]), // Start-date (format yyyy-MM-dd).
dateToYMD(dateRanges[i][1]), // End-date (format yyyy-MM-dd).
metrics[j], // Comma seperated list of metrics.
optArgs[j]);
var report = Analytics.Data.Ga.get(tableId, startDate, endDate, metric,
options);
if (typeof tempResults.getRows() != 'undefined')
appendArray(profileResults, tempResults.getRows()[0]);
} catch (e) {
Logger.log(e + ' - Profile ID: ' + profileIds[i][0] + ' - Metrics: ' + metrics[j] );
}
}
//append Profile results to the set
for (k = profileResults.length; k < GAMetrics[0].length; k++)
profileResults[k] = '0';
results.push(profileResults);
// Utilities.sleep(200);
}
sheet.getRange(6, 13, results.length, GAMetrics[0].length).setValues(results); // populate results on spreadsheet
emailLog('don#test.com','startDate');
}
function readDateRanges(sheet){
var rowStart = 6;
var columnStart = 1;
var numRows = sheet.getLastRow() - rowStart + 1;
return sheet.getRange(rowStart, columnStart, numRows, 2).getValues();
}
function readProfileIds(sheet) {
var rowStart = 6;
var columnStart = 3;
var numRows = sheet.getLastRow() - rowStart + 1;
return sheet.getRange(rowStart, columnStart, numRows, 1).getValues();
}
function readGAMetrics(sheet) {
var rowStart = 2;
var columnStart = 13;
var numColumns = sheet.getLastColumn() - columnStart + 1;
return sheet.getRange(rowStart, columnStart, 3, numColumns).getValues();
}
function dateToYMD(date) {
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}
function appendArray(a1,a2) {
var startSize = a1.length;
for (var i = 0; i < a2.length; i++)
a1[startSize + i] = a2[i];
}
function emailLog(emailAddress,reportDate) {
var recipient = emailAddress; // Session.getActiveUser().getEmail();
var subject = 'GA Data Pull - extract for ' + reportDate;
var body = Logger.getLog();
MailApp.sendEmail(recipient, subject, body);
}
and thank you once again for your expert support. I have a rather nice implementation of flot, that has one very unfortunate bug. The plot routine works in a loop, so it creates as many plots as there are data files, that pass muster, in the directory. If there is only one data file, then only one plot, the resulting flot plot works fine and the check boxes turn the lines on and off as expected. If I have more than one data file and hence more than one flot plot.. only the bottom one seems to work correctly, the remainder lock up after either one toggle or none.
Can someone give me an idea how to create the flot plots so they do not interfere? I have read elsewhere that the function name does not need to be different, but have not verified this, and I did change the labels, but this added additional weirdness.
Quite a long code.. but it gives you most of what I know...
The first section here actually builds the data sets for flot... then the rest creates the plot...
<script type='text/javascript'>//<![CDATA[
$(function(){
var results = [
<?php
$downsample = 5;
for($k=0;$k<2; $k++){
//$k =0 is Left, $k = 1 is right
if ($k==0){
$side = "L";
$offset = 1;
} elseif ($k==1) {
$side = "R";
$offset = 0;
}
for ($m = 1; $m <= count($trackdata)-1; $m++){
echo "\n{\n\"label\": \"".$m.$side."\",\n"; //echo "\n{\n\"label\": \"".$m." ".$side."\",\n";
echo "\"data\": [";
for ($n=1;$n<=count($PSD[$m*3-2]);$n=$n+$downsample){
$tmp = "[".$PSD[$m*3-2][$n].",".$PSD[$m*3-$offset][$n]."]";
echo $tmp;
if ($n > count($PSD[$m*3-2])-$downsample){
echo "]}";
} else {
echo ",";
}
}
if ($m <> count($trackdata)-1){
echo ",";
} else if ($k<1){
echo ",";
}
}
}
echo "];";
?>
var options = {
legend: {
show: true
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxis: {
},
yaxis: {
}
};
var i = 0;
var track = 0;
choiceContainer = $("#labeler<?php echo $i ?>");
var table = $('<table />');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == <?php echo $tracks ?>){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
} //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){
//}
cell = $('<td width=\"60\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot($("#placeholder<?php echo $i ?>"), data, options);
}
var previousPoint = null;
$("#placeholder<?php echo $i ?>").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
});//]]>
</script>
Okay.. so the dust settled and I did sort out my issue, along with cleaning up a few things. First of all, I created a function for the plot routine. This uncovered the issue I was having, where I was reusing the same variables for the divs into which the data was going, hence the mixed up results. By creating the function, and then driving the function with custom variables for each iteration, the plots operate independently as they should. – Mark
function flotplot(results, choiceContainer, plotholder, numtracks, legendcontainer){
// pass in results, choicecontainer, plotholder
// results = data
// choiceContainer = $("#labeler1");
// plotholder = $("#placeholder0");
var options = {
legend: {
show: true,
container: legendcontainer,
noColumns: 2,
sorted: false
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxes: [{
axisLabel: 'Frequency (Hz)',
}],
yaxes: [{
axisLabel: 'Power (dB)',
}],
crosshair: {
mode: "xy",
color: 001,
lineWidth: .5
}
};
var i = 0;
var track = 0;
var table = $('<table />');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == numtracks){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
} //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){
//}
cell = $('<td width=\"70\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot(plotholder, data, options);
}
var previousPoint = null;
plotholder.bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " " + y + "dB");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
};//]]>
Here is the structure into which it writes:
echo "<div id=\"placeholder".$i."\" class=\"loading\" style=\"width:600px;height:300px;display: inline; position: relative; float: left\"></div>";
echo "<div id=\"legendholder".$i."\" class=\"loading\" style=\"width:200px; height:300px; display: inline; position: relative; float: left\"></div>";
echo "<div id=\"picker1\" style=\"clear: both\"><p id=\"choices".$i."\">Show the following Tracks:</p></div>";
echo "<div id=\"labeler".$i."\"></div>";
I have wriiten a javascript which I am using it onblur event of textbox which is inside a gridview. The same script should fire for me when I perform SelectedIndexChanging of gridview. This is my script
<script type="text/javascript">
function total(txtQuantity, txtRate, txtAmount) {
var col1;
var totalcol1 = 0;
var weight = document.getElementById(txtQuantity).value;
var rate = document.getElementById(txtRate).value;
var tot = weight * rate;
document.getElementById(txtAmount).value = tot.toFixed(2).toString();
var grid = document.getElementById('<%=grdInvoice.ClientID %>');
for (i = 0; i < grid.rows.length; i++) {
col1 = grid.rows[i].cells[4];
//col2 = grid.rows[i].cells[1];
for (j = 0; j < col1.childNodes.length; j++) {
if (col1.childNodes[j].type == "text") {
if (!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "") {
totalcol1 += parseInt(col1.childNodes[j].value)
}
}
}
}
document.getElementById('<%= lblTotal.ClientID %>').innerHTML = totalcol1.toFixed(2).toString();
document.getElementById('<%=lblResultbalance.ClientID%>').innerHTML = totalcol1.toFixed(2).toString();
document.getElementById('<%=TextBox1.ClientID%>').value = totalcol1.toFixed(2).toString();
}
Can some one help me
Try this in your event
ScriptManager.RegisterStartupScript(this, GetType(), "script", "total('" + txt1.ClientID + "','" + txt2.ClientID + "','" + txt3.ClientID + "')", true);
I have 4 tables that need to scroll, they are set up as follows:
Table1(static)
Table2(Horizontal Scrolling)
Table3(Vertical Scrolling)
Table4(Horizontal and Vertical Scrolling)
Table1 Table2
Table3 Table4
The tricky part of this is that Table 3 and 4 need to keep in sync as this is a listing of data broken out into two tables. Table 2 and 4 are in the same situation.
Any ideas?
No Javascript please as we have a script that works, but it is far too slow to work.
Thanks.
EDIT:
var tables = new Array();
var headerRowDivs = new Array();
var headerColumnDivs = new Array();
var bodyDivs = new Array();
var widths = new Array();
var heights = new Array();
var borderHorizontals = new Array();
var borderVerticals = new Array();
var tableWidths = new Array();
var tableHeights = new Array();
var arrayCount = 0;
var paddingTop = 0;
var paddingBottom = 0;
var paddingLeft = 0;
var paddingRight = 0;
function ScrollTableAbsoluteSize(table, width, height)
{
ScrollTable(table, null, null, width, height);
}
function ScrollTableRelativeSize(table, borderHorizontal, borderVertical)
{
ScrollTable(table, borderHorizontal, borderVertical, null, null);
}
function ScrollTable(table, borderHorizontal, borderVertical, width, height)
{
var childElement = 0;
if (table.childNodes[0].tagName == null)
{
childElement = 1;
}
var cornerDiv = table.childNodes[childElement].childNodes[0].childNodes[childElement].childNodes[childElement];
var headerRowDiv = table.childNodes[childElement].childNodes[0].childNodes[(childElement + 1) * 2 - 1].childNodes[childElement];
var headerColumnDiv = table.childNodes[childElement].childNodes[childElement + 1].childNodes[childElement].childNodes[childElement];
var bodyDiv = table.childNodes[childElement].childNodes[childElement + 1].childNodes[(childElement + 1) * 2 - 1].childNodes[childElement];
tables[arrayCount] = table;
headerRowDivs[arrayCount] = headerRowDiv;
headerColumnDivs[arrayCount] = headerColumnDiv;
bodyDivs[arrayCount] = bodyDiv;
borderHorizontals[arrayCount] = borderHorizontal;
borderVerticals[arrayCount] = borderVertical;
tableWidths[arrayCount] = width;
tableHeights[arrayCount] = height;
ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv);
widths[arrayCount] = bodyDiv.offsetWidth;
heights[arrayCount] = bodyDiv.offsetHeight;
arrayCount++;
ResizeScrollArea();
bodyDiv.onscroll = SyncScroll;
if (borderHorizontal != null)
{
window.onresize = ResizeScrollArea;
}
}
function ResizeScrollArea()
{
var isIE = true;
var scrollbarWidth = 17;
if (!document.all)
{
isIE = false;
scrollbarWidth = 19;
}
for (i = 0; i < arrayCount; i++)
{
bodyDivs[i].style.overflow = "scroll";
bodyDivs[i].style.overflowX = "scroll";
bodyDivs[i].style.overflowY = "scroll";
var diffWidth = 0;
var diffHeight = 0;
var scrollX = true;
var scrollY = true;
var columnWidth = headerColumnDivs[i].offsetWidth;
if (borderHorizontals[i] != null)
{
var width = document.documentElement.clientWidth - borderHorizontals[i] - columnWidth;
}
else
{
var width = tableWidths[i];
}
if (width > widths[i])
{
width = widths[i];
bodyDivs[i].style.overflowX = "hidden";
scrollX = false;
}
var columnHeight = headerRowDivs[i].offsetHeight;
if (borderVerticals[i] != null)
{
var height = document.documentElement.clientHeight - borderVerticals[i] - columnHeight;
}
else
{
var height = tableHeights[i];
}
if (height > heights[i])
{
height = heights[i];
bodyDivs[i].style.overflowY = "hidden";
scrollY = false;
}
headerRowDivs[i].style.width = width + "px";
headerRowDivs[i].style.overflow = "hidden";
headerColumnDivs[i].style.height = height + "px";
headerColumnDivs[i].style.overflow = "hidden";
bodyDivs[i].style.width = width + scrollbarWidth + "px";
bodyDivs[i].style.height = height + scrollbarWidth + "px";
if (!scrollX && isIE)
{
bodyDivs[i].style.overflowX = "hidden";
bodyDivs[i].style.height = bodyDivs[i].offsetHeight - scrollbarWidth + "px";
}
if (!scrollY && isIE)
{
bodyDivs[i].style.overflowY = "hidden";
bodyDivs[i].style.width = bodyDivs[i].offsetWidth - scrollbarWidth + "px";
}
if (!scrollX && !scrollY && !isIE)
{
bodyDivs[i].style.overflow = "hidden";
}
}
}
function ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv)
{
var childElement = 0;
if (table.childNodes[0].tagName == null)
{
childElement = 1;
}
SetWidth(
cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[0]);
SetHeight(
cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement]);
var headerRowColumns = headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
var bodyColumns = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
for (i = 0; i < headerRowColumns.length; i++)
{
if (headerRowColumns[i].tagName == "TD" || headerRowColumns[i].tagName == "TH")
{
SetWidth(
headerRowColumns[i],
bodyColumns[i],
i == headerRowColumns.length - 1);
}
}
var headerColumnRows = headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes;
var bodyRows = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes;
for (i = 0; i < headerColumnRows.length; i++)
{
if (headerColumnRows[i].tagName == "TR")
{
SetHeight(
headerColumnRows[i].childNodes[0],
bodyRows[i].childNodes[childElement],
i == headerColumnRows.length - 1);
}
}
}
function SetWidth(element1, element2, isLastColumn)
{
// alert(element2 + "\n\n" + element2.offsetWidth);
var diff = paddingLeft + paddingRight;
if (element1.offsetWidth < element2.offsetWidth)
{
element1.childNodes[0].style.width = element2.offsetWidth - diff + "px";
element2.childNodes[0].style.width = element2.offsetWidth - diff + "px";
}
else
{
element2.childNodes[0].style.width = element1.offsetWidth - diff + "px";
element1.childNodes[0].style.width = element1.offsetWidth - diff + "px";
}
}
function SetHeight(element1, element2, isLastRow)
{
var diff = paddingTop + paddingBottom;
if (element1.offsetHeight < element2.offsetHeight)
{
element1.childNodes[0].style.height = element2.offsetHeight - diff + "px";
element2.childNodes[0].style.height = element2.offsetHeight - diff + "px";
}
else
{
element2.childNodes[0].style.height = element1.offsetHeight - diff + "px";
element1.childNodes[0].style.height = element1.offsetHeight - diff + "px";
}
}
function SyncScroll()
{
for (i = 0; i < arrayCount; i++)
{
headerRowDivs[i].scrollLeft = bodyDivs[i].scrollLeft;
headerColumnDivs[i].scrollTop = bodyDivs[i].scrollTop;
}
}
We got the code from this link.
I hope this helps.
As it stands, the code is far too bulky to process the amount of data we need to. We have approximately 5000 rows of data per month that needs to be displayed on the page.
If by "need to keep in sync" you mean that when you scroll one of them, the other scrolls too, you can't do this with CSS, because you can't manipulate scroll position using CSS.
And one more thing, have in mind that scrollbar in IE goes inside the element and overlaps 20px of this element (there is a workaround for this), and in all other browsers scrollbar goes outside the element.
You can use CSS to set the height of an element and then set overflow:auto (this will give you scroll bars when needed).
Its very hard to get rows of a table to scroll properly. I've been trying with things such as wrapping a table row in a div (or vice versa) and setting a max-height and overflow of that div.
That's the best I can do with out seeing what you are trying to do.
function ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv)
{
var childElement = 0;
if (table.childNodes[0].tagName == null)
{
childElement = 1;
}
SetWidth(
cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[0]);
SetHeight(
cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement]);
var headerRowColumns = headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
var bodyColumns = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
for (i = 0; i < headerRowColumns.length; i++)
{
if (headerRowColumns[i].tagName == "TD" || headerRowColumns[i].tagName == "TH")
{
SetWidth(
headerRowColumns[i],
bodyColumns[i],
i == headerRowColumns.length - 1);
}
}
var headerColumnRows = headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes;
var bodyRows = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes;
for (i = 0; i < headerColumnRows.length; i++)
{
if (headerColumnRows[i].tagName == "TR")
{
SetHeight(
headerColumnRows[i].childNodes[0],
bodyRows[i].childNodes[childElement],
i == headerColumnRows.length - 1);
}
}
}
function SetWidth(element1, element2, isLastColumn)
{
// alert(element2 + "\n\n" + element2.offsetWidth);
var diff = paddingLeft + paddingRight;
if (element1.offsetWidth < element2.offsetWidth)
{
element1.childNodes[0].style.width = element2.offsetWidth - diff + "px";
element2.childNodes[0].style.width = element2.offsetWidth - diff + "px";
}
else
{
element2.childNodes[0].style.width = element1.offsetWidth - diff + "px";
element1.childNodes[0].style.width = element1.offsetWidth - diff + "px";
}
}
function SetHeight(element1, element2, isLastRow)
{
var diff = paddingTop + paddingBottom;
if (element1.offsetHeight < element2.offsetHeight)
{
element1.childNodes[0].style.height = element2.offsetHeight - diff + "px";
element2.childNodes[0].style.height = element2.offsetHeight - diff + "px";
}
else
{
element2.childNodes[0].style.height = element1.offsetHeight - diff + "px";
element1.childNodes[0].style.height = element1.offsetHeight - diff + "px";
}
}
function SyncScroll()
{
for (i = 0; i < arrayCount; i++)
{
headerRowDivs[i].scrollLeft = bodyDivs[i].scrollLeft;
headerColumnDivs[i].scrollTop = bodyDivs[i].scrollTop;
}
}
I appoligize, this part will not format no matter what I do, sorry about the poor formatting.