Why squares don't fit inside div - javascript

I am struggling to fill div element with square cells entirely.
right now these square cells fall out of the div, don't fit properly etc.
I am not sure what causes it.
Any ideas?
var cell_side_len = 50;
var grid_width = 400;
var grid_height = 300;
var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";
for(var i = 0; i < grid_width/cell_side_len; i++){
for(var j = 0; j < grid_height/cell_side_len; j++){
var cell = document.createElement('div');
cell.style.height = cell_side_len + 'px';
cell.style.width = cell_side_len + 'px';
cell.style.border = "1px solid black";
cell.style.float = "left";
container.appendChild(cell);
}
}
<div id="container"></div>

Problem you have is the fact the border is NOT part of the width/height. So what you have have is everything is a width of 52px, not 50px. This is the basic box model.
What can you do?
Change your width to 48
or Use box-sizing: border-box;
or Drop the border for outline
or use a modern approach with flexbox or grid.

You are setting the content width of each cell to be 50px, and then adding a 1px border on each side, making each cell have a total width of 52px. This does not fit evenly into the 400px-width container.
You can fix this by saying "when I say width, I mean the content, the padding, and the border all together!". To do so, you should add the following CSS:
box-sizing: border-box;
To do that in JavaScript, you would write
cell.style["box-sizing"] = "border-box";
// or
cell.style.boxSizing = "border-box";

Related

How to specify a different styling for every textarea line?

I need a textarea able set a different background color for each line, i have used the ::first-line pseudo-element, but how do i change the styling of another lines?
#field{
height: 100px;
width: 200px;
}
#field::first-line{
background-color: #f33;
}
<textarea id='field'>
I want this to be red.
This to be green.
This to be blue and keep the same if there is not enough space.
And this another color.
</textarea>
A textarea cannot be a "block" container, you can't emulate this behavior with CSS.
I have used a div as backdrop with the same style as the textarea, but added transparency to the textarea background.This way the style added to the backdrop can be seen.
backdropInput()
backdropScroll()
function backdropInput(){
backdropStyle();
backdrop.innerHTML = "";
let colors = ['#f33', '#3f3', '#66f'];
let i = 0
for(section of field.value.split("\n")){
backdrop.innerHTML += "<span style='background-color: "+colors[i]+"'>"+section+"</span><br>"
i < colors.length-1 ? i++ : i = 0
}
}
function backdropScroll(){
backdrop.scrollTop = field.scrollTop;
}
function backdropStyle(){
let css = window.getComputedStyle(field);
let cssstring = "";
for (let i = 0; i < css.length; i++) {
cssstring +=(css[i] +': '+css.getPropertyValue(css[i])+";");
}
backdrop.style = cssstring;
backdrop.style.position = 'absolute';
backdrop.style.zIndex = '-1'
backdrop.style.overflow = 'hidden';
backdrop.style.backgroundColor = '#fff';
backdrop.style.fontColor ='#f00';
backdrop.style.resize = 'none';
}
//=================================================================================
//=================================================================================
//textarea resize
document.getElementById("field").addEventListener("mousedown", function(){
backdrop.style.display = 'none'
})
document.getElementById("field").addEventListener("mouseup", function(){
backdropStyle();
});
#field{
height: 200px;
width: 200px;
background-color: rgba(0, 0, 0, 0);
}
<div id="backdrop"></div>
<textarea id='field' oninput="backdropInput()" onscroll="backdropScroll()">
This is red.
This is green.
This is blue and keep the same if there is not enough space.
This is red.
This is green.
This is blue and keep the same if there is not enough space.
And the colors keep looping
</textarea>

Overlay element at top-left corner of centered image

I have an image which is currently centered on the screen using flexbox:
.center-flex {
display: flex;
justify-content: center;
}
<div class="center-flex">
<img id="revealImage">
</div>
I am attempting to dynamically create a div that needs to be placed at the upper-left hand corner. I have tried the following to get the computed left on the image but it does not work as it returns auto due to the flex layout.
const revealImage = document.getElementById('revealImage');
const left = window.getComputedStyle(revealImage,null).getPropertyValue('left');
let square = document.createElement('div');
square.style.height = '100px';
square.style.width = '100px';
square.style.zIndex = '2';
square.style.position = 'absolute';
square.style.backgroundColor = 'red';
square.style.top = 0;
square.style.left = left;
console.log('left: ' + left);
This results in a properly overlayed red box but it is centered and not set left.
I would suggest a different approach in the html, by using the picture element in order to wrap the red square.
For example,
html:
<div class="center-flex">
<picture>
<img id="revealImage">
</picture>
</div>
css:
picture {
position: relative;
}
js:
const picture = document.querySelector('picture');
const square = document.createElement('div');
square.style.height = '100px';
square.style.width = '100px';
square.style.zIndex = '2';
square.style.position = 'absolute';
square.style.backgroundColor = 'red';
square.style.top = 0;
picture.appendChild(square)
https://jsfiddle.net/kongallis/ju16rdfL/9/
I think you made a small mistake(if I do not mistake):
Seem this is mistake:
square.style.left = left;
do:
square.style.left = 0;
is it right?

image fading out when size is big using HTML drag

We are using drag & drop feature of HTML.
As you can see div width is 410px and if start dragging this div, its ghost image of it fades out completely. I have big/large images to display while dragging them and as they are big in size they start to fade out completely. Is there any problem ?
If I change div width to 210px then the ghost image looks fine. Then what's the problem with 410px is there any limit to it? If yes, how can I increase it ?
var els = document.getElementsByTagName('div');
for (var i = 0, l = els.length; i < l; i++) {
els[i].addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', e.target.innerText);
});
}
div {
display: inline-block;
line-height: 300px;
text-align: center;
background: orange;
margin: 20px;
}
<div draggable="true" style="width:410px">Item 2</div>
hide original image using event.dataTransfer.setDragImage(new Image(), 0, 0);
on dragstart. onDrag get the ghost image, update position using event.pageX, evenet.pageY
onDrag(event){
event.preventDefault();
const parentElement = <HTMLDivElement>(document.querySelector('.darggable-ghost-wrapper'));
parentElement.style.position = "fixed";
parentElement.style.left = event.pageX + "px";
parentElement.style.top = event.pageY + 5 + "px";
parentElement.style.opacity = ArhitectUtlityConstants.GHOSTPREVIEW.ghostOpacity;
parentElement.style.border = "1px solid green !important";
}

How to Change the Fixed Position Styles Dynamically - using JavaScript. Set position name, Values

var btn = document.querySelector('.btn');
btn.style.position = "fixed";
btn.style.bottom = "100px";
btn.style.right = "100px";
/* here the bottom and right is not fixed - and value 100px is also not fixed
- this values are given user - a user may select postion to top left, top right, bottom left */
/* An example - this are user given values - and based on this values how can i set the positon */
var position_1 = "top";
var position_2 = "right"
var position_1_value = "100px";
var postion_2_value = "100px";
var dynamic_btn = document.querySelector('.dynamic-btn');
dynamic_btn.style.position = "fixed";
/* dynamic_btn.style.top = position_1_value; */
dynamic_btn.style.position_1 = position_1_value;
/* dynamic_btn.style.right = postion_2_value; */
dynamic_btn.style.position_2 = postion_2_value;
<button class="btn">hello</button>
<button class="dynamic-btn">Dynamic button</button>
Have to change the Styles using JavaScript
var btn = document.querySelector('.btn');
btn.style.position = "fixed";
btn.style.bottom = "100px";
btn.style.right = "100px";
This is some thing like static. - with know values we did;
But In our case user will give the position name, value.
User may choose any position - bottom, right, top, left and can add any value like 10px, 100px
something I tried, but unable to add the position name
var position_1 = "top";
var position_2 = "right"
var position_1_value = "100px";
var postion_2_value = "100px";
var dynamic_btn = document.querySelector('.dynamic-btn');
dynamic_btn.style.position = "fixed";
/* dynamic_btn.style.top = position_1_value; */
dynamic_btn.style.position_1 = position_1_value;
/* dynamic_btn.style.right = postion_2_value; */
dynamic_btn.style.position_2 = postion_2_value;
Demo
You can change the style using square brackets:
dynamic_btn.style[position_1] = position_1_value;
This way, you can access values of dynamically named properties.
This maybe can help you, let me know if it's right or you need some more info.
document.getElementById("xyz").style.setProperty('padding-top', '10px');
// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');
If you need you can replace "getElementById" with "getElementsByClassName".
I've found the answer in this question on stackoverflow https://stackoverflow.com/a/46754513/6821907
This JSFiddle could help you, basically by setting the button with a relative position inside a div with a specific height you are allowed to move the control freely inside that div
JavaScript
document.querySelector('.move').addEventListener('click', function () {
var dynamicBtn = document.querySelector('.dynamic-btn');
var top = document.querySelector('#top');
var left = document.querySelector('#left');
dynamicBtn.style.position = 'relative';
dynamicBtn.style.top = top.value + 'px';
dynamicBtn.style.left = left.value + 'px';
});
CSS
.main {
height: 100%;
}
.controls {
height: 10%;
}
.space {
height: 90%;
}
HTML
<div class="main">
<div class="controls">
<button class="move">move</button>
<input type="number" placeholder="top" id="top" value="10" />
<input type="number" placeholder="left" id="left" value="20" />
</div>
<div class="space">
<button class="dynamic-btn">Dynamic button</button>
</div>
</div>

Some div(s) not displaying when using createElement and appendChild

I am trying to create 4 div(s) that are supposed to have a width of 5px and sit at the top, bottom, left and right margins of the viewport, essentially acting all together as a frame or border to the page.
Here is my code:
function border () {
edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.left = 0;
edgeT.style.top = 0;
edgeT.style.right = 0;
edgeT.style.width = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.left = 0;
edgeB.style.right = 0;
edgeB.style.bottom = 0;
edgeB.style.width = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.bottom = 0;
edgeL.style.width = "5px";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.top = 0;
edgeR.style.bottom = 0;
edgeR.style.right = 0;
edgeR.style.width = "5px";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
}
For some reason, when calling the function, the left and right divs (i.e. edgeL and edgeR) are displayed properly, but there is no trace of edgeT and edgeB (top and bottom ones). I cannot understand why since the code is exactly the same for all four of them. FYI the problem is relevant in both Chrome and Firefox.
I know I could use CSS to achieve the same result, but since this is mostly a learning exercise I would still like to understand what is causing the issue in this case.
Thank you all in advance for your help.
Regards,
You should define for the top and bottom divs width: 100% and height: 5px (they're aligned horizontally) and for the left and right divs width: 5px and height: 100% (aligned vertically).
var edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.top = 0;
edgeT.style.left = 0;
edgeT.style.width = "100%";
edgeT.style.height = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
var edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.bottom = 0;
edgeB.style.left = 0;
edgeB.style.width = "100%";
edgeB.style.height = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
var edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.width = "5px";
edgeL.style.height = "100%";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
var edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.right = 0;
edgeR.style.top = 0;
edgeR.style.width = "5px";
edgeR.style.height = "100%";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
If you want to see the top and the bottom then you need to give them a height, not a width.

Categories