We Keep Coding

Image slides that fades when navbar is hit

I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!

I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}

CSS Typing Effect not spanning multiple lines

I have had a look around this site and can't seem to find a fix for this issue.
I have this typing effect that scrolls through various sentences in an array, I need it to wrap onto a second line whenever it reaches a certain width but if I remove the white-space: wrap you can see all of the text just on multiple lines and it expands the width slowly, I need it to only wrap after a certain width is reached.
I tried adding white-space: wrap at a certain point in the animation, however, this doesn't seem to have the desired effect.
Code here:
.type-container {
min-height: 100vh;
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
}
.content {
color: var(--white);
margin: 0 auto;
width: 28%;
}
ul li {
display: inline-block;
overflow: hidden;
height: 100px;
font-size: 29px;
position: absolute;
left: 36%;
box-sizing: border-box;
animation: typing 5s steps(100, end) infinite;
white-space: nowrap;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 34px;
background: var(--white);
animation: blink 1s steps(100, end) infinite;
margin-left: 3px;
}
#keyframes typing {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}
#keyframes blink {
0% {
background: transparent;
}
50% {
background: var(--white);
}
}
<div className="type-container">
<div className="content">
<h1 className="heading-1">
Our Management Team has over 50 years of experience:
</h1>
<div className="typed-section">
<ul className="heading-2">
<li id="typed-word">
{sentence}
<div id="cursor" />
</li>
</ul>
</div>
</div>
</div>

Mobile menu - CSS / DIV - Dim visible background around menu?

When my mobile menu opens, I would love the rest of the visible background (other than the menu itself) to 'dim.' (Both my pages and menu background are very white in general).
There is a plugin that offers this functionality but in trying to keep the website light, am trying to see if this is possible with just some lines of code?
Googling for quite a while came up with nothing other than the app which is a surprise... maybe I searched the wrong keywords?
Any ideas?
Here is my full code (not my original code, can link various parts to their respective Authors).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
#media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
#media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}

One way of doing this is to assert a blanket div over the entire page, beginning just below the menu bar, then setting that div's opacity to the desired level of dimming.
I have thrown together a very simple proof of concept. Hover the dummy Menu button to observe the effect. Take it onwards from there.
body {
--menu-height: 50px;
}
#page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: yellow;
}
#menu_bar {
position: absolute;
width: 100%;
height: var( --menu-height);
background-color: blue;
}
#menu_item {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 30px;
background-color: white;
line-height: 30px;
text-align: center;
}
#menu_item:hover:after {
content: '';
position: fixed;
top: var( --menu-height);
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.5;
/* Ensure z-index is higher than page's content/data items */
z-index: 2
}
#data {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border: 2px solid black;
padding: 10px;
z-index: 1;
}
#text {
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
}
<div id="page">
<div id="menu_bar">
<div id="menu_item">Menu</div>
</div>
<div id="data">
<span id="text">Hover the "Menu" button...</span><br><br> Lorem ipsum dolor etc
</div>
</div>

Animate div positioning rearrangement

I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container while changing its position to a relative for the opened state.
I want to apply a smooth transition to the blue main div, which is being pushed down by the hidden div with a class of .sub-header. How can I bypass the choppy rearrangement of the containers and is there a more elegant way of doing this instead of switching positioning on click? (e.g. fixed to a relative in this case)
Currently, when I switch the positioning from fixed to a relative as expected - there is a gap being produced, which is the .sub-header's height.
NOTE: The heights of the current divs are fixed values, but I need this to be able to handle dynamic changes in the .sub-header height.
NOTE: This should be achieved by adding a custom class, not using jQuery's nested effects like .slideToggle etc.
Here is the Fiddle.
And the simple jQuery function needed for the Fiddle share:
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();

Make position: relative; and do margin top for animating
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-150px;
left: 0;
right: 0;
z-index: 10;
position: relative;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>
Update:-
As to get -100% you have make it float and set all width to 100%
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
width:100%;
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
width:100%;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-100%;
left: 0;
right: 0;
z-index: 10;
float:left;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
width:100%;
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>

Correct me if I misunderstood your question, but I guess there's much simpler approach to what you're trying to achieve. Try changing corresponding classes in your CSS code:
.sub-header {
background: gainsboro;
height: 0;
-webkit-transition: height .3s linear;
transition: height .3s linear;
}
.opened {
height: 150px;
}
Here's the fiddle. My approach does not cover all bases, as you can see there is still text visible in the hidden container, which is going to need some additional workaround in your js or css, but I guess it is simpler than yours, considering that your .sub-container has fixed height.
EDIT
For non fixed height, there is workaround in my approach:
.sub-header {
background: gainsboro;
height: auto;
max-height: 0px;
-webkit-transition: max-height .3s linear;
transition: max-height .3s linear;
}
.opened {
max-height: 400px;
}
but it still needs to be adjusted - when you set .opened's max-height to the lower value, transition is going to be slower. It is not perfect, thought it covers cases, where .sub-containers' heights are relatively similar.

please check this out. we can use margin for styling and keep position the same relative
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;
transform: translateY(-200%);
left: 0;
right: 0;
z-index: 10;
/*play with position and margin*/
position: relative;
margin-bottom:-200px;
}
.opened {
transform: translateY(0%);
margin-bottom:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">
<p>Sub Header content</p>
</div>
<main>Main Content</main>

Center element with animation / transition

I'm trying to create a full screen menu that does a bottom-to-top movement and I'm having trouble when it comes to vertically centering it.
Basically, it comes out of the screen and should end up right in the middle of it (centered).
However, since it is a fixed menu with an unknown height and I'm using animations, the options available aren't many:
I can't use the margin: auto technique because the auto value doesn't work with transitions;
I'm trying to avoid using flexbox;
translateY() seems to work fine but it creates a top-to-bottom movement instead of the desired bottom-to-top one (see my code)
anything else? (preferably that works with older browsers, but I can also manage with using translateY if there's a way to change the direction)
$('#small-nav-btn').click(function() {
$('#overlay').addClass('open');
$('#close-menu-cross').addClass('open');
$('#nav').addClass('open');
})
$('#cross').click(function() {
$('#overlay').removeClass('open');
$('#close-menu-cross').removeClass('open');
$('#nav').removeClass('open');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Now-Regular", sans-serif;
font-size: 12px;
font-weight: bold;
}
ul {
list-style-type: none;
}
a {
color: black;
}
#overlay {
background: #fff;
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0;
transition: all 1s ease 0s;
z-index: 1555;
}
#overlay.open {
opacity: 1;
height: 100%;
}
#small-nav-bar {
display: block;
width: 80%;
margin: 0 auto;
text-align: center;
color: black;
}
#small-nav-btn {
cursor: pointer;
}
#nav {
background: orange;
position: fixed;
top: -100%; /*I need it to be bottom: -100% for the bottom-top movement*/
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.8s linear 0.1s;
z-index: 1556;
}
#nav.open {
top: 50%; /*Again, I need this to be bottom: 50%*/
}
#close-menu-cross.open {
display: block;
position: fixed;
top: 15px;
right: 20px;
z-index: 1556;
cursor: pointer;
}
#close-menu-cross {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-container">
<div id="small-nav-bar">
<div id="small-nav-btn">BUTTON</div>
</div>
<ul id="nav">
<li><span>HELLO</span>
</li>
<li><span>HELLO</span>
</li>
</ul>
<div id="close-menu-cross">
<div id="cross">X</div>
</div>
</nav>
jsfiddle
Thanks in advance! :)

You were quite close. With just a few adjustments in the CSS, you have a full working demo:
$('#small-nav-btn').click(function() {
$('#overlay').addClass('open');
$('#close-menu-cross').addClass('open');
$('#nav').addClass('open');
})
$('#cross').click(function() {
$('#overlay').removeClass('open');
$('#close-menu-cross').removeClass('open');
$('#nav').removeClass('open');
})
#nav {
background: orange;
position: fixed;
top: 100%; /* 1 */
left: 50%;
transform: translate(-50%, 0); /* 2 */
transition: all 0.8s linear 0.1s;
z-index: 1556;
}
#nav.open {
top: 50%;
transform: translate(-50%, -50%); /* 2 */
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Now-Regular", sans-serif;
font-size: 12px;
font-weight: bold;
}
ul {
list-style-type: none;
}
a {
color: black;
}
#overlay {
background: #fff;
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0;
transition: all 1s ease 0s;
z-index: 1555;
}
#overlay.open {
opacity: 1;
height: 100%;
}
#small-nav-bar {
display: block;
width: 80%;
margin: 0 auto;
text-align: center;
color: black;
}
#small-nav-btn {
cursor: pointer;
}
#close-menu-cross.open {
display: block;
position: fixed;
top: 15px;
right: 20px;
z-index: 1556;
cursor: pointer;
}
#close-menu-cross {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-container">
<div id="small-nav-bar">
<div id="small-nav-btn">BUTTON</div></div>
<ul id="nav">
<li><span>HELLO</span></li>
<li><span>HELLO</span></li>
</ul>
<div id="close-menu-cross">
<div id="cross">X</div>
</div>
</nav>
Notes:
The CSS offset properties (top, bottom, left, right), when applied to absolutely-positioned elements (which includes position: fixed), shift the element x-distance from the respective edge.
You have top: -100% in your code. This puts the element 100% above the top edge.
You then have it shifting to top: 50%. This puts the element halfway inside the container.
Essentially, your animation moves the element a distance of 150%, from above the window to inside it. The movement is top to bottom.
But you want the movement to go from bottom to top.
So start the element all the way at the bottom and off-screen (top: 100%), and have it shift up to halfway inside the container (top: 50%).
The transform: translate() rule simply fine-tunes the centering.
If translateY(-50%) is applied to the primary state (like in your code), it will shift 50% of the nav onto the screen before the transition (demo).
That's why I applied translateY(-50%) only to the transitioned state.
For a complete explanation see my answer here: Element will not stay centered, especially when re-sizing screen
jsFiddle