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.
Related
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?
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>
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";
I have a chat box where people will beable to add there own message to it but my problem is that when new messages are added it does not scroll down to reveal the new message.
I fixed this by using this code
$('.panel-body').scrollTop($('.panel-body').height()*$('.panel-body').height());
(panel-body is the class of my scrolling div)
But the problem with this is that if a user wants to scroll back up at previous messages he or she will be forced back down to the bottom. What would be the best way to stop "auto scrolling" when the user scrolls but when the user scrolls back down or just loads the page it would start up again.
function addMsg(is_admin, name, mes, time) {
var newDiv = document.createElement("div");
newDiv.className = "row";
var p = document.createElement("p");
p.className = "text-muted name";
var p2 = document.createElement("p");
var text = document.getElementById("start");
var hr = document.createElement("hr");
var times = document.createElement("p")
text.appendChild(newDiv);
newDiv.appendChild(p);
p.innerHTML = name + ":";
newDiv.appendChild(p2);
newDiv.appendChild(times)
times.className = "time";
if (is_admin) {
p.style = "color: red;";
p2.innerHTML = mes;
times.innerHTML = "time: " + time;
} else {
p2.innerHTML = mes;
times.innerHTML = time;
}
newDiv.appendChild(hr);
This is my addMsg Function that i have already created
Here's a quick attempt I threw together.
By subtracting the element's height() (jQuery) from its scrollHeight (JS) and comparing that to the user's scrollTop (jQuery scroll position), we can determine if we're currently at the bottom of the scrollable container before the new message appears.
If we are at the bottom, then keep the user down there by setting the new scrollTop. Otherwise, don't change anything. Hope this helps!
Live demonstration:
function newMsg() {
// FOR DEMO (naming each message)
var count = $('.msg').length;
// shouldScroll will be true if we're at the bottom of the
// scrollable container before the new message appears
var $panel = $('.panel-body');
var shouldScroll = $panel[0].scrollHeight - $panel.height() <= $panel.scrollTop();
// this is where you append a new message to the container
$panel.append('<div class="msg">Message ' + count + '</div>');
// if we were at the bottom before the new message,
// then scroll to the new bottom of the container
if (shouldScroll) {
$panel.scrollTop($panel[0].scrollHeight);
}
}
// FOR DEMO (new message every .5 seconds)
setInterval(newMsg, 500);
.panel-body {
border: 1px solid #000;
overflow: auto;
width: 200px;
height: 200px;
}
.msg {
border-bottom: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body"></div>
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);
}