Forum Moderators: open

Message Too Old, No Replies

how to create midle centered element?

         

orion_rus

3:22 pm on Dec 4, 2004 (gmt 0)

10+ Year Member



Hello world i don't know how dinamycally create element with fixed size middle centered. Now i use following function to create it:

function showinformation(filetooutput)
{
bigtable=document.createElement('table');
bigtable.style.position="absolute";
bigtable.style.top=0;
bigtable.width=getInsideWindowWidth()-20;
bigtable.setAttribute('height',getInsideWindowHeight()-20);
tablebody=document.createElement('tbody');
mainrow=document.createElement('tr');
maintd=document.createElement('td');
subtable=document.createElement('table');
subtable.border="1";
subtable.align="center";
subbody=document.createElement('tbody');
subtr=document.createElement('tr');
subtd=document.createElement('td');
subtd.width="800";
subtd.height="650";
subtd.innerHTML="<iframe src='"+filetooutput+"' frameborder='0' scrolling='no' style='border-width:0px;width:800px;height:610px;'></iframe><br>&#1055;&#1088;&#1080;&#1074;&#1077;&#1090;</td>";
subtr.appendChild(subtd);
subbody.appendChild(subtr);
subtable.appendChild(subbody);
maintd.appendChild(subtable);
mainrow.appendChild(maintd);
tablebody.appendChild(mainrow);
bigtable.appendChild(tablebody);
document.body.appendChild(bigtable);

}


Anybody have better ideas?)
Thanks in advance

adni18

2:21 pm on Dec 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



you could use a table with 100% width and height, 0px top and left, and 0 cellspacing and cellpadding, use a <TD valign=middle><p align=center>. The valign=middle would align it vertically. Really this is for CSS, although I can understand why you put it in Javascript.

Alternatively, you could move the element every time the user resizes it, by doing the following:

<HEAD>
<script language=javascript>

function correctDeadCenter(elemnt){
elemnt.style.position="absolute";
elemnt.style.top=eval(eval(eval(document.body.clientHeight)/2)-eval(eval(elemnt.height)/2));
elemnt.style.left=eval(eval(eval(document.body.clientWidth)/2)-eval(eval(elemnt.width)/2));
}

</script>
</HEAD>

<BODY onresize="correctDeadCenter(document.images[0])">
<img src="boy.gif" width=300 height=300>
<script language=javascript>
correctDeadCenter(document.images[0])
</script>
</BODY>

Keep in mind, this centers and middles the element, although it doesn't look it. You may want to subtract a couple of pixels.

Bernard Marx

5:24 pm on Dec 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



adni, I know you're a big fan of eval, but there's really no need to call it 10 times in a function. There's no need at all when the data being dealt with is all numbers.

elm.style.left = (document.body.clientWidth - elm.offsetWidth)/2 +'px'; 
elm.style.top = (document.body.clientHeight - elm.offsetHeight)/2 +'px';

(..it's still IE-specific though)

see: eval is evil [blogs.msdn.com] ;)

orion_rus

7:39 am on Dec 6, 2004 (gmt 0)

10+ Year Member



Yes it's works. But if i change size of my screen to 200,200 for example. and opens this div it left top corner will be in 0,0. if i resize it back to original sizes (1024x768 for example) this div stay on 0,0. But i need this to be centered)?

Bernard Marx

8:53 am on Dec 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As adni was hinting, this might be better done without using script...but if you are going to use the centering script:

window.onresize = function(){
correctDeadCenter(elementRef);
}

A few things about the code you originally posted:

- I'm not sure you need the inner table.

- To save on messy statements, it is legal to write things like:

document.createElement('<td width="200" height="200">');

You can also create and append in one statement, to avoid using intermediary variables..

var ref_to_created_child = parentRef.appendChild(document.createElement('<td width="200" height="200">'));

- You may prefer to use specialised table methods,

insertRow, insertCell
.
A tad slower, but perhaps more convenient.

orion_rus

10:24 am on Dec 6, 2004 (gmt 0)

10+ Year Member



Thank you very much. But i'm not sure that document.createElement('<td width="200" height="200">'
would work fine?

Bernard Marx

11:07 am on Dec 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why's that?

orion_rus

11:17 am on Dec 6, 2004 (gmt 0)

10+ Year Member



Don't createElement creates a tag names? like a document.createElement('td'); or it can do it?

Bernard Marx

12:40 pm on Dec 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why not try it?

[msdn.microsoft.com...]
Attributes can be included with the sTag as long as the entire string is valid HTML. You should do this if you wish to include the NAME attribute at run time on objects created with the createElement method.

Well, that's what MS says. Pretty sure it's standard.
(never can tell, myself)

Bernard Marx

1:02 pm on Dec 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No, you're right. Gecko doesn't seem to like that.