slow performance in firefox

first of hi to all since i’m new here. now to my question.
i have a script that i use to dynamically create div element and textbox inside. now, when div is created i use sort of a zoom effect to stretch it form 0px width and 0px height to desired width and height (stretching is done with centering so that effect looks like div is coming from center of page). script that i have written works fine in all browsers, just in firefox zooming is slow (it lags) while in ie and safari it is nice and smooth (and i have no idea why is that since this is all basic arithmetics). how can i improve it so that it works fine in firefox also? here is the code. i commented parts of code so that it would be easier to figure out what happens where since i used croatian names:

[code=php]function cmd(){
this.element = null;
this.terminal = null;
this.stvarnaVisina = 0;
this.stvarnaSirina = 0;
this.faktorPovecanja = 0;
this.faktorProsirenja = 0;
this.timer = null;
this.terminalPrefiks = null;

//here i create div with textarea inside
this.stvori = function(){
this.terminalPrefiks = new String(‘~ dir.hr: ‘);
this.element = document.createElement(‘DIV’);
this.element.id = ‘CMD’;
this.element.className = ‘terminal’;
this.element.innerHTML = ‘<table><tr><td class=”cmd-lijevo”>&nbsp;</td><td class=”cmd-sredina”>Terminal</td>’ +
‘<td id=”zatvori” class=”cmd-desno” onClick=”cmd.unisti();”>&nbsp;</td></tr><tr><td colspan=”3″>’ +
‘<textarea onSelect=”cmd.clearExtraSelection();” id=”terminalTextArea”>’+this.terminalPrefiks+'</textarea></td></tr></table>’;
document.body.appendChild(this.element);
this.terminal = document.getElementById(‘terminalTextArea’);
this.doSlowOpen();
}

this.unisti = function(){
this.terminal = null;
document.body.removeChild(this.element);
this.element = null;
this.stvarnaVisina = 0;
this.stvarnaSirina = 0;
this.faktorPovecanja = 0;
this.faktorProsirenja = 0;
this.timer = null;
}

this.doSlowOpen = function(){
//sets final width of div to window width – 50 px and final height to window height – 50 px
if(window.innerWidth){
this.stvarnaSirina = window.innerWidth – 50;
this.stvarnaVisina = window.innerHeight – 50;
}
else if(document.body.offsetWidth){
this.stvarnaSirina = document.body.offsetWidth – 50;
this.stvarnaVisina = document.body.offsetHeight – 50;
}
//set resize step to 1/20 of final width and height of div – interval will be repeated for 20 times
this.faktorProsirenja = parseInt(this.stvarnaSirina / 20);
this.faktorPovecanja = parseInt(this.stvarnaVisina / 20);
//set div to 0px*0px
this.element.style.height = ‘0px’;
this.element.style.width = ‘0px’;
var _this = this;
//call function that dose actual resize
this.timer = setInterval(function(){_this.slowOpen();}, 40);
//this is just to set focus on textarea
setTimeout(function(){_this.focus();},1);
}

this.slowOpen = function(){
if(this.element.offsetHeight < this.stvarnaVisina){
if((this.element.offsetHeight + this.faktorPovecanja) < this.stvarnaVisina){
//resize element by factor calculated before
this.element.style.height = this.element.offsetHeight + this.faktorPovecanja + “px”;
this.element.style.width = this.element.offsetWidth + this.faktorProsirenja + “px”;
//center element in the page
if(window.innerWidth){
this.element.style.top = Math.round(((screen.height – (screen.height – window.innerHeight) – this.element.offsetHeight) / 2)) + ‘px’;
this.element.style.left = Math.round(((window.innerWidth – this.element.offsetWidth) / 2)) + ‘px’;
}
else if(document.body.offsetWidth){
this.element.style.left = Math.round(((document.body.offsetWidth – this.element.offsetWidth) / 2)) + ‘px’;
this.element.style.top = Math.round(((screen.height – (screen.height – document.body.offsetHeight) – this.element.offsetHeight) / 2)) + ‘px’;
}
}
else{
//this is just in case if element is over resized to put it in correct size and center it
this.element.style.height = this.stvarnaVisina;
this.element.style.width = this.stvarnaSirina;
if(window.innerWidth){
this.element.style.top = Math.round(((screen.height – (screen.height – window.innerHeight) – this.element.offsetHeight) / 2)) + ‘px’;
this.element.style.left = Math.round(((window.innerWidth – this.element.offsetWidth) / 2)) + ‘px’;
}
else if(document.body.offsetWidth){
this.element.style.left = Math.round(((document.body.offsetWidth – this.element.offsetWidth) / 2)) + ‘px’;
this.element.style.top = Math.round(((screen.height – (screen.height – document.body.offsetHeight) – this.element.offsetHeight) / 2)) + ‘px’;
}
}
}
else{
clearInterval(this.timer);
}
}

this.focus = function(){
this.terminal.focus();
if(this.terminal.setSelectionRange){
this.terminal.setSelectionRange(parseInt(this.terminal.value.length), parseInt(this.terminal.value.length));
}
else{
var range = this.terminal.createTextRange();
range.collapse(true);
range.moveStart(‘character’,parseInt(this.terminal.value.length));
range.moveEnd(‘character’,parseInt(0));
range.select();
}
}
}[/code]

thanx for any help and sorry for my lousy english

Also in #JavaScript _↴