CODEWITHSUNDEEP
jquerycss
mrblah
mrblah

Reputation: 103577

I have a table that I want to move to the top of the page via jquery

I have a table on near the bottom of the page, which I want to move all the way to the top to hug the top of the browser (ie/ff compatible).

What's the best way to do this?

<div id="mytable"><table id="t1"><tr><td>hello</td></tr></table></div>

Upvotes: 1

Views: 133

Answers (2)

micahwittman
micahwittman

Reputation: 12476

If by move you mean structurally relocate it in the DOM, you could do this:

var mtId = 'mytable'; //the id of the div to move
var mt = $('#' + mtId);
var mtInnerHtml = mt.html();
mt.remove();
$('body').prepend('<div id="' + mtId + '">' + mtInnerHtml + '</div>');
mt = $('#' + mtId);
mt.css({'margin':0, 'padding':0});

Execute this javascript at some point after the mytable div is loaded into the page. It removes the div from the DOM and recreates it as the first element within the body tag and sets the margin and padding to zero.

Upvotes: 1

Bartek
Bartek

Reputation: 15609

The absolute top? Your best bet is to simply apply position: absolute; top: 0; to it.

In jQuery this would be something like so:

$("#mytable").css({'position': 'absolute', 'top': 0});

I haven't tested this, but I don't see why it shouldn't work. If you need it done after some event just use the appropriate jQuery handler to do so.

Also, as others have pointed out if you want this on the top on page load, you simply can apply the said CSS to it and not even use jQuery.

Upvotes: 1

Related Questions