Let the div fill in the rest of my html - javascript

I have created a header, body and footer for my html. Below is the code:
JSFIDDLE
JSFIDDLE
I have made my body (#number) to have a background of red color but it won't show up. I did not set the height of it and just set it to 100% because I just want it to fill into the middle of the page. Why is it the red background won't show up?

If you won't add a min-height attribute in css like:
#numbers {
min-height:30px;
}
or
<div id="numbers" style="min-height:30px" class="container-fluid"></div>
you can also think about adding a space in this div: see here
or you add the background-color to your #holder

#header {
background-color: #273746;
height: 55px;
box-shadow: 2px 2px 2px 2px;
}
#numbers {
background-color: red;
height: 83vh;
}
#keypad {
height: 30px;
background-color: springgreen;
text-align: center;
box-shadow: 15px 15px 15px 15px black;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
<div id="holder">
<div id="header" class="container-fluid">
<div class="navbar">
<a class="navbar-brand">Keypad <span id="counterId"></span></a>
</div>
</div>
<div id="numbers" class="container-fluid">
</div>
<footer class="footer">
<div id="keypad" class="container-fluid">
<a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
</a>
</div>
</footer>
</div>

To do that, you have to set the height of all the parents of the div.
Add this css -
html, body, #holder {
height: 100%;
}
https://jsfiddle.net/o5rw4b82/6/

You can do this nicely with flexbox
#header{ background-color: #273746 ; height:55px; box-shadow: 2px 2px 2px 2px;}
#numbers{background-color: red; flex-grow:1; }
#keypad{height:30px;background-color: springgreen; text-align: center; box-shadow: 15px 15px 15px 15px black;}
#holder {
height:100vh;
display:flex;
flew-wrap:wrap;
flex-direction:column;
}
body {
margin:0;
}
<div id="holder">
<div id="header" class="container-fluid">
<div class="navbar">
<a class="navbar-brand">Keypad <span id="counterId"></span></a>
</div>
</div>
<div id="numbers" class="container-fluid">
</div>
<footer class="footer">
<div id="keypad" class="container-fluid">
<a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
</a>
</div>
</footer>
</div>

Related

Is there a way to get css width:auto working when contents flows around a floated element?

I have a div which I need to expand to show the contained text and only wrap the text once the div would exceed the specified max-width. This works fine if the div content is just text but if the text floats around a floating element, the width of the div is calculated as if the floating element were not there. This causes the text to wrap even though the div is well below it's max-width.
See example below with two divs that are identical apart from the second having a floated box in the corner.
Clicking the button repeatedly in the first div correctly causes the div to expand correctly so the text only starts to wrap when the 500px max-width is reached.
When you do the same to the second div the div does not correctly expand to contain the contents without the text wrapping. It appears the div width only increases when the text content reaches the length if it were not flowing around the floated div.
Short of a javascript to calculate and manually adjust the width, is there a way in CSS to make the auto width behave as expected?
function fillDialog(el) {
var contents = el.parentElement.getElementsByClassName('content');
var old_html = contents[0].innerHTML;
contents[0].innerHTML = old_html+" more text";
}
#page {
background:white;
width:100%;
height:600px;
position:relative;
padding:20px;
}
.dialog {
position: relative;
clear:both;
float:left;
border: 2px black solid;
margin-top:20px;
padding:20px;
min-height:120px;
width:auto;
min-width:200px;
max-width:500px;
box-sizing: border-box;
}
.modalButton {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.icon {
float:left;
width:30px;
height:30px;
background-color:cornflowerblue;
margin:0px 10px 10px 0px;
padding:10px;
border:1px black solid;
text-align: center;
font-size: 30px;
}
<div id="page">
<div style="width:200px; float:left; background-color: #999;">200px</div>
<div style="width:300px; float:left; background-color: #BBB;">500px</div>
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="icon"> ! </div>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
</div> <!-- close page -->
You can use display flex to get what you want.
function fillDialog(el) {
var contents = el.parentElement.getElementsByClassName('content');
var old_html = contents[0].innerHTML;
contents[0].innerHTML = old_html+" more text";
}
#page {
background: white;
width: 100%;
height: 600px;
position: relative;
padding: 20px;
}
.dialog {
width: fit-content;
position: relative;
display: flex;
border: 2px black solid;
margin-top: 20px;
padding: 20px;
min-height: 120px;
min-width: 200px;
max-width: 500px;
box-sizing: border-box;
}
.modalButton {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.icon {
flex-shrink: 0;
width: 30px;
height: 30px;
background-color: cornflowerblue;
margin: 0px 10px 10px 0px;
padding: 10px;
border: 1px black solid;
text-align: center;
font-size: 30px;
}
<div id="page">
<div style="width:200px; float:left; background-color: #999;">200px</div>
<div style="width:300px; float:left; background-color: #BBB;">500px</div>
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="icon"> ! </div>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
</div> <!-- close page -->

How to Make Part of an Element Disappear When It's Behind Another

I'm trying to make the borders to disappear only when they are behind the other elements. Similar to the screenshot. Does anyone know how to make the certain part of the border to disappear once it goes behind another element.
When .border goes behind .mobile-toggle and .hero-details I want that specific part of .border to disappear. So it looks cuts off, like it shows in the image.
Here's the page https://wordpress-324331-1192326.cloudwaysapps.com/ and below it's simplified code.
Here's a Codepen simplified example: https://codepen.io/elemusma/pen/RwPXMRJ?editors=1100
HTML
<a href="#" class="toggle">
<span style="border-top:2px solid black;with:50px;height:50px;"></span>
</a>
<button class="navbar-toggle mobile-toggle" type="button" id="open-button" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
<span></span>
<span></span>
</button>
<div class="home" id="home" style="background:url('https://wordpress-324331-1192326.cloudwaysapps.com/wp-content/uploads/2020/04/Welcome-Luxury-Compass.jpg');">
<div class="border"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2054761/Luxury-Logo.png" width="250" class="logo"/>
<div class="hero">
<div class="hero-details text-center">
<h4 class="bodoni subtitle">Positioning</h4>
<h6>You to a <strong>Higher Level</strong></h6>
</div>
</div>
</div>
CSS
.home{
position:relative;
height:500px;
}
.mobile-toggle{
position:absolute;
bottom:90px;
z-index:9;
}
.mobile-toggle span {
display: block;
width: 36px;
height: 7px;
background: #232323;
content: "";
margin: 3px 0px;
}
.hero {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
transform:translate(100%, -50%);
position:absolute;
}
.border{
position:absolute;
border:1px solid black;
height:90%;
width:90%;
}

Set background of container depends on the height of the inner box

I want to implement the effect below:
I try to set the footer part (yellow part in the picture):
<style>
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>
</body>
but it will cover the inner box (green part in the picture), so how to make the yellow part under the green part. The height of the green part is not fixed.
Add position: relative + z-index: 1 to list-container
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
z-index: 1;
position: relative;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>

Loading screen coverd by the footer

I made a loading screen on my personal website. I found that the footer will cover my loading screen when I go into the website.
I want my loading screen can cover the entire screen when I go into the website. How can I do that?
This is my code, css and js.
<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by User</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
</div>
</footer>
#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}
img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}
$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})
add z-index: 999; to div.load_screen
Add #cfooter {z-index: 1}
and add top and left 0.
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left:0;
}
Here is the working example. I have added red background just to test it:
https://jsfiddle.net/o7wd4mfp/4/

Div hidden until I click text/button, appears, then when I click on another, it disappears and the other one is visible [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
How do I do that? This is what I have so far:
<!DOCTYPE HTML>
<html>
<style>
#charset 'UTF-8';
#import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
body {
background: #fff;
}
body,
input,
textarea,
select {
font-family: 'Source Sans Pro', sans-serif;
font-size: 19pt;
font-weight: 300;
line-height: 1.75em;
color: #888;
}
}
header {
margin: 0 0 2em 0;
}
header > p {
margin: 1em 0 0 0;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #E27689;
border-bottom-color: rgba(255, 255, 255, 0);
}
.image.avatar48 img {
width: 70px;
height: 60px;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 375px;
height: 100%;
color: #fff;
background: #222629;
box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
text-align: right;
}
#logo {
position: relative;
margin: 1.75em 1.5em 1.5em 1.5em;
min-height: 48px;
cursor: default;
}
#logo h1 {
position: relative;
color: #fff;
font-weight: 600;
font-size: 1em;
line-height: 1em;
}
#logo p {
position: relative;
display: block;
font-size: 0.6em;
color: rgba(255, 255, 255, 0.5);
line-height: 1.25em;
margin: 0.5em 0 0 0;
}
#logo .image {
position: absolute;
left: 0;
top: 0;
}
#nav ul li a {
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#main > section {
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
position: absolute;
top: 30%;
left: 50%;
}
.portfolio {
position: relative top: 20%;
left: 50%;
visibility: hidden
}
</style>
<head>
<title>Ryan H</title>
</head>
<body>
<div id="header" class="skel-layers-fixed">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar48"><img src="http://i.imgur.com/r3HkBkB.jpg" alt="" /></span>
<h1 id="title">Ryan Ho</h1>
<p>13 years old</p>
</div>
<nav id="nav">
<ul>
<li><span class="icon fa-home">Intro</span>
</li>
<li><span class="icon fa-user">About Me</span>
</li>
<li><span class="icon fa-user">Stuff</span>
</li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Intro -->
<section id="top" class="one dark cover">
<div class="container">
<header>
<h2 class="alt">I am Ryan H.</h2>
</header>
</div>
</section>
<!-- About Me -->
<section id="about" class="two">
<div class="container">
<header>
<h2>About Me</h2>
</header>
<p>Site In Progress</p>
</div>
</section>
<section id="portfolio" class="three">
<div class="container">
<header>
<h2>Stuff</h2>
</header>
<p>This is where I would put my stuff, if I had any.</p>
</div>
</section>
</div>
</body>
</html>
Would I have to use jQuery or Javascript? If so, what is it? I am stuck.
Using jQuery...
http://jsfiddle.net/v6kxc2uk/
<div id="1" style="display: none;">some text</div>
<div id="2" >some more text</div>
<button linkto="1">1</button>
<button linkto="2">2</button>
$('button').on('click', function(){
$('div').hide();
$('div#'+$(this).attr('linkTo')).show();
});

Categories