Creating divs that stand side by side - javascript

I want to create divs that stand side by side with and each one fill 25% of the screen in height and width. My script creates divs with 25% height and width, but they stay one below the other. My script is:
function createDiv() {
var div_created = document.createElement("div");
div_created.setAttribute("class", "div1");
document.body.appendChild(div_created);
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="estilo_segundo.css">
<body>
<button onclick="createDiv()">Click</button>
</body>

.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float:left;
}

Add html,body style & inside div1 add float:left;
html,body
{
width: 100%;
height: 100%;
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float:left;
}
Live Demo Here
Snippet Example
function createDiv() {
var div_created = document.createElement("div");
div_created.setAttribute("class", "div1");
document.body.append(div_created);
}
html,
body {
width: 100%;
height: 100%;
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button onclick="createDiv()">Click</button>
</body>

You could use the display: table; in a wrapper div and simplify your JS:
<html><head>
<script type="text/javascript">
function createDiv() {
document.getElementById('div1').innerHTML += '<div></div>';
}
</script>
<style type="text/css">
#div1 {
width: 100%;
height: 100%;
display: table;
background-color: #000000;
}
#div1 div {
display: table-cell;
border: 1px solid green; /* green for display */
}
</style>
</head><body>
<button onclick="createDiv()">Click</button>
<div id="div1" name="div1"></div>
</body></html>
This adds an inner 'cell' to the div1 wrapper div. Since the wrapper takes up the display height/width, each inner div has an 'auto' width to it (as a table <td> would).

Related

Make div contained inside the grand parent?

Say I have 3 divs grandParent, Parent, and Child. Though parent's tag is inside the grandParent, using position: absolute; the parent is rendered outside the grandParent.
Now I have a child whose height and width is 100%, it is rendered outside the grandparent.
How to force the child to render inside the grandParent only. I want the green div to be fully inside the red div. And yellow div to remain partially outside the red div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
You should use position: relative; for the grand parent div. Like this code:
.grandParent {
width: 600px;
height: 700px;
background-color: red;
position: relative; /* add this line */
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(227px, 9px) rotate(0deg); /* modify this line */
}
Read the documentation for the div positioning.
I was able to achieve this by setting absolute positioning on the child div. Note that I have set arbitrary values to get the child div inside the grandparent div separated from the parent div. Make sure you set the desired width on the child div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
position: absolute; /* add from here */
left: -370px;
top: 100px;
width: 360px; /* to here */
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>

Automatically move the divs on the left and right of a center div below the center div using only css

I know styling divs inline will automatically wrap the divs to the next line if they don't fit in the viewing window, and that this is used in some situations for a quick and dirty mobile version of a site.
I want to do that, but with both sides simultaneously. It will make more sense when you check out the jsfiddle. Is this even possible with css, or is it not powerful enough?
<!DOCTYPE html>
<html>
<head>
<style>
.a {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
float:none;
border: 1px solid blue;
background-color: yellow;
}
.b {
display: inline-block;
width: 200px;
height: 100px;
padding: 5px;
float:none;
border: 1px solid blue;
background-color: yellow;
}
.c {
display: inline-block;
width: 100px;
height: 100px;
float:right;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<div> <div class="a">should end up below on left</div> <div class="b">center div should end up on top</div> <div class="c">should end up below on right</div></div>
</body>
</html>
You can use flex and the order attribute. This is an example. You just need to configure it to your needs
html, body{
height: 100%;
}
body{
margin: 0;
}
.wrapper {
display: flex;
width: 100%;
height: 100px;
}
.box {
width: 20%;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
.box.a {
order: 1;
}
.box.b {
width:30%;
order: 2;
}
.box.c {
margin-left: auto;
order: 3;
}
#media all and (max-width: 600px) {
.wrapper{
flex-wrap: wrap;
}
.box.a {
width: 47%;
margin: 0;
order: 2;
}
.box.b {
width: 100%;
order: 1;
}
.box.c {
width: 47%;
margin: 0;
}
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="a box">should end up below on left</div>
<div class="b box">center div should end up on top</div>
<div class="c box">should end up below on right</div>
</div>
</body>
</html>

CSS border-radius of a div:after pseudo element rendering wrong on first load

I've been playing around with changing an images color overlay, through the use of a div:after pseudo element, with matching border-radius.
https://jsbin.com/konopak/1/edit?html,output
You will notice on first load the background color is a solid square, but if you shift the frame, or change any element on the page it renders it properly. Is there a way to make it render properly on first load? Why is this happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
max-width: 100%;
height: auto;
border-radius: 90px;
}
.hero-image {
position: relative;
max-width: 200px;
display: flex;
background-color: #ff000050;
/* border-radius: 90px; */
}
.hero-image:after {
position: absolute;
height: 100%;
width: 100%;
background-color: inherit;
top: 0;
left: 0;
display: block;
content: "";
border-radius: 90px;
}
</style>
</head>
<body>
<label id="color-label" style="background-color: #ff0000; height: 18px; width: 18px; border-radius: 10px; cursor: crosshair;">
<input id="color-tag" type="color" value="#ff0000" style="visibility: hidden;">
</label>
<div class="hero-image">
<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400" id="cat" alt=""/>
</div>
<script>
const label = document.getElementById('color-label');
document.getElementById('color-tag').addEventListener('change', function () {
label.style.backgroundColor = this.value;
let imgDom = document.querySelector('.hero-image');
imgDom.style.backgroundColor = this.value + '40';
// imgDom[0].style.backgroundColor = this.value;
});
</script>
</body>
</html>
You can simply add overflow: hidden; to the parent and remove the additional border-radius properties and display: flex which is causing the display issue in safari.
I suggest making a few updates as per below to help with image scaling too:
img {
width: 100%;
height: auto;
}
.hero-image {
position: relative;
max-width: 200px;
max-height: 200px;
background-color: #ff000050;
border-radius: 90px;
overflow: hidden;
}
.hero-image:after {
position: absolute;
height: 100%;
width: 100%;
background-color: inherit;
top: 0;
left: 0;
display: block;
content: "";
}
The container parent's radius + overflow should be all that's needed and the additional child properties are superfluous.
JSbin update

Place elements on(not append) the dynamically created div

I use JavaScript to dynamically create a line. Then I do not know how to place two balls on the 1/3 of length to the beginning and 1/3 of length to the end. Please see the picture below. I want two balls showing up when I press enter in the input box. I tried to use append but clearly this did not work. The code below is the html, css, js code. Hope someone could help me out. Thank you in advance.
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>
</body>
</html>
css:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
width: 300px;
height: 200px;
position:absolute;
float:left;
}
.line {
width: 125px;
height: 80px;
float:left;
margin-right: 20px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
#ball{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
js:
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
//$('#hr1').css("border-bottom-color", "red");
/*how to put the ball on the line*/
}
});
});
function make() {
var one = document.createElement('div');
one.className = "line";
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
one.append(hr);
$('#output').append(one);
}
Just modified your code as per requirement.
No need of div with class line.
If you want balls to be appended from js, you can include them in js.
I Hope this helps you.
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
$('#hr1').css("border-bottom-color", "red");
$('.ball').css("display", "inline-block");
}
});
});
function make() {
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
$('#output').prepend(hr);
}
.deco {
border-bottom: 1px solid black;
width: 100%;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
position: relative;
width: 125px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
.ball{
display: none;
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
z-index: 100;
}
.first-ball {
left: calc(33.3% - 10px);
}
.second-ball {
right: calc(33.3% - 10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id = "output">
<div class="ball first-ball"></div>
<div class="ball second-ball"></div>
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>

div with mouseover does not show as expected?

I looked over this page trying to make a simple mouse over menu work (based on the user:sarfraz' answer). I'm not sure if I'm missing the JavaScript but it seems there shouldn't be any. If I load the page I get a div with "menu" written into a box and moving the mouse over it keeps it there only once. After the mouse is taken off the div box vanishes never to be seen again. I've tried messing with the visibility style in the menu id, setting it to visible or hidden and I've also tried setting the style display:none; with no luck. I also found this page but that one has a permanent list which doesn't vanish with onmouseout. Should I just color the li tag the same as the background and use that?
<html>
<head>
</head>
<style>
body
{
background-repeat:repeat;
background-color: white;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
}
#menu
{
position: absolute;
margin: 0 auto;
height: 100px;
width: 300px;
top: 70%;
left: 40%;
background-color: white;
border:2px solid;
border-color: purple;
}
</style>
<body>
<div id='menu' onMouseOver="this.style.visibility = 'visible';" onMouseOut="this.style.visibility = 'hidden';">menu</div>
</body>
</html>
When he gets visibility = hidden, do not be mouseOver, so the code does not run
Alternative: http://jsfiddle.net/V5QrZ/
Use Jquery
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
body
{
background-repeat:repeat;
background-color: white;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
}
#menu
{
position: absolute;
margin: 0 auto;
height: 100px;
width: 300px;
top: 70%;
left: 40%;
background-color: white;
border:2px solid;
border-color: purple;
}
</style>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("#menu").hide()
});
$("p").mouseout(function(){
$("#menu").show()
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
<div id='menu' >menu</div>
</body>
</html>

Categories