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!!
A couple of things:
You have typos in the variable name. I assume you mean div_console and not div_consola
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?
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 ?
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
Related
Something weird is going on and I'm not sure what it is. I created a bunch of elements and I want to get the width of my progress bar so I can work with it in my JS code.
In my JS I do:
var bar = document.getElementById('progressBar');
console.log(bar.style.width); //empty string
however in my CSS I have
#progressBar{
width: 600px;
border: 2px solid black;
}
and I can clearly see the 600px container and the border around it in the browser, but for some reason, JS doens't know about these CSS settings.
Any ideas what the problem might be?
EDIT: This is different from the suggested duplicate - the problem is not that I don't know how to the get the value, the problem is that the style.value doesn't get me what I expect.
That is correct behaviour.
The style property of a DOMElement is responsible for inline styles, not the actual computed values. To get the width, use getClientRects or getBoundingClientRect.
e.g.
var bar = document.querySelector('.bar');
console.log(bar.style.width); // empty string
console.log(bar.getBoundingClientRect().width); // 100px
.bar {
width: 100px;
height: 20px;
background: blue;
}
<div class='bar'></div>
You may also be interested in:
How do I get a computed style?
I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)
I want div containing a chat, similar to facebook.
If the text content gets longer, ther is y-scroll, but:
The focus shall be on the newest chat entry
A very long word should do a line break
js fiddel code
CSS
.chat{
width: 230px;
height: 310px;
margin-left: 10px;
background-color: grey;
border: solid 1px black;
overflow-y:scroll;
}
You have to scroll to the bottom when a new message comes in and you have to use JavaScript to do it (there might be a clever CSS way I don't know, though).
If you're using jQuery (and I'd recommend you do), you can do it something like this:
// when a new message comes in...
var $chat = $(".chat");
$chat.scrollTop($chat.height());
You might want to change the selector from $(".chat") -- that will probably scroll all chats, which you wouldn't want.
You can also do it with vanilla JavaScript:
// when a new message comes in...
var chatEl = document.getElementById("#mychatelement");
chatEl.scrollTop = chatEl.scrollHeight;
For a scrolling part refer to jQuery Scroll to bottom of page/iframe
As for line brakes - it should be like this automatically.
I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?
Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)
I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });
I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}
Am curious to know how you create a frozen/non-scrolling regions on a webpage using javascript! like the one used by Stackoverflow when they alert you of the badge you have earned with a "X" close button!
Gath
You don't need to use javascript, you can do it with CSS just by setting the CSS property "display" to "fixed". You can of course do this with javascript if you like, like so:
var element = ...code to get the element you want...;
element.style.display = 'fixed';
That's using CSS's position: fixed
body {
margin-top: 20px;
}
#banner {
position: fixed;
height: 20px;
}