so i'm relatively new to programing,and i wanted to create a loader that whenever the page loads or refreshes it shows a centered loading animation that greys out and fades the entire page then all goes back to normal when the page fully loads.
i managed to get everything else working except centering the animation and fading/greying the page. idk if i'm missing something really obvious but i've searched everywhere and i didn't quite get what i wanted.
here's the html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>S&B Clothes</title>
<link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>
<body id="body">
<!--Navbar-->
<nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="logo/logo_svg.svg" class="rounded" id="navbar_logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
<div class="container_menu" onclick="menu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="men_women">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
</li>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
</li>
</ul>
</div>
<div class="input-group rounded">
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
<button type="button" class="btn rounded" id="src_btn">Search</button>
</div>
<div>
<button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
<img src="Icons/user-white.png" id="user_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
<img src="Icons/favorite-white.png" id="favorite_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
<img src="Icons/shopping-cart-white.png" id="shop_cart_ico"/>
</button>
</div>
</div>
</nav>
<!--Loader-->
<div class="preloader" id="ld">
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
here's the js
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
all the css i've done so far is just loader style and coloring nothing really related to positioning.
i tried putting my loader in a container and centering that but it didn't work out as planned and the navbar didn't get greyed out
thank you all
Ok you are asking how to create an overlay and center your loading widget in the middle of the screen. There are a lot of ways your could do this, here is one of them.
function removeOverlay() {
const overlay = document.querySelector('#overlay');
overlay.classList.remove('show');
document.body.style.overflow = 'auto';
}
body {
overflow: hidden;
}
#overlay {
background-color: rgba(255,255,255,0.7);
display: none;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
#overlay.show {
display: block;
}
#overlay-container {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: 100%;
}
<article>
<header><h2>My Article</h2></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</article>
<div id="overlay" class="show">
<div id="overlay-container">
<h3>Loading ...</h3>
<p>Place your loading widget in the overlay-container</p>
<button onclick="removeOverlay()">Remove Overlay</button>
</div>
</div>
Related
I want my footer to be at the bottom of the page. Not at the bottom of the content in the DIV that its in. But I also want the footer to dynamically resize when the side bar on the page is opened and closed.
I've spend TOO long trying all options I can find on google with no luck. The best I've managed is to have the footer across the whole page including overlapping the sidebar which is not what i'm after.
Side note:
I also want main content to not scroll under the footer and stop just above. I.e the scroll bar for this div to stop just above the footer if this is easily achievable?
Have a look at Facebook messenger web for a perfect example. The left sidebar and centre content is what I'm looking for.
Can anyone assist?
Example jsfille here:
https://jsfiddle.net/pwdt95u8/1/
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Start Bootstrap</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<h1 class="mt-4">Simple Sidebar</h1>
<div class="row text-left w-50">
TEST
<footer id="sticky-footer" class="float-bottom card-footer py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
</div>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
This is best solved with CSS Grids. In fact there doesn't need to be too many changes. I have moved the footer to be the last child of the body element and added a few properties to the body style rule. (I've also made a few edits such as switching JQuery for Vanilla JS)
I added the toggle text button so you can easily toggle text within the main content area.
Here is a JFiddle of same code.
document.getElementById('menu-toggle').addEventListener('click', () => {
document.getElementById('wrapper').classList.toggle('toggled');
});
document.getElementById('text-toggle').addEventListener('click', () => {
document.getElementById('lorem-ipsum').classList.toggle('hide-text');
});
body {
display: grid;
/* last row is footer and takes whatever is its natural height.
* first row is rest of content and stretches to fill available space
*/
grid-template-rows: 1fr auto;
min-height: 100vh;
}
#wrapper {
overflow-x: hidden;
}
#sticky-footer {
flex-shrink: none;
}
#sidebar-wrapper {
margin-left: -15rem;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
.hide-text {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Start Bootstrap</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
<div class="p1">
TESTing
<br/>
<button class="btn btn-primary" id="text-toggle">toggle text</button>
<div id="lorem-ipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
<footer id="sticky-footer" class="float-bottom card-footer py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>
`
/* Style by CSS */
html,
body {
height: 100%;
}
img{
max-width: 100%;
}
/* Cover */
#cover {
background: #222 url("../images/123.jpg") center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#cover form {
justify-content: center;
}
.carousel-inner > .carousel-item > img {
width: 100%;
height: 100%;
}
.section-content {
padding: 5rem 0 0;
}
#about {
background: url('../images/girlincar.jpg') center center no-repeat;
background-size: cover;
text-align: center;
}
.about-text {
background: rgba(0,0,0,0.8);
color: white;
padding-top: 1.875rem;
}
<!DOCTYPE html>
<html lang="ro">
<head><!--STARTING HEADING-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head><!--ENDING HEADING-->
<body><!--STARTING BODY-->
<section id="cover">
<div id="cover-caption">
<div class="container-fluid">
<div class="col-sm-10 offset-sm-1">
<h1 class="display-3">Bun Venit pe site-ul nostru!</h1>
<p>Ma bucur mult ca ati trecut pe aici, in momentul de fata inca invatam cum sa construim un site si cum sa ne atragem clientii intr-un mediu virtual, indiferent de experienta noastra in vanzari, satisfacerea nevoilor clientului,marketing sau pur si simplu, completarea proiectului dumneavoastra cu MOBILA de calitate, in mediul online, mereu ai ceva de invatat.</p>
<form action="" class="d-flex justify-content-center form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">E-mail</label>
<input type="text" class="form-control form-control-lg" placeholder="Jane.Doe#Example.com">
</div>
<button type="submit" class="btn btn-success">Okay, go!</button>
</form>
<br>
↓
</div>
</div>
</div>
</section>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-full" id="nav-main">
<a class="navbar-brand" href="#">
<img src="dre.png" width="30" height="30" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">S.C. MOBPROSIM S.R.L</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ACASA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRODUSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DESPRE NOI</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="CAUTA">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">CAUTA</button>
</form>
</div>
</nav>
<section id="carousel">
<div id="carousel-home" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1"></li>
<li data-target="#carousel-home" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="assets/images/hearthand.jpg" alt="Love is in the air">
<div class="carousel-caption d-none d-md-block">
<h3>CALITATE</h3>
<p>Noi garantam calitatea produselor noastre.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/woman-camera.jpg" alt="Music is my life">
<div class="carousel-caption d-none d-md-block">
<h3>ORIGINALITATE</h3>
<p>Stilul clasic nu are pereche.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/banjo.jpg" alt="Instruments everywhere">
<div class="carousel-caption d-none d-md-block">
<h3>FUNCTIONABILITATE</h3>
<p>Usor de transportat, usor de montat, usor de apreciat.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section id="what-we-do">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<div class="card-deck">
<p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-deck">
<div class="card" style="width: 5rem;">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="section content">
<div class="container">
<div class="col-md-6">
<div class="about-text">
<h3>About us</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h5>Follow me on the web</h5>
Facebook
Instagram
Linkdel
</div>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
`https://imgur.com/a/kKaDU - Check the picture!
I am really new to web designing, an right now I am working on my first bootstrap 4 project. Everything is almost good, but the "padding" command for top spaces in css3 is not working. I want to make a gap by 80px ( 5rem ) between two sections, and I don't have a clue why is it not working. I am using sublimetext3 forwriting and google chrome for implementing. Code below.
<section id="what-we-do">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<div class="card-deck">
<p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-deck">
<div class="card" style="width: 5rem;">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
And the CSS code:
.section-content {
padding: 5rem 0;
}
Try using margins instead of paddings.
So in the code snippet you provided, the "What we do" section has correct padding. The next section "About us" does not just because you have a typo in the class name section-content vs section content (missing dash). Your screenshot shows that you are also missing padding on the "What we do" but I can't help you with that, because you did not replicate it in the snippet.
HI i reviewed your code padding-top is working fine but the problem is padding is used for maintaining space or gap with in the box only.if u want maintain space between two blocks u should have to use margin or u can assign padding to #about section that will also work .
I am pretty new to javascript, I have learned some of the basics but don't completely grasp it yet. I am trying to get the color of my nav on the right to change by adding an active class to it depending on what section I am at. I don't quite understand how I would implement appending the class to my nav item when it passes the specific div. Any help would be greatly appreciated. I just placed some random code below just so I can link the codepen. It's alot easier than me posting my entire html/css code here.
HTML
div class="global-container">
<div class="logo">
<div class="layer2">
</div>
</div>
<div class="copy">
<p>© text</p>
</div>
<div class="links">
<a href="#">
<img src="">
</a>
<br>
<a href="#">
<img src="">
</a>
</div>
<!-- End of Logo !-->
<ul class="sidebar">
<a href="#section1">
<div class="item">
</div>
</a>
<a href="#section2" >
<div class="item">
</div>
</a>
<a href="#section3">
<div class="item">
</div>
</a>
<a href="#section4" >
<div class="item" >
</div>
</a>
<a href="#section5" >
<div class="item">
</div>
</a>
</ul>
<!-- Sidebar!-->
<div class="content-container">
<div id="section1">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section1</h1>
<h2>
text
</h2>
<p>text</p>
<div class="button">
text
text
</div>
<h6 class="change">text</h6>
</div>
</div>
<div id="section2">
<div class="about-message">
<div class="left">
<h1>
Section 1</h1>
<p> text
<br>
<br>
text</p>
</div>
</div>
</div>
<div id="section3">
<div class="inner-container">
<div class="education-message ">
<h1 >
section3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div id="section4">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
Section4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="section5">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS - I want to add to .item class
.active {
background-color: red;
}
https://codepen.io/anon/pen/BZzbGz
Heres an example:
https://bonhomme.lol/
The nav-lines on the right change color as you scroll. I want to achieve this effect but the color changes depending on which section div I've reached.
First, I get the scroll position of the items in the navigation. Then add/remove the class based on the current scroll position. Check this out:
Your modified Codepen
$(document).ready(function() {
$(document).on("scroll", onScroll);
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$(".sidebar a").each(function() {
var currDiv = $(this).find("div");;
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if(refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos)
{
$(".sidebar a div").removeClass("active");
currDiv.addClass("active");
} else {
currDiv.removeClass("active");
}
});
}
});
Edit: Here's the explanation you requested of the items we're using in the IF
refElement.position().top returns how many pixels from the top of the page of that element is.
refElement.height() is returns the pixels representing the height of the element.
scrollPos returns in pixels how far down on the page we currently are.
For changing class of an element on scroll - jquery:
<script>
if($(document).scrollTop>10){
$("#myDiv).addClass("active");
}
else{
$("#myDiv").removeClass("active");
}
You have different options to do this: use a library or write the code yourself. If you chose the latter, you can try the following approaches.
1) Compare offsets
window.scrollY gives your the scroll amount of the page. element.offsetTop gives you the (fixed) offset of an element on the page. You can compare these values to determine, which element is currently in view.
2) get screen coordinates
element.getBoundingClientRect() gives you the screen coordinates of an element. You can use these to check if it is at the top of the page.
Now you just use a hook on the scroll event to check the positions and know where you are at. My code snippet only accounts for scrolling down, I leave the "scroll up" case for you to implement as an exercise.
var headings = [document.querySelector("h1"),document.querySelector("h2"),document.querySelector("h3"),document.querySelector("h4")];
var nav = document.querySelector("nav span");
var currentIndex=0;
document.addEventListener("scroll",function(){
// get the current position of the element
let currentElPos = headings[currentIndex].getBoundingClientRect().top;
// if it's near the top border update the navigation
if (currentElPos < 100){
// in your case, you would update the class
nav.innerHTML = headings[currentIndex].innerHTML;
if (currentIndex+1<headings.length) currentIndex++;
}
});
h1,h2,h3{
margin-bottom:20em;
}
h4{
margin-bottom:30em;
}
nav{
position:fixed;right:20px;top:20px;
border:2px solid red;padding:5px;
}
<nav>You are viewing:<br><span>First heading!</span></nav>
<h1>First heading!</h1>
<h2>Second heading!</h2>
<h3>Third heading!</h3>
<h4>Fourth heading!</h4>
To default open an accordion section, you need to add "is-active" class for the li tag. like this:
<li class="accordion-item is-active" data-accordion-item>
<h5>This is the title</h5>
<div class="accordion-content" data-tab-content>
<p>This is the content
</p>
</li>
So I tried to remove "is-active" class using js so that the accordion will collapse/close. But even after "is-active" class is removed, the accordion stays open. How should I collapse/close all the accordion with a single click of a button?
Here is the documentation for Zurb Accordion
Here is the script that I used, (although I dont think its relevant)
$(document).ready(function(){
$(".testClass").click(function(){
$("li").removeClass("is-active");
});
});
You can do it as follows, run the snippet and see it in action.
$(document).foundation();
function closeAll() {
$('.accroot').each(function () {
var $acc = $(this);
var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
$openSections.each(function (i, section) {
$acc.foundation('up', $(section));
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.js"></script>
<button type="button" onclick="closeAll()"> Close All </button>
<ul class="accordion accroot" data-accordion data-allow-all-closed='true'>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content>
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content>
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content>
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
To add to Jatin's answer, the "Open all" function would look like this (one other change besides 'up' to 'down'):
function openAll() {
$('.accroot').each(function () {
var $acc = $(this);
var $openSections = $acc.find('.accordion-item .accordion-content');
$openSections.each(function (i, section) {
$acc.foundation('down', $(section));
});
});
}
I know is a bit late for this, but I came across to this issue today and after expending a few hours on it (kind of new on this), using Jatin's code I create a CodePen with an example. Using a Javascript function that will Expand or Collapse not matter the states of the different Accordions (If there's a mix of open/closes).
For reference see this Codepen
$(document).foundation();
$(document).ready(function() {
$(".toggle-accordion").on("click", function() {
var accordionId = $(this).attr("accordion-id");
$(this).toggleClass("accordions-expanded");
triggerAccordions = document.querySelectorAll(".accordions-expanded");
if (triggerAccordions.length == 0) {
collapseAll();
} else {
expandAll();
}
});
});
function collapseAll() {
$(".accordion").each(function () {
var $acc = $(this);
var $openSections = $acc.find(".accordion-item.is-active .accordion-content");
$openSections.each(function (i, section) {
$acc.foundation("up", $(section));
});
});
};
function expandAll() {
$(".accordion").each(function () {
var $acc = $(this);
var $openSections = $acc.find(".accordion-item .accordion-content");
$openSections.each(function (i, section) {
$acc.foundation("down", $(section));
});
});
};
body {
color: #6a6c6f;
background-color: #f1f3f6;
margin-top: 30px;
}
.container {
max-width: 960px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.accordion-option {
width: 100%;
float: left;
clear: both;
margin: 15px 0;
}
.accordion-option .title {
font-size: 20px;
font-weight: bold;
float: left;
padding: 0;
margin: 0;
}
.accordion-option .toggle-accordion {
float: right;
font-size: 16px;
color: #6a6c6f;
}
.accordion-option .toggle-accordion:before {
content: "Expand All";
}
.accordion-option .toggle-accordion.accordions-expanded:before {
content: "Collapse All";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.1.1/what-input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<div class="container">
<div class="accordion-option">
<h2 class="title">Accordion Example</h2>
<a class="toggle-accordion accordions-expanded" accordion-id="#accordion"></a>
</div>
<br/>
<br/>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #1</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #2</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #3</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
</div>
Good Luck to everyone.
My web page which is a info screen site for big screens consists of 3 bootstrap panels two on the top (left and right) and the main panel below (a tabbed panel).
It becomes some annoying that the tab panel does not fill the rest of the display (after the top panels) when clicking on the tabs.
So I need some tips on how to solve this. I need to think about many screen formats but most important big wide screens. I have searched through the net trying to find an answer but no luck yet. Hope you can help me out
regards Geir
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Information Screen</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700,inherit,400" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!--<div id="loading">
<div id="spinner"></div>
</div>-->
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<div class="pull-left">
<h1> Information Screen</h1>
</div>
<div class="pull-right">
<h3 class="text-right">
<small><span id="divLocal"> </span></small>
</h3>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-9">
<div class="panel panel-default" id="UpperLeftPart">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Key figures 1
</div>
<!-- /.panel-heading -->
<div class="panel-body pane">
upper left
</div>
<div class="clearfix"></div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-9 -->
<div class="col-lg-3">
<div class="panel panel-default" id="UpperRightPart">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Key figures 2
</div>
<!-- /.panel-heading -->
<div class="panel-body">
upper right
</div>
<!-- /.panel-body -->
</div>
<div class="clearfix"></div>
<!-- /.panel -->
</div>
<!-- /.col-lg-3 -->
<div class="clearfix visible-lg visible-md"></div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Tabs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Profile
</li>
<li>
Messages
</li>
<li>
Settings
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h4>Home Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="profile">
<h4>Profile Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="messages">
<h4>Messages Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="settings">
<h4>Settings Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
</div>
</div>
</div>
<!-- /#page-wrapper -->
<!-- /#wrapper -->
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
You can do it that way:
HTML: I added 3 classes to identify rows and panel with tabs (you can see it on Codepen)
CSS: I set min-height and overflow-y to see the content when you browse the site on mobile devices or when height of the window is small, you can change that value and set different min-height on different screen sizes.
.panel-with-tabs {
min-height: 200px;
overflow-y: auto;
}
JS: when you resize the window, this code will calculate current window height, current height of the rows and set height value to the panel with tabs (100% of the window height minus height of the rows minus 50px to see the bottom border).
$(window).resize(function () {
var heightRows = $('.row-1').outerHeight() + $('.row-2').outerHeight();
$('.panel-with-tabs').css('height', $(window).height() - heightRows - 50);
});
$(window).trigger('resize');
CODEPEN