Inserting an Element as the first element in the body

Subscribe to Inserting an Element as the first element in the body 4 posts, 2 voices

 
apb User

I'm trying it write my first userscript and am having a bit of trouble inserting an element into a page. What I'm trying to do it add a "dashboard" to the top of some google pages, specifically Google Docs, Reader, and Gmail (and maybe more later). I got the idea from the web apps suite for Apple's MobileMe; here's a few screen shots (in one) from the guided tour:

http://picasaweb.google.com/andrew8088/ScreenSh...

My idea was to simply create a div and insert it right at the top, so it would be the first thing in the body, and the rest of the page would just be pushed down. But I can't figure out how to do that. I tried

> document.body.insertBefore(dash, document.childNodes[0].nextSibling.childNodes[0]);
> document.body.insertBefore(dash, document.childNodes[1].childNodes[0
> document.insertBefore(dash, document.childNodes[1].childNodes[0]);

and none worked. What did work was

> document.body.insertBefore(dash, parent.document.getElementById('gbar'));

With this, there's a bit of overlapping of some other elements, but at least it showed up . . . in Docs and Reader. In Gmail, the gbar div is in an iframe and it doesn't seem to be recognized.

Any ideas?

Thanks,
Andrew

PS - here's the code I've written so far; painfully simple:

var dash = document.createElement("div");
var ds = dash.style;
ds.width = "100%";
ds.height = "60px";
ds.backgroundColor = "#333";
ds.clear = "both";
ds.display = "block";
ds.zIndex = "300";
ds.position = "absolute";

document.body.insertBefore(dash, parent.document.getElementById('gbar'));

 
adamisanut Scriptwright

Here is, not an idea, but a fragment, assuming I know the variables and they exist. Okay, the main var is "dash," so here goes:

document.body.insertBefore(dash,document.body.firstChild);

 
apb User

Thanks so much; that works great!

 
adamisanut Scriptwright

No prob! Minimalism rocks!! :)