I am using a Javascript function to try to add several div elements to an HTML page. The objects show up but they appear to be joined together. I can apply some css such as background-color and width and height, but I can't see how to change properties like top and left. I have tried putting them into a table generated with createElement, but they are still joined together. Is there a way to make the elements seperate after they are added this way? Thanks.
The css
.block {
display: inline-block;
width: 200px;
height: 200px;
top: 200px;
left: 200px;
border: solid 1px black;
background-color: aquamarine;
}
#container {
width: 100%;
height: 200px;
display: flex;
}
The javascript
function setup() {
word = "test";
container = document.getElementById("container");
for (let counter=0;counter<word.length;counter++) {
block = document.createElement("div");
block.innerHTML = word[counter];
block.className = "block";
container.append(block);
}
}
Related
When I add dynamic content to .innerright. Why doesn't the width of .a increase dynamically. What should I do it to make sure .a takes width of .innerright container dynamically. I use javascript code to add the content dynamically.
var list = '';
for (var i = 0; i < 100; i++) {
list = list + i + 's';
}
$('.innerright').append(list);
.outer {
width: 500px;
height: 200px;
background-color: red;
}
.innerleft {
width: 20%;
float: left;
height: 100%;
background-color: yellow;
}
.innerright {
width: 80%;
height: 100%;
float: left;
background-color: green;
overflow: scroll;
}
.a {
height: 20px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class='innerleft'>
</div>
<div class='innerright'>
<div class="a">
</div>
</div>
</div>
It's because you set a calculated width on the container element and specifically tell the container to deal with overflowing content by adding a scroll bar.
As far the css is concerned the element is always at it's calculated width and the extra content just expands into the overflow area rather than affecting the container's width.
I'm not sure this is fixable in css alone while maintaining the overflow property to scroll. Everything is doing as it should, the elements are taking the widths they should take and that is being maintained throughout dynamic content editing - overflow is not part of width.
You could use the javascript scrollWidth value and use that to dynamically edit the width of the .a element.
See the fiddle here
The important bit is:
$('.a').width($('.innerright')[0].scrollWidth);
which gets the scroll width of the .innerright element, that includes the width and the overflow and uses that to set the width of the .a element, which also now goes into the overflow area.
And of course, you'll need to call and recall this after you add any dynamic content!
NB, the [0] means get the first element in the array of DOM nodes returned by the JQuery call.
As others pointed out, block elements don't grow, they overflow. You're CSS makes that overflow scrollable. In order to acheive your goal, wrap the content (<a> and text) in an inline-block element, which will grow, and now you're <a> will receive it's parent (grown) width, and the <div> will still have scrollable overflow:
var list = '';
for (var i = 0; i < 100; i++) {
list = list + i + 's';
}
$('.contentspan').append(list);
.outer {
width: 500px;
height: 200px;
background-color: red;
}
.innerleft {
width: 20%;
float: left;
height: 100%;
background-color: yellow;
}
.innerright {
width: 80%;
height: 100%;
float: left;
background-color: green;
overflow: scroll;
}
.a {
height: 20px;
border: 1px solid red;
}
.contentspan {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class='innerleft'>
</div>
<div class='innerright'>
<span class='contentspan'>
<div class="a">
</div>
</span>
</div>
</div>
By the way, this has nothing to do with dynamic content or JS. If the text was inlined in the HTML you'd get the exact same results.
I have this HTML:
<div>
<span></span>
<textarea></textarea>
</div>
The Span can take up one or more lines (depends on the text it has and size of the Div). I want the Textarea to take all of the height left in div.
Please no jQuery.
https://jsfiddle.net/ntme8Lt4/
The CSS/style tag for that would just be max-height:100%; and width:100%;
This would hold the div's size constant if it is set to a percentage of its parent container or a constant value like 900px.
Since the size of span is not known, just leave it unspecified so it auto-sizes to content.
There's a circular issue here - the height of the div is (normally) determined by the size of its components. You need something to break the circle and determine the height of either the div or the text area.
You can use offsetHeight to get the heights of the different elements, and from there it is just a calculation of the container - span element to find the remaining.
document.querySelector('textarea').style.height = (document.querySelector('div').offsetHeight-document.querySelector('span').offsetHeight)+'px'
http://jsfiddle.net/rhbritton/4eck8dua/1/
If you're just wanting to use pure CSS and without the needs of tables etc you could try this approach.
HTML:
<div>
<span>
Hello<br>
Hello<br>
Hello
</span>
<textarea></textarea>
</div>
CSS:
div {
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid red;
}
span {
width: 100%;
display: block;
background-color: red;
}
textarea {
width: 100%;
height: 100%;
background-color: blue;
}
JSFiddle
Let me know if this works for you.
You can use clientWidth and clientHeight if your willing to use pure JS:
Here is the fiddle
function test()
{
var div = document.getElementById("testDiv");
var span = document.getElementById("testSpan");
var textArea = document.getElementById("testTextArea");
var height = div.clientHeight - span.clientHeight;
textArea.style.height = (height - 5) + "px";
textArea.style.width = (div.clientWidth - 5) + "px";
}
test();
Reference
you can use flex
div
{
display: flex;
flex-direction: column; /*layout top to bottom*/
height: 300px;
width: 400px;
border: 1px solid red;
}
span
{
display: block;
background-color: red;
}
textarea
{
background-color: blue;
height: 100%;
width: 100%;
flex-grow: 1; /*take up remaining space in flex container*/
}
}
https://jsfiddle.net/ntme8Lt4/13/
Thanks to the "possible duplicate" I came up with this solution:
<div>
<span>Hello<br>World</span>
<b><textarea></textarea></b>
</div>
div
{
height: 300px;
width: 400px;
border: 1px solid red;
display: table;
}
span
{
display: block;
background-color: red;
}
b
{
height: 100%;
width: 100%;
display: table-row;
}
textarea
{
height: 100%;
width: 100%;
background-color: blue;
}
https://jsfiddle.net/c42go079/
This question already has answers here:
add and remove div after click [closed]
(5 answers)
Closed 8 years ago.
I would like 4 divs to appear. When I click any of the divs, I would like that div to move to the end.
So, for example, if the first div is clicked, it should become the last div.
The HTML:
</div>
</div>
</div>
</div>
The CSS:
#pop0 {
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
#pop1 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#pop2 {
width: 100px;
height: 100px;
background: blue;
position: relative;
}
#pop3 {
width: 100px;
height: 100px;
background: green;
position: relative;
}
The jQuery:
var id = "pop0";
$(".pop").bind('click', function(){
var oldId = $(this).attr('id');
$(this).attr('id', id);
id = oldId;
})
Demo
Try this code
JS
$(".pop").on('click', function() {
// Get the closest anchor container
var $a =$(this).closest('a');
// Insert after the last anchor container
$a.insertAfter('a:last')
})
Also bind has been superseeded by on . Use that to bind event handlers.
Also your html can be cleaned up a bit, by not repeating the same styles. Move the common styles to the same class.
CSS
.pop{
width: 100px;
height: 100px;
position: relative;
}
#pop0 {
background: yellow;
}
#pop1 {
background: red;
}
#pop2 {
background: blue;
}
#pop3 {
background: green;
}
Check Fiddle
Perhaps just detach the item and append it to the end of the container?
$(document).on('click','.pop',null,function(){
var $pop = $(this);
var $parent = $pop.parent();
$pop.detach();
$parent.append($pop);
});
http://jsfiddle.net/rtpt5/3/
Using your code which is just bad as you don't have any DOM wrapper element... (except body)
$(".pop").bind('click', function(){
$('body').append($(this).parent());
})
DEMO
I have a class that receives the same height across the project. I want one div that is a member of the class to expand dynamically. So I give the div an ID (more specificity). I was also under the impression that min-height would take precedence over height (which should allow div expansion). But the div will not expand when its class has a height set. It works if I remove the height, but shouldn't there be two degrees of more specificity in this case? Here's the fiddle:
Working: http://jsfiddle.net/farinasa/WHn9t/
Not working: http://jsfiddle.net/farinasa/WHn9t/2/
HTML:
<div id="specific" class="lessSpecific">
</div>
CSS:
.lessSpecific
{
border: 1px solid black;
height: 100px;
}
#specific
{
min-height: 300px;
}
JS:
var box = document.getElementById("specific");
function test() {
for (var i = 0; i < 20; ++i)
box.innerHTML += "Hello<br>";
}
test();
Min-height does not take precedence over height. The ID's rules take precedence over the class' rules. Therefore, add a height: auto to the ID selector and you've nullified the static height for that container.
http://jsfiddle.net/WHn9t/3/
I find it useful to refer to W3Schools to find CSS default values for situations like this where a rule needs to be reset for a specific element. http://www.w3schools.com/cssref/pr_dim_height.asp
.lessSpecific
{
border: 1px solid black;
height: 100px;
}
#specific
{
min-height: 300px;
height: auto;
}
or this if you prefer
.lessSpecific
{
border: 1px solid black;
height: 100px;
}
#specific.lessSpecific
{
min-height: 300px;
height: auto;
}
I'm working on a hobby project of mine -- it's something of a glorified RSS feed reader/grabber. I've been able to get most things working, but for some reason I cannot get the text in a certain span to be drawn above an animated div.
When a feed is grabbed, certain operations are performed before displaying the results. During this time, I keep track of the progress and display them in an animated "progress bar" div. All of the sub-operations each have their own progress bars, and they all work correctly (text on top of bar), but the final progress bar (overall progress) does not layer the text correctly.
I created a simple mock-up in JSFiddle to give an example of my problem.
$('#progress-total-box').bind('click', draw);
function draw() {
if (($('#progress-totalbar-fill').css('width')) == "0px") {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() {
var description = document.createElement('span');
$(description).attr('id', '#progress-total-text');
$(description).html('100%');
$('#progress-totalbar-empty').append(description);
$('#progress-total-box').bind('click', draw);
});
}
else {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: 0}, 2000, function() {
document.getElementById('progress-totalbar-empty').innerHTML = '';
$('#progress-total-box').bind('click', draw);
});
}
}
The style/position/etc is purely for sake of demonstration. In this example, when the grey loading bar div is clicked, it animates its width from 0% to 100% (or vice-versa). When the animation is complete, a new child span is created and appended to the 'empty bar' background div, wherein the total percentage is displayed (100%, in this case).
This span element is intentionally removed when the bar is reset.
Do you guys have any ideas as to what's going wrong, and how I can fix it?
I have encountered this error is present in both Chrome and Firefox.
Thanks in advance!
There are multiple problems here.
First off, you need to remove the # from this line
$(description).attr('id', 'progress-total-text');
The new span, was never getting the css it was supposed.
Second, you need to either change your markup or your css.
In this case, I updated the CSS, but the id name don't make sense anymore
body {
width: 100%;
height: 125px;
margin: 0;
}
#progress-category-box {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
background-color: red;
}
#progress-total-box {
position: relative;
width: 100%;
height: 40px;
top: 32.5%;
float: right;
text-align: center;
background-color: #515A5C;
}
#progress-totalbar-empty {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #97b0b1;
background-color: transparent;
z-index: 3;
}
#progress-totalbar-fill {
position: relative;
width: 0%;
height: 100%;
top: -42px;
border-left: 1px solid #97b0b1;
border-top: 1px solid #97b0b1;
border-bottom: 1px solid #97b0b1;
background-color: #00FF00;
z-index: 2;
}
#progress-total-text {
position: relative;
color: black;
top: 30%;
font-size: 15px;
z-index: 3;
}
Thing is, you were showing the animated div over the text.
So I put the text over the animation and put a transparent background behind it.
I applied the grey background to the container instead. I also changed it's height and applied height:100% to it's children.
Here's a full fiddle