How to insert div to the top of browser body in javascript in firefox extension

Question

I am new to firefox extension and did not know how to develop toolbar like div in javascript/content script and want to fix it to the top of body(want to push body down). please help.

  var toolbarHeight = 40;

   var div = document.createElement("div");
   div.id = "myToolbar";
   div.textContent = "  ";
   var st = div.style;
   st.display = "block";
   st.top = "0px";
   st.left = "0px";
    st.width = "100%";
     st.height = toolbarHeight + "px";
   st.background = "#F0F0F0";
   st.color = "grey";
   st.fontStyle = "italic";
   st.position = "fixed";
    document.body.style.webkitTransform = "translateY(" + toolbarHeight + "px)";
    document.documentElement.appendChild(div);

score 1 · Answer 1 · edited May 23 '17 at 11:44

****2 UPDATE:**

I have seen update this works but div also moves with body
because document.documentElement.appendChild(div); 

is not working and with document.body.insertBefore(div, document.body.firstChild); 
div also moves down becuase of inserting in body

This is normal because you assign in a body the style document.body.style.webkitTransform = // Chrome, Opera, Safari document.body.style.msTransform = // IE 9 document.body.style.transform = "translateY(" + toolbarHeight + "px)";

The problem is a style.

Now there is a one possibility where you not assign this style to <body> but only on <div> and you can create inside the body two <div>.

NOTE You cannot create two <body> in a file HTML because it 's a valid document HTML INFO

Where the first <div> is the created of script that we discuss and other the rest of the <body> in the <div>. Final you can assign the style on a div using document.getElementById("idofdiv").style.webkitTransform =document.getElementById("idofdiv").style.msTransform =document.getElementById("idofdiv").style.transform = "translateY(" + toolbarHeight + "px)";

And I shocked on the last comment. ****UPDATE:** With the comment I understand you problem. I copy new you script and paste on my notebook. I open the file HTML on Firefox and Chromium (this is a name of Chrome on Ubuntu). You can see the output and difference on imguru. Now the problem is only on document.body.parent.style.webkitTransform='translateY(40px)';

I find why not function and this is not supported on Firefox, IE and OPERA. You see on the site

Now I change it with

document.body.style.webkitTransform =         // Chrome, Opera, Safari
  document.body.style.msTransform =           // IE 9
  document.body.style.transform = "translateY(" + toolbarHeight + "px)";

And the output is equal on Chrome. IMGURU

OLD:

I take you script and work in my notebook.

Inside the code there is a error on document.body.parent.style.webkitTransform='translateY(40px)'; and the error is:

TypeError: document.body.parent is undefined

This I not know that is and I delete. Now I have other error TypeError: document.body is null on var div = document.createElement("div"); I search on google and I fix this Now I insert window.onload{ } with inside you script and I insert the tag
for push body down.

<script type="text/javascript">
  window.onload = function() {
  //document.body.parent.style.webkitTransform ='translateY(40px)';
  var div = document.createElement("div");
  var br=document.createElement("br");
  div.id="divs";
  div.style.display='block';
  div.style.width = "600px";
  div.style.height = "100px";
  div.style.background = "#C2E2FF";
  div.style.color = "grey";
  div.innerHTML = "my div";
  document.body.insertBefore(br, document.body.firstChild);
  document.getElementById("divs").style.fontStyle = 'italic';
  document.getElementById("divs").style.position = "fixed";

  }</script>

The output not view the body because the error (I say the error but this is not error) on style="fixed" because "replace" the (The element is positioned relative to the browser window). I remove this and the output is correct.

I think that you have a problem with position and I suggest for you of use Firebug (tool of firefox and chrome) for find error

For information on the position you go on this site

Final DEMO

i dont understand what are u saying i want div which stick to top and body pf browser pushes down and it stick to top while scrolling. — mano, Nov 26 '13 at 19:00
actually i have a code which is running fine in chrome but not in firefox. actually i want that in my etension when i scroll down or up a webpage div remain fixed it should not scroll down. I have also changed my code . — mano, Nov 26 '13 at 19:13
i have seen update this works but div also moves with body because document.documentElement.appendChild(div); is not working and with document.body.insertBefore(div, document.body.firstChild); div also moves down becuase of inserting in body — mano, Nov 26 '13 at 21:03
you can contact me on mrk1989@hotmail.it on MSN or Skype if you want more helping from me — Mirko Cianfarani, Nov 27 '13 at 15:51

How to insert div to the top of browser body in javascript in firefox extension

1 Answers1