View Full Version : dynamicly moving a table

07-14-2003, 05:31 PM
ok, you've all seen the movement of divs and layers around the screen, but i want to move a table, i can set the absolure height of it in the style attribute of the table but i do not know if its only IE or whatever that can change style tags and i do not know how to modify the style of the table of everything can see it...

if there is no way to move the table in most browsers, is there a way to determine their browser and run a different script if they have a different browser? i do not know which browsers support LAYER and which support DIV (apart from IE and NS), normally i just run a code like this:

if (document.all) document.write("<script src="scriptIE.js"></script>")
else if (document.layers) document.write("<script src="scriptNS.js"></script>")
else document.write("please get IE or NS")

but there must be a way of using divs or layers in opera etc so.. anyone know what it is?

07-15-2003, 01:55 PM
If you don't care about NS4 or IE4, simply treat the table as an element, and give it CSS style as usual (style, class, id)
To move the table, I think the simpliest way is to refere it by an ID

You can refere the element by id like this:

if IE5 > and NS 6>
use document.getElementById(id).style
If IE 4
use document.all[id].style

if you need a script for NS4, that you have to use <layer> tags to include the table in. Give the ID to the <layer id="id">...

Roy Sinclair
07-15-2003, 04:27 PM
You might not be able to move a table around by itself but there's nothing preventing you from wrapping the table in a DIV and moving the div (and the table) around.

07-16-2003, 08:21 AM
Yes, I suppose this is the "classical" and safest way to define page elements, by including them in DIVs. (I do that always in my works). I just wanted to say that the latest browsers version accept IDs (thus, the possibility to define and change dinamically their styles) within the most tags (table, td (IE6), a, frame, iframe, img).

Well, if you want to include NS4 (but there are a small minority who use that old-fashioned browser) you must know that NS4 does not recognize DIV tag, but uses instead LAYER and ILAYER tags...

...and, by the way, ghell, you don't need two different JS files, for IE and NS. It is enough to know and use some browser detect functions/statements... The most easier way (and cover more than 95% of the users) is to use something like

if(getElementById){... covering NS6>,IE5>, latest Opera and Mozilla versions}


if(document.all) { ....for IE4....}

07-16-2003, 09:44 AM
as i said in my original post, i know about DIVs and LAYERs but i didnt know which weny with which browser and what was the best way to check their browser ... not only IE uses document.all (i think) etc my friend tests my scripts in opera for me so that us usefull and it seems that opera is closer to NS than it is to IE but i think it uses document.all anyway. o well, i think i have my script working now, so thatnks for all your help :) i appreciate it :thumbsup:

07-16-2003, 10:28 AM
as I said, if use document.getElementById method for a movement script, be sure you will cover most of the browsers. If you want to cover IE4 (and compatible) you must add document.all. Addind document.layers you cover almost all the browsers, NS4 and compatible included. See an example:
function objectSetup() {
zelem1 = new layerSetup("elem1","visible");
zelem2 = new layerSetup("elem2","hidden");
function layerSetup(id,visibility) {
if (document.getElementById){
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;
} else if(document.all) {
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;
} else if(document.layers) {
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;

//and now a simple rollover function

function roll(){
zelem1.visibility = "hidden";
zelem2.visibility = "visible";
function rolloff(){
zelem1.visibility = "visible";
zelem2.visibility = "hidden";
// and the handler event action

in the body will be any elements u want, with the id="elem1" and id="elem2" (in my case) and the handlers omouseover and onmouseout will call functions roll() and rolloff(), respectively.

Following this kind of script you may build movement functions as well, using position style (left, top) or/and visibility style hidden/visible). It will works for almost all the browsers, I reckon