Good evening,
So, I have been working on a project, where I have to upload an image form the pc to a canvas and when the image is there I have to add elements over the image that are available over the canvas.
What i got so far is the dragable elements to canvas (example), and here is the code code:
<script type="text/javascript">
contador = 0;
function start(e) {
e.dataTransfer.effecAllowed = 'copyMove';
e.dataTransfer.setData("Data", e.target.id);
e.dataTransfer.setDragImage(e.target, 10, 10);
e.target.style.opacity = '0.4';
}
function end(e){
e.target.style.opacity = '';
e.dataTransfer.clearData("Data");
}
function enter(e) {
e.target.style.border = '3px dotted #555';
}
function leave(e) {
e.target.style.border = '';
}
function over(e) {
var elemArrastrable = e.dataTransfer.getData("Data");
var id = e.target.id;
if (id == 'cuadro1'){
return false;
}
if (id == 'cuadro2'){
return false;
}
if (id == 'papelera')
return false;
}
function drop(e){
var elementoArrastrado = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(elementoArrastrado));
e.target.style.border = '';
tamContX = $('#'+e.target.id).width();
tamContY = $('#'+e.target.id).height();
tamElemX = $('#'+elementoArrastrado).width();
tamElemY = $('#'+elementoArrastrado).height();
posXCont = $('#'+e.target.id).position().left;
posYCont = $('#'+e.target.id).position().top;
x = e.layerX;
y = e.layerY;
if (posXCont + tamContX <= x + tamElemX){
x = posXCont + tamContX - tamElemX;
}
if (posYCont + tamContY <= y + tamElemY){
y = posYCont + tamContY - tamElemY;
}
document.getElementById(elementoArrastrado).style.position = "absolute";
document.getElementById(elementoArrastrado).style.left = x + "px";
document.getElementById(elementoArrastrado).style.top = y + "px";
}
function eliminar(e){
var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data"));
elementoArrastrado.parentNode.removeChild(elementoArrastrado);
e.target.style.border = '';
}
function clonar(e){
var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data"));
elementoArrastrado.style.opacity = '';
var elementoClonado = elementoArrastrado.cloneNode(true);
elementoClonado.id = "ElemClonado" + contador;
contador += 1;
elementoClonado.style.position = "static";
e.target.appendChild(elementoClonado);
e.target.style.border = '';
}
</script>
Now, i have seen great examples here for uploading images to canvas (http://jsfiddle.net/influenztial/qy7h5/), but how can i combine the image upload into canvas and then the scripting of adding elements to this same image?
Any help is greatly appreciated.
Related
Hello I want to implement a carousel in Java Script.
When I launch the page the image loads very strangely and the bootstrap carousel does not work. Do I need to import something to make it work? If I make it static in HTML it works. However the task is to load the images with iiif. Also, there would be way too many images to make it static. Also, I would like to have a filter function implemented which only works dynamically.
Can someone help me how to implement the carousel?
Here is all the JS code:
'import bootstrap.js'
function changeIIIFInformation(iiif, size, quality) {
var index = iiif.indexOf('full')
iiif = iiif.substring(0, index)
iiif += "full/"
iiif += "pct:" +size.toString() +"/"
iiif += "0/"
iiif += quality +".jpg"
return iiif
}
function search_period(period, max_num, offset) {
var count = 0;
var link = ""
var div = document.createElement('div')
var div1 = document.createElement ('div')
var a=document.createElement('a')
var span1=document.createElement('span')
var span2=document.createElement('span')
a.setAttribute('class','carousel-control-prev')
a.setAttribute('href','#carouselExampleControls')
a.setAttribute('role','button')
a.setAttribute('data-slide','prev')
span1.setAttribute('class','carousel-control-prev-icon')
span1.setAttribute('aria-hidden', 'true')
span2.setAttribute('class','sr-only')
span2.innerHTML = 'Previous'
div.setAttribute('class', 'carousel slide')
div.setAttribute('data-ride', 'carousel')
div.setAttribute('id', 'carouselExampleControls')
div1.setAttribute('class','carousel-inner')
var h2 = document.createElement('h2')
var iiif = ""
h2.innerHTML = period
document.body.appendChild(h2)
const keys = Object.keys(urls);
for(const elem of keys) {
var label = urls[elem].label
for(const el of urls[elem].variants) {
if(el.label.includes('front')) {
iiif = el.url
}
}
if(!periods.hasOwnProperty(label)) {
continue;
}
if(periods[label] != period) {
continue;
}
if(count < offset) {
count+=1
continue
}
var div2= document.createElement ('div')
div2.setAttribute('class','carousel-item active')
link = changeIIIFInformation(iiif, 10, "default")
var figure = document.createElement('figure')
var figcaption = document.createElement('figcaption')
var linkToImage = document.createElement('a')
//linkToImage.setAttribute('#image', label)
linkToImage.setAttribute('href', 'annotator#'+label)
linkToImage.innerHTML = label
figcaption.appendChild(linkToImage)
var image = document.createElement('img')
image.setAttribute("id", "myimg");
image.setAttribute('src', link)
image.setAttribute('class','d-block w-100')
// figure.appendChild(image)
// figure.appendChild(figcaption)
div.appendChild(div1)
div.appendChild(a)
div1.appendChild(div2)
a.appendChild(span1)
a.appendChild(span2)
div2.appendChild(image)
figure.setAttribute("id", "myFigure");
count += 1;
if(count >= max_num+offset) {
break;
}
}
document.body.appendChild(div)
}
function clear_dom() {
var elements = document.getElementsByTagName('div')
var headings = document.getElementsByTagName('h2')
var buttons = document.getElementsByTagName('button')
while(buttons.length > 0) {
buttons.item(0).remove()
}
while(elements.length > 0) {
elements.item(0).remove()
}
while(headings.length > 0) {
headings.item(0).remove()
}
}
function show_initial_load() {
search_period('Ur III (ca. 2100-2000 BC)', )
}
function show_filtered(selected, offset) {
clear_dom()
search_period(selected, 10, offset)
var previous = document.createElement('button')
if(offset-10 < 0) {
previous.onclick = () => show_filtered(selected, 0)
} else {
previous.onclick = () => show_filtered(selected, offset-10)
}
previous.innerHTML = 'Previous'
document.body.appendChild(previous)
var next = document.createElement('button')
next.onclick = () => show_filtered(selected, offset+10)
next.innerHTML = 'More'
document.body.appendChild(next)
}
function update_view() {
var selected = document.getElementById('perriod-select').value
clear_dom()
if(selected == '') {
show_initial_load()
} else {
show_filtered(selected, 0)
}
}
I am creating a hangman game and I have to output images, when the users lives get down from 7-0.
I have put this code into my javascript , however it only outputs the if(lives ==8) image.
Unfortunality it does not seem to work at all ?
I am very new to javascript and when I have read the other answers, I have found them hard to understand.
The fact that it doesn't output , does this mean I have an error in my code somewhere. ?
function setup() {
alphabet = "abcdefghijklmnopqrstuvwxyz";
lives = 8;
var words = ["ayeupmeducks", "pieceofcake", "bullinachinashop", "hangfire","greeneyedmonster", "hairraising","bringhomethebacon","adiamondintherough","onceinabluemoon","afootinthedoor","bitethebullet"];
messages = {
win: 'Congratulations you have won the game of Hangman!',
lose: 'You have been Hanged !!',
guessed: ' already guessed, please try again...',
validLetter: 'Please enter a letter from A-Z'
};
var getHint = document.getElementById("hint");
var showClue = document.getElementById("clue");
getHint.onclick = function() {
hints =
["Stoke Greeting","Saying Something is Easy", "Very Clumsy","delaying something for a minute", "When you are jealous of something","Something is frightening", "Earn Money", "Rough Exterior however has some potential", "When something rarely happens", "When you have succeeded/ getting yourself known by a company","accepting something , when you do not want to"];
var hintIndex = words
showClue.innerHTML = "Clue: - " + hints [idx];
};
gussedLetter = matchedLetter = '';
numberofMatchedLetters = 0;
/* This chooses the word which will be displayed on the page */
idx = Math.floor(Math.random() * words.length);
currentWord = words[idx];
output = document.getElementById("output");
message = document.getElementById("message");
guessInput = document.getElementById("letter");
message.innerHTML = 'You have ' + lives + ' lives remaining';
output.innerHTML = '';
document.getElementById("letter").value = '';
guessButton = document.getElementById("guess");
guessInput.style.display = 'inline';
guessButton.style.display = 'inline';
letters = document.getElementById("letters");
letters.innerHTML = '<li class="current-word">Current word:</li>';
var letter, i;
for (i = 0; i < currentWord.length; i++) {
/* returns the character at the specified index in a string.*/
letter = '<li class="letter letter' + currentWord.charAt(i).toUpperCase() + '">' + currentWord.charAt(i).toUpperCase() + '</li>';
/* inserts the results node into Dom at the correct place, The BeforeEnd- inside the element, after its last child.*/
letters.insertAdjacentHTML('beforeend', letter);
}
}
function gameOver(win) {
if (win) {
output.innerHTML = messages.win;
output.classList.add('win');
} else {
output.innerHTML = messages.lose;
output.classList.add('error');
}
guessInput.style.display = guessButton.style.display = 'none';
guessInput.value = '';
}
window.onload = setup();
document.getElementById("restart").onclick = setup;
guessInput.onclick = function () {
this.value = '';
};
document.getElementById('hangman').onsubmit = function (e) {
if (e.preventDefault) e.preventDefault();
output.innerHTML = '';
output.classList.remove('error', 'warning');
guess = guessInput.value;
if (guess) {
if (alphabet.indexOf(guess) > -1) {
if ((matchedLetter && matchedLetter.indexOf(guess) > -1) || (gussedLetter && gussedLetter.indexOf(guess) > -1)) {
output.innerHTML = '"' + guess.toUpperCase() + '"' + messages.guessed;
output.classList.add("warning");
}
else if (currentWord.indexOf(guess) > -1) {
var lettersToShow;
lettersToShow = document.querySelectorAll(".letter" + guess.toUpperCase());
for (var i = 0; i < lettersToShow.length; i++) {
lettersToShow[i].classList.add("correct");
}
for (var j = 0; j < currentWord.length; j++) {
if (currentWord.charAt(j) === guess) {
numberofMatchedLetters += 1;
}
}
matchedLetter += guess;
if (numberofMatchedLetters === currentWord.length) {
gameOver(true);
}
}
else {
gussedLetter += guess;
lives--;
message.innerHTML = 'You have ' + lives + ' lives remaining';
if (lives === 0) gameOver();
}
}
else {
output.classList.add('error');
output.innerHTML = messages.validLetter;
}
}
else {
output.classList.add('error');
output.innerHTML = messages.validLetter;
}
return false;
};
var x = document.createElement("IMG");
if (lives==8){
x.setAttribute("src", "Hangman-0.png");
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.setAttribute("alt", "Hangman");
document.body.appendChild(x);}
if (lives==7){
x.setAttribute("src", "Hangman-1.png");
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.setAttribute("alt", "Hangman");
document.body.appendChild(x);}
From looking at you code, you can simplify a lot - each image has the same height, width, and alt, so you can move all of that out of the function. Also, assuming the src attribute is just a number that is incrementing, you can instead do something like:
var num_lives = 8;
var lives_left = 8;
function guess() {
lives_left--;
x.setAttribute('src', 'Hangman-' + (num_lives - lives_left) + '.png');
}
So, as a working example, your code would basically be:
var url = 'https://www.oligalma.com/downloads/images/hangman/files/';
const num_lives = 10;
var lives = 10;
var x = document.createElement("IMG");
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.setAttribute("alt", "Hangman");
x.setAttribute("src", url + (num_lives - lives) + '.jpg');
document.body.appendChild(x);
function change() {
lives--;
if (lives < 0) {
lives = num_lives;
}
x.setAttribute("src", url + (num_lives - lives) + '.jpg');
}
<button onClick="change()">Guess</button>
I am trying to make a js game though when I try and trigger a function using onclick nothing happens and then when I went onto console it came up with this error message everytime I clicked it:
Uncaught TypeError: undefined is not a function
This is how I define my function:
var myfunction = function () {
I know that it is nothing to do with the function though as I call it after I make it and it works fine.
I have also checked whether it is the click by putting an alert in the onclick though that worked fine.
I know this is a common problem, though have looked at others and found nothing.
http://jsfiddle.net/Hive7/DQnmF/
JavaScript:
var attack = function () {
while (slaying === true) {
if (youHit !== 1) {
totalDamage = totalDamage += damageThisRound;
document.getElementById('hit').style.display = 'inline';
//alert('You hit!!! ' + totalDamage * 10 + ' damage');
health = health - totalDamage * 10;
setTimeout(function(){document.getElementById('health').style.width = health + 'px'}, 400);
setTimeout(function(){document.getElementById('hit').style.display = 'none'}, 500);
if (totalDamage >= 4) {
//alert('the dragons dead');
slaying = false;
}
} else {
document.getElementById('miss').style.display = 'inline';
setTimeout(function(){document.getElementById('miss').style.display = 'none'}, 500);
//alert('You missed');
}
slaying = false;
}
}
document.getElementById('character').style.color = '#ccc';
document.getElementById('enemy').style.position = 'absolute';
document.getElementById('enemy').style.right = '0';
document.getElementById('game').style.position = 'relative';
document.getElementById('game').style.width = '1004px';
document.getElementById('characters').style.position = 'relative';
document.getElementById('health-container').style.right = '0';
document.getElementById('health-container').style.position = 'absolute';
document.getElementById('health-container').style.bottom = '30px';
document.getElementById('health-container').style.width = '200px';
document.getElementById('health-container').style.height = '41px';
document.getElementById('health').style.backgroundColor = 'red';
document.getElementById('health').style.height = '41px';
document.getElementById('health').style.width = '200px';
document.getElementById('miss').style.position = 'absolute';
document.getElementById('miss').style.right = '20px';
document.getElementById('miss').style.bottom = '120px';
document.getElementById('miss').style.display = 'none';
document.getElementById('hit').style.position = 'absolute';
document.getElementById('hit').style.right = '20px';
document.getElementById('hit').style.bottom = '120px';
document.getElementById('hit').style.display = 'none';
var slaying = true;
var youHit = Math.floor(Math.random() * 6 + 1);
var totalDamage = 0;
var damageThisRound = Math.floor(Math.random() * 4 + 1);
var num = document.getElementById('health').style.width.length - 2;
var health = document.getElementById('health').style.width;
health = health.substring(0, num);
attack();
I found the answer in the end. I used this instead of using the onclick method:
document.getElementById('attack').addEventListener('click', function() {
myfunction();
}, false);
I am trying to render the list based on virtual rendering concept. I am facing some minor issues, but they are not blocking the behaviour. Here is the working fiddle http://jsfiddle.net/53N36/9/ and Here are my problems
Last items are not visible, I assume some where I missed indexing.(Fixed, Please see the edit)
How to calculate scrollPosition if I want to add custom scroll to this.
Is this the best method or any other?
I have tested it with 700000 items and 70 items in chrome. Below is the code
(function () {
var list = (function () {
var temp = [];
for (var i = 0, l = 70; i < l; i++) {
temp.push("list-item-" + (i + 1));
}
return temp;
}());
function listItem(text, id) {
var _div = document.createElement('div');
_div.innerHTML = text;
_div.className = "listItem";
_div.id = id;
return _div;
}
var listHold = document.getElementById('listHolder'),
ht = listHold.clientHeight,
wt = listHold.clientWidth,
ele = listItem(list[0], 'item0'),
frag = document.createDocumentFragment();
listHold.appendChild(ele);
var ht_ele = ele.clientHeight,
filled = ht_ele,
filledIn = [0];
for (var i = 1, l = list.length; i < l; i++) {
if (filled + ht_ele < ht) {
filled += ht_ele;
ele = listItem(list[i], 'item' + i);
frag.appendChild(ele);
} else {
filledIn.push(i);
break;
}
}
listHold.appendChild(frag.cloneNode(true));
var elements = document.querySelectorAll('#listHolder .listItem');
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log(delta);
//if(filledIn[0] != 0 && filledIn[0] != list.length){
if (delta == -1) {
var start = filledIn[0] + 1,
end = filledIn[1] + 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = filledIn[0]; i < filledIn[1]; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
} else {
var start = filledIn[0] - 1,
end = filledIn[1] - 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = start; i < end; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
}
//}
}
if (listHold.addEventListener) {
listHold.addEventListener("mousewheel", MouseWheelHandler, false);
listHold.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else listHold.attachEvent("onmousewheel", MouseWheelHandler);
}());
Please suggest me on this.
EDIT:
I have tried again and I am able to fix the indexing issue. http://jsfiddle.net/53N36/26/
But how can I calculate the scroll position based on the array list currently displayed.
Is this the best method or any other?
I think something that would make this much easier is not to try to handle scrolling yourself.
In this fiddle I show that you can let the browser handle scrolling for you, even though we are using virtual rendering.
Using .scrollTop I detect where the browser thinks the user is looking, and I draw in items based on that.
You'll note that if you set hidescrollbar to false and the user uses it to scroll, my method still runs fine.
Therefore, to calculate scroll position you can just use .scrollTop.
And as for custom scrolling, just make sure you influence the .scrollTop of #listHolder and recall refreshWindow()
CODE FROM FIDDLE
(function () {
//CHANGE THESE IF YOU WANT
var hidescrollbar = false;
var numberofitems = 700000;
//
var holder = document.getElementById('listHolder');
var view = null;
//get the height of a single item
var itemHeight = (function() {
//generate a fake item
var div = document.createElement('div');
div.className = 'listItem';
div.innerHTML = 'testing height';
holder.appendChild(div);
//get its height and remove it
var output = div.offsetHeight;
holder.removeChild(div);
return output;
})();
//faster to instantiate empty-celled array
var items = Array(numberofitems);
//fill it in with data
for (var index = 0; index < items.length; ++index)
items[index] = 'item-' + index;
//displays a suitable number of items
function refreshWindow() {
//remove old view
if (view != null)
holder.removeChild(view);
//create new view
view = holder.appendChild(document.createElement('div'));
var firstItem = Math.floor(holder.scrollTop / itemHeight);
var lastItem = firstItem + Math.ceil(holder.offsetHeight / itemHeight) + 1;
if (lastItem + 1 >= items.length)
lastItem = items.length - 1;
//position view in users face
view.id = 'view';
view.style.top = (firstItem * itemHeight) + 'px';
var div;
//add the items
for (var index = firstItem; index <= lastItem; ++index) {
div = document.createElement('div');
div.innerHTML = items[index];
div.className = "listItem";
view.appendChild(div);
}
console.log('viewing items ' + firstItem + ' to ' + lastItem);
}
refreshWindow();
document.getElementById('heightForcer').style.height = (items.length * itemHeight) + 'px';
if (hidescrollbar) {
//work around for non-chrome browsers, hides the scrollbar
holder.style.width = (holder.offsetWidth * 2 - view.offsetWidth) + 'px';
}
function delayingHandler() {
//wait for the scroll to finish
setTimeout(refreshWindow, 10);
}
if (holder.addEventListener)
holder.addEventListener("scroll", delayingHandler, false);
else
holder.attachEvent("onscroll", delayingHandler);
}());
<div id="listHolder">
<div id="heightForcer"></div>
</div>
html, body {
width:100%;
height:100%;
padding:0;
margin:0
}
body{
overflow:hidden;
}
.listItem {
border:1px solid gray;
padding:0 5px;
width: margin : 1px 0px;
}
#listHolder {
position:relative;
height:100%;
width:100%;
background-color:#CCC;
box-sizing:border-box;
overflow:auto;
}
/*chrome only
#listHolder::-webkit-scrollbar{
display:none;
}*/
#view{
position:absolute;
width:100%;
}
I have used javascript to creat a scollable table on page load
The visibility of the table is hidden by default.
When i minimize/maximize the page in IE, the browser makes the hidden table visible.
Can any one help me in solving this issue.
The javascript to create scrollable table is as follows
/* Scrollable table */
function setScrollableTableHeight(name,maxrows)
{
var count;
var arrObj = document.getElementsByName(name);
for(count=0;count<arrObj.length;count++)
{
ScrollableTable(arrObj[0], maxrows);
}
}
// set Body width to screen width
function setBodyWidth()
{
objBody = document.getElementsByTagName('body');
objBody[0].style.width = screen.width - 40;
var objDivs = document.getElementsByTagName('div');
for(var i=0;i<objDivs.length;i++)
{
if(objDivs[i].className == "OuterPanel")
{
if(screen.width < 980)
objDivs[0].style.width = 980 - 42;
else
objDivs[0].style.width = screen.width - 42;
break;
}
}
}
function ScrollableTable (tableEl, maxRows, tableWidth) {
var tableHeight = 25 + maxRows * 25;
var numRows = 0;
this.initIEengine = function () {
if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
}
if (this.thead) {
var trs = this.thead.getElementsByTagName('tr');
for (x=0; x<trs.length; x++) {
trs[x].style.position ='relative';
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
}
}
if (this.tfoot) {
var trs = this.tfoot.getElementsByTagName('tr');
for (x=0; x<trs.length; x++) {
trs[x].style.position ='relative';
trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
}
}
eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
};
this.initFFengine = function () {
var headHeight = (this.thead) ? this.thead.clientHeight : 0;
var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
var bodyHeight = this.tbody.clientHeight;
this.tbody.setAttribute("id", "dynamicScrollParentfirefox");
var trs = this.tbody.getElementsByTagName('tr');
numRows = trs.length;
var tds;
if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
for (x=0; x<trs.length; x++) {
tds = trs[x].getElementsByTagName('td');
tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
}
}
var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
};
this.tableEl = tableEl;
this.scrollWidth = 16;
this.originalHeight = this.tableEl.clientHeight;
this.originalWidth = this.tableEl.clientWidth;
/* modified by rmv */
if(parseInt(tableHeight) > this.originalHeight && this.originalHeight!=0)
tableHeight = this.originalHeight;
/* modified by rmv ends*/
this.newHeight = parseInt(tableHeight);
this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;
this.tableEl.removeAttribute('height');
var loverflowParent = document.createElement('div');
loverflowParent.setAttribute("id","dynamicScrollParent");
this.containerEl = this.tableEl.parentNode.insertBefore(loverflowParent, this.tableEl);
this.containerEl.appendChild(this.tableEl);
this.containerEl.style.height = this.newHeight + 'px';
this.containerEl.style.width = this.newWidth + 'px';
var thead = this.tableEl.getElementsByTagName('thead');
this.thead = (thead[0]) ? thead[0] : null;
var tfoot = this.tableEl.getElementsByTagName('tfoot');
this.tfoot = (tfoot[0]) ? tfoot[0] : null;
var tbody = this.tableEl.getElementsByTagName('tbody');
this.tbody = (tbody[0]) ? tbody[0] : null;
if (!this.tbody) return;
if (document.all && document.getElementById && !window.opera) this.initIEengine()
if (!document.all && document.getElementById && !window.opera) this.initFFengine()
}
You can also try to force the table to scroll when the page height changes. You can apply in CSS this attribute to the container of the table: overflow-y:scroll;