在任意页面的左侧添加div

Question

I developing a plugin and want to add on any page a div on the left side, like a console. I saw CSS styles, but testing the plugin on greasymonkey not always show me the div, how can i do?

The CSS code that I'm using is this:

var div_console = document.createElement("div");
div_consola.id = "div_consola";
div_consola.style.cssText = "overflow:scroll;
z-index:300;position:fixed;left:0px; width: auto; 
height: 100%;  border: solid 1px #e1e1e1;
vertical-align: middle;   background:  #ffdab9;text-align: center;";
var body = document.getElementsByTagName('body')[0];
body.appendChild(div_consola);

So, when loading any page I add with Javascript this div and then populate with data.

Any help?

Thank you!!

Answer 1

div_consola.id = "div_consola";

div.setAttribute("id", "div_consola"); <------ Try using setAttribute to set Id.

EDIT: Using same Id name and variable name is also one of the issue. When I changed the variable name in your code, it worked fine.

var div_consola = document.createElement("div"); var div = document.createElement("div"); <------ variable name changed

Answer 2

A couple of things:

1. You have typos in the variable name. I assume you mean div_console and not div_consola
2. You are assuming that a z-index of 300 will suffice, which may or may not be true. A page could choose to implement a z-index of 301.

Is the rest of your css being applied to the div you wish to affect?

Answer 3

You have specified

overflow: scroll;
width: auto;

Depend of your browser, maybe your div have an undefined size and the scrollbar which pop hide your div. That's what happened to me when I tried your code on jsFiddle.

Here is the result when I change it to

overflow : hidden;
width: 50px;

JsFiddle

Edit : If it doesn't resolve your problem, could you please precise the conditions (browser, etc) when it doesn't work ?