There is this nice code to create a vertical timeline. I am editing it for my own use. However, I tried a lot to make it vertically shorter, but failed. I need to move the blocks vertically upwards so they can fill both sides of the line, instead of having empty spaces at the right or the left of the blocks and take up a smaller vertical area.
Any suggestions will be appreciated.
https://codepen.io/codyhouse/pen/FdkEf
jQuery(document).ready(function($){
var $timeline_block = $('.cd-timeline-block');
//hide timeline blocks which are outside the viewport
$timeline_block.each(function(){
if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
$(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
}
});
//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function(){
$timeline_block.each(function(){
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
}
});
});
});
#import "bourbon";
// variables - colors
$main-text: #7f8c97; // main text
$link: #acb7c0; // anchor tags
$background: #e9f0f5; // body background color
$color-1: #303e49; // blue dark
$color-2: #c03b44; // red
$color-3: #ffffff; // white
$color-4: #75ce66; // green
$color-5: #f0ca45; // yellow
// variables - fonts
$primary-font: 'Droid Serif', serif;
$secondary-font: 'Open Sans', sans-serif;
// mixins - rem fallback - credits: http://zerosixthree.se/
#function calculateRem($size) {
$remSize: $size / 16px;
#return $remSize * 1rem;
}
#mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
// mixins - border radius
#mixin border-radius($radius:.25em) {
border-radius: $radius;
}
// layout - breakpoints
$S: 320px;
$M: 768px;
$L: 1170px;
// layout - media queries
#mixin MQ($canvas) {
#if $canvas == S {
#media only screen and (min-width: $S) { #content; }
}
#else if $canvas == M {
#media only screen and (min-width: $M) { #content; }
}
#else if $canvas == L {
#media only screen and (min-width: $L) { #content; }
}
}
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
#include box-sizing(border-box);
}
body {
font: {
size: 100%;
family: $primary-font;
}
color: $main-text;
background-color: $background;
}
a {
color: $link;
text-decoration: none;
font-family: $secondary-font;
}
img {
max-width: 100%;
}
h1, h2 {
font-family: $secondary-font;
font-weight: bold;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: $L; // breakpoints inside partials > _layout.scss
margin: 0 auto;
&::after { /* clearfix */
content: '';
display: table;
clear: both;
}
}
/* --------------------------------
Main components
-------------------------------- */
header {
height: 200px;
line-height: 200px;
text-align: center;
background: $color-1;
h1 {
color: $color-3;
#include font-size(18px);
}
#include MQ(L) {
height: 300px;
line-height: 300px;
h1 {
#include font-size(24px);
}
}
}
#cd-timeline {
position: relative;
padding: 2em 0;
margin: {
top: 2em;
bottom: 2em;
}
&::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: darken($background, 5%);
}
#include MQ(L) {
margin: {
top: 3em;
bottom: 3em;
}
&::before {
left: 50%;
margin-left: -2px;
}
}
}
.cd-timeline-block {
position: relative;
margin: 2em 0;
#include clearfix;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
#include MQ(L) {
margin: 4em 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px $color-3, inset 0 2px 0 rgba(#000, .08), 0 3px 0 4px rgba(#000, .05) ;
img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
&.cd-picture {
background: $color-4;
}
&.cd-movie {
background: $color-2;
}
&.cd-location {
background: $color-5;
}
#include MQ(L) {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
.cssanimations &.is-hidden {
visibility: hidden;
}
.cssanimations &.bounce-in {
visibility: visible;
#include animation(cd-bounce-1 .6s);
}
}
}
#include keyframes(cd-bounce-1) {
0% {
opacity: 0;
#include transform(scale(.5));
}
60% {
opacity: 1;
#include transform(scale(1.2));
}
100% {
#include transform(scale(1));
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: $color-3;
#include border-radius;
padding: 1em;
box-shadow: 0 3px 0 darken($background, 5%);
#include clearfix;
h2 {
color: $color-1;
}
p, .cd-read-more, .cd-date {
#include font-size(13px);
}
.cd-read-more, .cd-date {
display: inline-block;
}
p {
margin: 1em 0;
line-height: 1.6;
}
.cd-read-more {
float: right;
padding: .8em 1em;
background: $link;
color: $color-3;
#include border-radius;
.no-touch &:hover {
background-color: lighten($link, 5%);
}
}
.cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
&::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid $color-3;
}
#include MQ(M) {
h2 {
#include font-size(20px);
}
p {
#include font-size(16px);
}
.cd-read-more, .cd-date {
#include font-size(14px);
}
}
#include MQ(L) {
margin-left: 0;
padding: 1.6em;
width: 45%;
&::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: $color-3;
}
.cd-read-more {
float: left;
}
.cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
#include font-size(16px);
}
.cd-timeline-block:nth-child(even) & {
float: right;
&::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: $color-3;
}
.cd-read-more {
float: right;
}
.cd-date {
left: auto;
right: 122%;
text-align: right;
}
}
.cssanimations &.is-hidden {
visibility: hidden;
}
.cssanimations &.bounce-in {
visibility: visible;
#include animation(cd-bounce-2 .6s);
}
}
}
#include MQ(L) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
#include animation(cd-bounce-2-inverse .6s);
}
}
#include keyframes(cd-bounce-2) {
0% {
opacity: 0;
#include transform(translateX(-100px));
}
60% {
opacity: 1;
#include transform(translateX(20px));
}
100% {
#include transform(translateX(0));
}
}
#include keyframes(cd-bounce-2-inverse) {
0% {
opacity: 0;
#include transform(translateX(100px));
}
60% {
opacity: 1;
#include transform(translateX(-20px));
}
100% {
#include transform(translateX(0));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Title of section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
Read more
<span class="cd-date">Jan 14</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Title of section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
Read more
<span class="cd-date">Jan 18</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Title of section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
Read more
<span class="cd-date">Jan 24</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Title of section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
Read more
<span class="cd-date">Feb 14</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.svg" alt="Location">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Title of section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
Read more
<span class="cd-date">Feb 18</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-movie.svg" alt="Movie">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Final Section</h2>
<p>This is the content of the last section</p>
<span class="cd-date">Feb 26</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
</section> <!-- cd-timeline -->
.cd-container has a max width which is set by breakpoints for the view size and a width of 90%.
Those, specifically- your breakpoints for the container that are limiting the width.
Use your browser debug tools dude.
Related
I have a problem when I hover my article with class="card" name inside my div class="container", it looks like the article overlaps the nav. How do I fix this without removing my transform scale in .card:hover? I want to make it without overlapping with the nav when I hover over it.
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
position: relative;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About<a/></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>
If anything is missing from the snippet, you can check my jsfiddle here
What you're experiencing is something referred to as The Stacking Context which, if you think about it from a top-down perspective, is how elements are rendered in the browser. To solve this, you can set the parent element -- in this case the header-container -- to position: relative; and give it a z-index of 1 to override the default of 0. That will elevate it above the card which is using the default of 0 even when hovered.
Here's another good explanation for it as well: https://www.joshwcomeau.com/css/stacking-contexts/
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
position: relative;
z-index: 1;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
z-index: 2;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
transition: 0.2s;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
z-index: 1;
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About</a>a></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.
</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>
try to set the z-index of the nav to 100
nav {
z-index: 100;
}
I am quite new to this, so I do not know if I have something that clashes with each other.
But I want the "textbox" to be stuck to the position under the navbar, and that it is scrollable when the information within exceeds the screen size. I also do not want the box to move when the screen gets resized, I just want the text to get smaller, like using a min-width.
I have a bit of JavaScript connected to this website too, but I do not know if it's needed to include it.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins";
}
.background {
background: linear-gradient(
to bottom left,
rgba(0, 0, 0, 0.7),
rgba(255, 255, 255, 0.4)
),
url(./Revendreth111.jpg);
width: 100%;
height: 1600px;
background-size: cover cover;
overflow: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 999;
}
li {
/* float: right; */
float: left;
border-right: 1px solid rgb(87, 87, 87);
}
li a {
display: block;
color: rgb(161, 161, 161);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: rgb(27, 27, 27);
}
a:hover {
color: #800a0a;
font-weight: normal;
}
.active {
background-color: #610707;
}
#media screen and (max-width: 600px) {
ul.navbar li.right,
ul.topnav li {
float: none;
}
}
/* Textbox */
.text-box {
background: rgba(12, 12, 12, 0.555);
color: rgb(161, 161, 161);
margin-top: -80%;
width: 70%;
height: 150%;
margin-left: auto;
margin-right: auto;
padding: 20px;
/* text-align: center; */
filter: drop-shadow(0 0.2rem 0.9rem rgba(0, 0, 0, 0.418));
backdrop-filter: blur(0.11rem);
padding: 20px;
position: relative;
/* top: 0px; */
}
#sidebar {
background-color: rgba(0, 0, 0, 0.418);
padding: 20px;
width: 40%;
}
.paragraph {
width: 90%;
padding: 20px;
}
.row {
display: flex;
}
.column {
flex: 50%;
margin-left: 3%;
}
#logo {
width: 40px;
margin: 10px;
position: relative;
/* Adjust these values accordingly */
top: 18px;
left: 5px;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: rgba(179, 179, 179, 0.568); /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 50%; /* Rounded corners */
font-size: 18px; /* Increase font size */
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.377));
}
#myBtn:hover {
background-color: #0e0e0e69; /* Add a dark-grey background on hover */
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.377));
}
/* Scroll bar customization */
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f100;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(27, 27, 27, 0.911);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.171);
}
.footer {
margin-top: 20px;
color: white;
text-align: center;
font-family: arial;
font-size: 13px;
font-style: normal;
}
<!DOCTYPE html>
<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.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./Test1.css" />
<title>PLACE HOLDER / DRAENOR-EU</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>home</li>
<li>about</li>
<li>progress</li>
<li>apply</li>
</ul>
<div class="background"></div>
<div class="text-box">
<div class="row">
<div class="column"><h1><img src="./logo.png" alt="" id="logo"> Welcome to Place Holder</h1>
<p class="paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima non aspernatur ab architecto asperiores nemo odit dolorum explicabo autem eaque hic deserunt facere impedit maiores debitis obcaecati quibusdam vel et eveniet blanditiis recusandae nihil, modi earum odio? Repellendus dolorem atque dolor quisquam, fugit et ipsa. Dolorem facilis totam dolore aliquam.
</p>
<p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis repellat minus quas. Debitis explicabo, laborum quasi at facilis assumenda alias itaque eum! Maiores dolores neque mollitia odit nulla cumque, illum cum reiciendis deserunt eveniet! Est beatae architecto, minus, aut, alias soluta tempore quos numquam quod accusantium quidem corrupti ex suscipit?</p></div>
<div class="column" id="sidebar"><h2>RECRUITMENT</h2>
<p class="paragraph">Temporibus sed, quidem quo amet animi explicabo beatae illo aperiam numquam asperiores.</p></div>
</div>
</div>
</div>
</div>
<div class="footer">
Copyright © Place Holder 2021. All rights reserved.
<button onclick="topFunction()" id="myBtn" title="Go to top">▲</button>
</div>
<!-- FOOTER -->
</body>
</html>
<script type="text/javascript" src="./test1.js"></script>
not sure but....
Try using
Width="" or height=""
(IN SIDE THE DIV BLOCK)
{not verified to work}
Also! welcome to stackoverflow NEW MEMBER!
I have a problem. I made the following tabbedPage, but the hidden content still takes up space. Here is the code:
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
opacity: 1;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
Now the TabbedPage is working the way I want, except that the content of a tab always uses space while not being showed. I can fix it by setting position: absolute;, but then the content goes trough the footer, which is also not allowed. So how can I remove the space that a hidden tab uses, while not going trough the footer?
You should use display instead of opacity.
But you should also set div to display: block; in div.active as below:
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
Pay attention that if you want to set div into div.active with a different displaythan you need to add !important to make sure that it will be taken correctly.
You also need to change some js in your for loop as below:
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
And to make it works I was adding classes and id such as stat and userManagement because it was not identifying correctly the div anymore.
DEMO (Simple example):
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
statistics
</div>
<div class="userManagement">
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
<div>DIV IN DIV 2</div>
</div>
<div id="userManagement">
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
DEMO (Large example):
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*-------------Statistics---------------*/
.activity-24h-title {
color: #000000;
font-size: 30px;
font-weight: bold;
}
.activity-24h {
width: 100%;
height: 125px;
background-color: #F6F6F6;
display: flex !important; /** Add !important **/
align-items: center;
justify-content: center;
}
.activity-24h .stat-frame {
position: relative;
width:calc(100% / 5 - (4 * 2px));
display: flex !important; /** Add !important **/
flex-direction: column
}
.activity-24h .stat-frame-title {
color: #000000;
font-size: 22px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
.activity-24h .stat-frame-value {
color: #d81e05;
font-size: 42px;
font-weight: bold;
width: 100%;
text-align: center;
}
.activity-24h .seperation-border {
width: 2px;
height: 80%;
background-color: #C4C4C4;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
Statistieken
</div>
<div class="userManagement">
Gebruikersbeheer
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<span class="activity-24h-title">Afgelopen 24 uur</span>
<div class="activity-24h">
<div class="stat-frame">
<span class="stat-frame-title">Nieuwe gebruikers</span>
<span class="stat-frame-value">513</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Actieve gebruikers</span>
<span class="stat-frame-value">1054</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Matches</span>
<span class="stat-frame-value">1577</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Gerapporteerd</span>
<span class="stat-frame-value">33</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Geblokkeerd</span>
<span class="stat-frame-value">9</span>
</div>
</div>
</div>
<div id="userManagement">
<h2>This is about section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
You can achieve that by using display: none and display: block instead of opacity: 0 and opacity: 1 to hide the inactive element:
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
You can use document.write() to edit the document so you can remove add the div when required. Example:
function runcode(){
document.write("<div> hi </div>")
}
#button{
background-color: red;
padding: 15px 32px;
}
#button:hover{
background-color: pink;
}
<button onclick="runcode()" id="button">replace with a div with hi inside</button>
I think you should be using display instead of opacity, just as #MaxiGui wrote. You can be a bit fancy too, and create a tag for it:
invisible {
display:none;
}
As a quick workaround you can modify footer style as following.
footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
}
Currently I'm working on a header that looks like a broken mirror, to accomplish this task I'm using pseudo elements that repeats the same background image of their parent and setting the background attachment to fixed, additionally I'm using the skew transform property so that it has a scroll parallax effect along with the mirror effect that it performs.
The problem is that when I scroll the page down the pseudo elements' backgrounds reveal a white space. How can I fix that?
The codepen link and images follows:
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-size: 100%;
font-family: "Roboto";
text-decoration: none;
box-sizing: border-box;
}
html, body { height: 100%; }
.mirror-header {
width: 100%;
height: 100%;
position: relative;
background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed / cover;
}
.mirror-header:before,
.mirror-header:after {
content: "";
height: 200px;
position: absolute;
background-color: red;
background: inherit;
}
.mirror-header:before {
left: 0;
transform: skewY(13deg);
bottom: -80px;
width: 50%;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6);
}
.mirror-header:after {
right: 0px;
width: 60%;
height: 280px;
transform: skewY(-10deg);
bottom: -50px;
box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8);
}
main .content {
width: 100%;
padding: 200px 40px 40px;
}
main .content h2 {
text-align: center;
font-size: 3em;
}
main .content p {
margin-top: 20px;
text-align: justify;
}
<header class="mirror-header">
</header>
<main>
<section class="content">
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
Scroll position bug IMAGE
Codepen Link
Fun one!
You need to set your transform-origin for the pseudo elements that you're skewing or the backgrounds won't display correctly during off-screen rendering. (As you discovered.)
For Example:
.mirror-header:after {
...
transform-origin: 0% 100%;
}
.mirror-header:before {
...
transform-origin: 100% 100%;
}
After doing this, you'll need to readjust the placement of the pseudo-elements to your liking.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-size: 100%;
font-family: "Roboto";
text-decoration: none;
box-sizing: border-box;
}
html, body { height: 100%; }
.mirror-header {
width: 100%;
height: 100%;
position: relative;
background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed / cover;
}
.mirror-header:before,
.mirror-header:after {
content: "";
height: 200px;
position: absolute;
background-color: red;
background: inherit;
}
.mirror-header:before {
left: 0;
transform: skewY(13deg);
bottom: -180px;
width: 50%;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6);
transform-origin: 100% 100%;
}
.mirror-header:after {
right: 0px;
width: 60%;
height: 280px;
transform: skewY(-10deg);
bottom: -150px;
box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8);
transform-origin: 0% 100%;
}
main .content {
width: 100%;
padding: 200px 40px 40px;
}
main .content h2 {
text-align: center;
font-size: 3em;
}
main .content p {
margin-top: 20px;
text-align: justify;
}
<header class="mirror-header">
</header>
<main>
<section class="content">
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
Working Codepen forked from your original example.
Aside: Personally, I'd try to use perspective/rotateY for this instead of skewY as it could possibly give you a more "natural" distortion effect for your mirror shards, but that's my $.02.
I'm using Refills by Bourbon modals, and are great. But, now that I need to trigger by JS the modal, I don't know how to do it, since it's pure CSS and doesn't have any docs or JS methods.
The modal is only CSS3:
<div class="modal">
<label for="modal-1">
<div class="btn js-btn">Click for Modal</div>
</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal-window">
<div class="modal-inner">
<label class="modal-close" for="modal-1"></label>
<h1>Modal Title</h1>
<p class="intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p>
<p class="body">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
</div>
</div>
</div>
The CSS
.modal {
$modal-padding: 3em;
$modal-background: $base-background-color;
$modal-close-color: $light-gray;
$modal-image-height: 135px;
$modal-image-width: $modal-image-height;
label {
cursor: pointer;
margin-bottom: 0;
}
label img {
$img-width: 300px;
border-radius: $img-width/2;
display: block;
max-width: $img-width;
}
input[type="checkbox"] {
display: none;
}
.btn {
#include button(simple, $base-background-color);
font-size: $base-font-size;
margin-bottom: $base-line-height;
}
.modal-open {
overflow: hidden;
}
.modal-window { // overlay
#include transition(opacity .25s ease);
#include position(fixed, 0px 0px 0px 0px);
background: rgba(0,0,0, .85);
opacity: 0;
text-align: left;
visibility: hidden;
z-index: 99999999999;
.modal-bg {
#include position(absolute, 0px 0px 0px 0px);
cursor: pointer;
}
}
.modal-close {
#include position(absolute, ($modal-padding /2) ($modal-padding /2) 0 0);
#include size(1.5em);
cursor: pointer;
background: $modal-background;
&:after,
&:before {
#include position(absolute, 3px 3px 0 50%);
#include transform(rotate(45deg));
#include size(.15em 1.5em);
background: $modal-close-color;
content: '';
display: block;
margin: -3px 0 0 -1px;
}
&:hover:after,
&:hover:before {
background: darken($modal-close-color, 10);
}
&:before {
#include transform(rotate(-45deg));
}
}
.modal-inner {
#include transition(opacity .25s ease);
border-radius: $base-border-radius;
background: $modal-background;
margin: auto;
max-height: 95%;
position: relative;
overflow: auto;
width: 95%;
padding: $modal-padding /2;
margin-top: .6em;
#include media($medium-screen) {
padding: $modal-padding;
width: 60%;
max-height: 60%;
margin-top: 10em;
}
#include media($large-screen) {
width: 50%;
margin-top: 10em;
}
h1 {
color: $base-font-color;
margin-bottom: .6em;
text-align: left;
text-transform: capitalize;
}
p.body, p.intro {
font-size: $base-font-size;
max-width: 100% !important;
text-align: left;
&.intro {
color: $blue;
line-height: 1.6em;
}
&.body {
color: $base-font-color;
line-height: 1.45em;
#include media($medium-screen) {
#include columns(2 8em);
}
}
}
a.cta {
color: white;
display: inline-block;
margin-right: .5em;
margin-top: 1em;
&:last-child {
padding: 0 2em;
}
}
}
.modal-state:checked + .modal-window {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal-window .modal-inner {
top: 0;
}
}
I need to trigger it to open when a user clicks a button.
First: User clicks button and goes to routes
<%= link_to "Guardar en spotbook".html_safe, photo_album_modal_path(#photo.id), remote: true %>
Second: Routes point to the controller action
get '/photo/:id/album-modal', to: 'photos#albums_add_modal', as: :photo_album_modal
Third: It responds with a js
def albums_add_modal
#albums = current_user.albums.includes(:photos).reverse_order
#photo = Photo.find(params[:id])
respond_to do |format|
format.js
end
end
Fourth: It will append some html to a div in the view
$("#modal-open").html("<%= escape_javascript(render 'add_to_album_modal') %>");
$("#modal-open").HERE SHOULD BE A METHOD TO OPEN THE MODAL, BUT SINCE ITS CSS3-ONLY I DON'T KNOW HOW TO TRIGGER IT.
Thanks
Simple solution would be triggering the click
$("#modal-1").trigger("click");
I triggered the checked-state from the modal by JS.
$("#modal").prop("checked", true);