Overlay element at top-left corner of centered image - javascript

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?

Related

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>

Why squares don't fit inside div

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";

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.

CSS resize images to fit in div and be reponsive

I am using bootstrap3 on a site that allows users to upload images of their own. These images are later displayed in a given page. Problem is, some users upload photos that are either bigger or smaller in respect to the div that'll hold them. I wish to resize all these images using CSS (or even JavaScript if need be) in order for them to fit in the div whilst maintaining their aspect ratio. At the same time, I want them to be responsive.
Use the img-responsive class on your image.
From the Bootstrap documentation: "Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element."
Try this: https://jsfiddle.net/murkle/10jd0khz/1/
function openImageInLightBox(imageBase64) {
div = document.createElement("div");
div.id = "myLightboxDiv";
div.style.width = "80%";
div.style.height = "80%";
div.style.position = "fixed";
div.style.top = "10%";
div.style.left= "10%";
div.style.border = "7px solid rgba(0, 0, 0, 0.5)";
div.style.background = "#000";
div.style["background-image"] = "url('" + imageBase64 + "')";
div.style["background-size"] = "contain";
div.style["background-repeat"] = "no-repeat";
div.style["background-position"] = "center";
div.onclick = function() {document.body.removeChild(div);};
document.body.appendChild(div);
// now add transparent image over it
// so that "Save image as..." works
// remove this if you don't need it
var elem = document.createElement("img");
elem.src = imageBase64;
elem.style.height = "100%";
elem.style.width = "100%";
elem.style.opacity = 0;
div.appendChild(elem);
}

Dynamic div in Javascript

I need to implement a dynamic div that pops up for each user. I need it to float over a Google map and each new div would appear below the previous one. It would end up being a stack of users essentially. Right now I have a table that adds a new row each time, but I am having trouble referencing each individual cell. Any advice on how to dynamically create a new div and make the new div appear under the other one(s)? It will float in the bottom left corner of the screen. Any help would be great. Thanks!
EDIT:
Here is some code that will show a div by pressing a button. What do I need to add to make a new div appear under the previous one?
function creatediv(id, html, width, height, left, bottom) {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
if (width) {
newdiv.style.width = 200;
}
if (height) {
newdiv.style.height = 50;
}
if ((left || bottom) || (left && bottom)) {
newdiv.style.position = "fixed";
if (left) {
newdiv.style.left = left;
if (bottom) {
newdiv.style.bottom = bottom = "10";
}
}
newdiv.style.background = "#FFFFF";
newdiv.style.border = "4px solid #000";
if (html) { newdiv.innerHTML = html;
}
else {
newdiv.innerHTML = "nothing";
}
document.body.appendChild(newdiv);
}
}
</script>
</head>
<div>
<input type="button" onclick="creatediv(id, 'User 1', 'width', 'height', 'left', 'bottom')" value="Create Div"/>
</div>
</html>
Keep a record of the top/bottom etc of the previoisly made div. Also the z-index. Now simply set the top/etc of the new div to a slightly shifted value, and increment the z-index. Repeat.

Categories