Currently trying to change the navbar on scroll to reduce its size and change the colors in it (specifically, change from transparent background to white, and change font colors). This is the HTML code:
/* Setting the overall html file font */
html{
font-family: "nunito", sans-serif;
font-size: 10px;
}
/* Ensure no link coloring for any anchors */
a, a:hover, a:focus, a:active {
text-decoration: none;
color: inherit;
}
/* Setting some desc for the container of the navbar */
.wrapper{
position: fixed; /* Keep it fixed */
top: 0; /* 0 from the top */
left: 0; /* 0 from the left */
width: 100%; /* Make sure it fits the whole page */
padding: 0 1.5rem; /* Since they're only two values, top and bottom are 0, left and right at 1.5rem */
margin: 0 auto; /* Setting the margins */
/* transition allows us to add transitions to elements in our html file */
/* It takes first the argument of what to transition, then how fast, then the transition type */
/* In our case, we change the background color, and would like to with ease */
transition: background-color .5s ease;
/* We set the z-index, which defines the stack, to ensure it's always above anything */
z-index: 9999;
}
/* Setting desc for the nav bar */
.wrapper .navbar{
width: 100%; /* Again ensure that the width is 100% */
height: 10rem; /* Set height of the navbar to be 10rem */
display: flex; /* flex */
align-items: center; /* This defines alignment across cross axis, align all center (FLEX PROPERTY) */
justify-content: space-between; /* This defines alignment across main axis, space between means fill out (FLEX PROPERTY) */
border-bottom: 2px solid rgba(255,255,255,.05); /* Setting the border at the bottom */
padding: 0 30px;
}
/* Setting desc for the navbar logo */
.wrapper .navbar-brand{
color:black; /* For now, setting color to be black of the logo */
font-size: 3.5rem; /* Setting the font size for the logo */
font-weight:bold; /* Bold */
float: left;
}
/* Setting desc for the header list */
.wrapper .navbar .menu ul li{
display: inline-block; /* Making it inline-block, so that the list is just horizontal */
margin-top: 15px; /* Addting margin around, to make prettier */
text-transform: uppercase; /* Make all text uppercase */
letter-spacing: 3px;
}
.header-list{
display: inline-block;
float: none;
vertical-align: top;
margin: 0 auto;
}
.navbar-collapse{
text-align: center;
}
/* Setting desc for the header links of the navbar */
.header-link{
text-decoration: none;
color:black;
font-size: 1.6rem;
position: relative;
margin: 0 2rem;
}
/****************** Navbar Effects ******************/
/* ::after is used meaning after each of the objects header-link, do the following */
/* Here, we want to set it so that we add a line when we hover, right now we set what the actual */
/* after should be */
.header-link::after{
content: ''; /* Used with ::after, shows what content would be shown after. Here, line */
width: 100%;
height: 2px;
background-color:black;
position: absolute;
left: 0;
bottom: -3px;
/* ACTUAL TRANSFORMATION HERE, DIRECTION AND WHERE AND TYPE */
/* We first define what the transformation would be, then the origin, then we define it in a */
/* transition so that we could edit various thing */
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}
/* Effects for hovering on a link */
.header-link:hover::after{
transform: scaleX(1); /* Actually show the line under, scaleX(1) rather than 0 */
}
/* Some searchbar desc and effects (GENERAL) */
.searchbar{
position: relative;
}
/* Styling the text inside the search bar */
.searchbar input[type="text"]{
border: 0;
padding: 0;
width: 0px;
height: 35px;
border-radius: 3px;
}
/* Styling the icon for the search bar */
.searchbar .icon{
position: absolute;
top: 0;
right: 0;
width: 35px; /* Setting the width */
height: 100%; /* 100% height */
background: none;
border-radius: 3px;
color:black;
transition: all 0.5s 0.3s ease;
}
/* Span, or the actual glyphicon */
.searchbar .icon span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* Making sure the icon is in the box */
cursor: pointer; /* Sets what the cursor would look like aka pointing to click */
}
/* Effects for when clicking on the icon */
.searchbar .icon.active{
background:beige;
transition: all 0.3s ease; /* All means all properties of icon will have this effect */
}
/* Effects for when searching */
.searchbar input[type="text"].active{
width: 250px;
padding: 0 10px;
transition: all 0.5s 0.2s ease; /* Again, all properties. All setting effect duration to complete and so */
}
/* CENTERING AND MAKING SURE SAME LINE, FIXING NAVBAR */
#media (min-width: 768px){
#navbarNav.navbar-collapse.collapse {
display: flex!important;
align-items: center;
margin-top: 15px;
flex-basis: auto !important;
padding-left: 0;
}
.navbar-toggler {display: none;}
.navbar-brand {padding: 0 !important;}
}
ul li {margin-top: 0;}
/* Fixing the navbar when we resize, collapsing */
/* FROM https://codepen.io/RajRajeshDn/pen/dLgQbg */
#media screen and (max-width: 1318px){
.wrapper .navbar{
padding: 0px;
flex-direction: column;
height: 120px;
justify-content: center;
}
.wrapper .navbar .menu{
display: none;
}
.wrapper .navbar .menu ul li{
display: block;
text-align: center;
margin: 10px 0;
}
.searchbar .icon{
margin-right: -20px;
}
}
/****************** Scrolling Effects ******************/
/* Effects for when scrolling is active */
.scrolling-active{
background-color: #fff; /* Change background color */
box-shadow: 0 3px 1rem rgba(0,0,0,.1); /* Add box shadow */
}
/* Specifically changing the height of the navbar */
.scrolling-active .nav{
height: 6.6rem;
}
/* Changing height of the logo when scrolling */
.scrolling-active .nav .navbar-brand img{
height: 30px;
width: 30px;
}
/* Changing the color of the line under the header links when scrolling */
.scrolling-active .header-link::after{
background-color: black;
}
ul li {margin-top: 0;}
/* Hero Demo Content*/
.hero{
width: 100%;
height: 100vh;
background: url("mountain-large.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero::after{
content: '';
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.demo-content{
width: 100%;
height: 200vh;
background-color: #fff;
}
<!DOCTYPE HTML>
<html>
<!------------------------------ HEADER CODE ------------------------------>
<head>
<!-- Title for the project -->
<title>Final Project</title>
<!-- BOOTSTRAP LINK: CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- BOOTSTRAP GLYPHICONS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- PERSONAL CSS LINK -->
<link rel="stylesheet" href="styles.css">
</head>
<!------------------------------ BODY CODE ------------------------------>
<body>
<!------------------------------------------ NAVBAR ------------------------------------------>
<header>
<div class="wrapper">
<nav class="navbar">
<!-- Logo segment -->
<a class="navbar-brand" href="index.html"><span><img src="./bunny.png" width="50" height="50"></span>US.</a>
<!-- Creating list for the other parts, so that we can give them all a specific effect -->
<div class = "menu">
<ul>
<!-- First text/link/point -->
<li class="nav-item">
Home Page
</li>
<!-- Second text/link/point -->
<li class="nav-item">
Illustrator Gallery
</li>
<!-- Third text/link/point -->
<li class="nav-item">
Art Gallery
</li>
<!-- Fourth text/link/point -->
<li class="nav-item">
Challenges
</li>
</ul>
</div>
<!-- Creating a segment for the searchbar -->
<div class="searchbar">
<!-- Creating it as an input | placeholder is what text will show -->
<input type="text" placeholder="What speaks to you?">
<!-- The actual bootcamp glyphicon -->
<div class="icon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</nav>
</div>
</header>
<!-- Hero section -->
<section class = "hero"></section>
<section class = "demo-content"></section>
</body>
<!-- Script for changing the glyphicon search icon to a bar-->
<!-- SNIPPER FROM https://codepen.io/RajRajeshDn/pen/dLgQbg -->
<script>
$(".glyphicon-search").click(function () {
$(".icon").toggleClass("active");
$("input[type='text']").toggleClass("active");
});
</script>
<!-- Script for changing the effects when scrolling -->
<script>
// The event listener will essentially first be given the event, then the function on the event
// The event is scrolling. For the function, we first define header as a selection of the header from the document
// and define the windowPosition where the effect will take place as any Y scroll > 0
// We then call classList.toggle(), meaning we'll toggle between classes to the active scrolling one
window.addEventListener('scroll', function(){
let navHeader = document.querySelect('header');
let windowPosition = window.scrollY > 0;
navHeader.classList.toggle('scrolling-active', windowPosition)
})
</script>
</html>
I'm not actually sure if the eventListener is working or not, or if there's something wrong with the code specifically. I'm aware that the code for the scrolling is entirely different from the searchbar script, mainly because for JS I'm taking snippets from different areas and trying to make sense of everything. I'm very new to this, so I'm not sure where the error is.
JSFiddle:https://jsfiddle.net/3gjb0t2q/
(Note that the navbar gets condensed when the window size is small. I'm not sure if this adds to the problem as well)
Any help is appreciated!
There was a typo error in the fiddle. You typed querySelect which should be querySelector. Also you were accessing the wrong element. You need to access .wrapper not header.
/* Setting the overall html file font */
html{
font-family: "nunito", sans-serif;
font-size: 10px;
}
/* Ensure no link coloring for any anchors */
a, a:hover, a:focus, a:active {
text-decoration: none;
color: inherit;
}
/* Setting some desc for the container of the navbar */
.wrapper{
position: fixed; /* Keep it fixed */
top: 0; /* 0 from the top */
left: 0; /* 0 from the left */
width: 100%; /* Make sure it fits the whole page */
padding: 0 1.5rem; /* Since they're only two values, top and bottom are 0, left and right at 1.5rem */
margin: 0 auto; /* Setting the margins */
/* transition allows us to add transitions to elements in our html file */
/* It takes first the argument of what to transition, then how fast, then the transition type */
/* In our case, we change the background color, and would like to with ease */
transition: background-color .5s ease;
/* We set the z-index, which defines the stack, to ensure it's always above anything */
z-index: 9999;
}
/* Setting desc for the nav bar */
.wrapper .navbar{
width: 100%; /* Again ensure that the width is 100% */
height: 10rem; /* Set height of the navbar to be 10rem */
display: flex; /* flex */
align-items: center; /* This defines alignment across cross axis, align all center (FLEX PROPERTY) */
justify-content: space-between; /* This defines alignment across main axis, space between means fill out (FLEX PROPERTY) */
border-bottom: 2px solid rgba(255,255,255,.05); /* Setting the border at the bottom */
padding: 0 30px;
}
/* Setting desc for the navbar logo */
.wrapper .navbar-brand{
color:black; /* For now, setting color to be black of the logo */
font-size: 3.5rem; /* Setting the font size for the logo */
font-weight:bold; /* Bold */
float: left;
}
/* Setting desc for the header list */
.wrapper .navbar .menu ul li{
display: inline-block; /* Making it inline-block, so that the list is just horizontal */
margin-top: 15px; /* Addting margin around, to make prettier */
text-transform: uppercase; /* Make all text uppercase */
letter-spacing: 3px;
}
.header-list{
display: inline-block;
float: none;
vertical-align: top;
margin: 0 auto;
}
.navbar-collapse{
text-align: center;
}
/* Setting desc for the header links of the navbar */
.header-link{
text-decoration: none;
color:black;
font-size: 1.6rem;
position: relative;
margin: 0 2rem;
}
/****************** Navbar Effects ******************/
/* ::after is used meaning after each of the objects header-link, do the following */
/* Here, we want to set it so that we add a line when we hover, right now we set what the actual */
/* after should be */
.header-link::after{
content: ''; /* Used with ::after, shows what content would be shown after. Here, line */
width: 100%;
height: 2px;
background-color:black;
position: absolute;
left: 0;
bottom: -3px;
/* ACTUAL TRANSFORMATION HERE, DIRECTION AND WHERE AND TYPE */
/* We first define what the transformation would be, then the origin, then we define it in a */
/* transition so that we could edit various thing */
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}
/* Effects for hovering on a link */
.header-link:hover::after{
transform: scaleX(1); /* Actually show the line under, scaleX(1) rather than 0 */
}
/* Some searchbar desc and effects (GENERAL) */
.searchbar{
position: relative;
}
/* Styling the text inside the search bar */
.searchbar input[type="text"]{
border: 0;
padding: 0;
width: 0px;
height: 35px;
border-radius: 3px;
}
/* Styling the icon for the search bar */
.searchbar .icon{
position: absolute;
top: 0;
right: 0;
width: 35px; /* Setting the width */
height: 100%; /* 100% height */
background: none;
border-radius: 3px;
color:black;
transition: all 0.5s 0.3s ease;
}
/* Span, or the actual glyphicon */
.searchbar .icon span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* Making sure the icon is in the box */
cursor: pointer; /* Sets what the cursor would look like aka pointing to click */
}
/* Effects for when clicking on the icon */
.searchbar .icon.active{
background:beige;
transition: all 0.3s ease; /* All means all properties of icon will have this effect */
}
/* Effects for when searching */
.searchbar input[type="text"].active{
width: 250px;
padding: 0 10px;
transition: all 0.5s 0.2s ease; /* Again, all properties. All setting effect duration to complete and so */
}
/* CENTERING AND MAKING SURE SAME LINE, FIXING NAVBAR */
#media (min-width: 768px){
#navbarNav.navbar-collapse.collapse {
display: flex!important;
align-items: center;
margin-top: 15px;
flex-basis: auto !important;
padding-left: 0;
}
.navbar-toggler {display: none;}
.navbar-brand {padding: 0 !important;}
}
ul li {margin-top: 0;}
/* Fixing the navbar when we resize, collapsing */
/* FROM https://codepen.io/RajRajeshDn/pen/dLgQbg */
#media screen and (max-width: 1318px){
.wrapper .navbar{
padding: 0px;
flex-direction: column;
height: 120px;
justify-content: center;
}
.wrapper .navbar .menu{
display: none;
}
.wrapper .navbar .menu ul li{
display: block;
text-align: center;
margin: 10px 0;
}
.searchbar .icon{
margin-right: -20px;
}
}
/****************** Scrolling Effects ******************/
/* Effects for when scrolling is active */
.scrolling-active{
background-color: #fff; /* Change background color */
box-shadow: 0 3px 1rem rgba(0,0,0,.1); /* Add box shadow */
}
/* Specifically changing the height of the navbar */
.scrolling-active .nav{
height: 6.6rem;
}
/* Changing height of the logo when scrolling */
.scrolling-active .nav .navbar-brand img{
height: 30px;
width: 30px;
}
/* Changing the color of the line under the header links when scrolling */
.scrolling-active .header-link::after{
background-color: black;
}
ul li {margin-top: 0;}
/* Hero Demo Content*/
.hero{
width: 100%;
height: 100vh;
background: url("mountain-large.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero::after{
content: '';
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.demo-content{
width: 100%;
height: 200vh;
background-color: #fff;
}
<!DOCTYPE HTML>
<html>
<!------------------------------ HEADER CODE ------------------------------>
<head>
<!-- Title for the project -->
<title>Final Project</title>
<!-- BOOTSTRAP LINK: CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- BOOTSTRAP GLYPHICONS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- PERSONAL CSS LINK -->
<link rel="stylesheet" href="styles.css">
</head>
<!------------------------------ BODY CODE ------------------------------>
<body>
<!------------------------------------------ NAVBAR ------------------------------------------>
<header>
<div class="wrapper">
<nav class="navbar">
<!-- Logo segment -->
<a class="navbar-brand" href="index.html"><span><img src="./bunny.png" width="50" height="50"></span>US.</a>
<!-- Creating list for the other parts, so that we can give them all a specific effect -->
<div class = "menu">
<ul>
<!-- First text/link/point -->
<li class="nav-item">
Home Page
</li>
<!-- Second text/link/point -->
<li class="nav-item">
Illustrator Gallery
</li>
<!-- Third text/link/point -->
<li class="nav-item">
Art Gallery
</li>
<!-- Fourth text/link/point -->
<li class="nav-item">
Challenges
</li>
</ul>
</div>
<!-- Creating a segment for the searchbar -->
<div class="searchbar">
<!-- Creating it as an input | placeholder is what text will show -->
<input type="text" placeholder="What speaks to you?">
<!-- The actual bootcamp glyphicon -->
<div class="icon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</nav>
</div>
</header>
<!-- Hero section -->
<section class = "hero"></section>
<section class = "demo-content"></section>
</body>
<!-- Script for changing the glyphicon search icon to a bar-->
<!-- SNIPPER FROM https://codepen.io/RajRajeshDn/pen/dLgQbg -->
<script>
$(".glyphicon-search").click(function () {
$(".icon").toggleClass("active");
$("input[type='text']").toggleClass("active");
});
</script>
<!-- Script for changing the effects when scrolling -->
<script>
// The event listener will essentially first be given the event, then the function on the event
// The event is scrolling. For the function, we first define header as a selection of the header from the document
// and define the windowPosition where the effect will take place as any Y scroll > 0
// We then call classList.toggle(), meaning we'll toggle between classes to the active scrolling one
window.addEventListener('scroll', function(){
let navHeader = document.querySelector('.wrapper');
let windowPosition = window.scrollY > 0;
navHeader.classList.toggle('scrolling-active', windowPosition)
})
</script>
</html>
I just tried it and the debugger says querySelect is not a function. You may be trying to use querySelector() instead. This might work for you.
window.addEventListener('scroll', function(){
let navHeader = document.querySelector('header');
let windowPosition = window.scrollY > 0;
navHeader.classList.toggle('scrolling-active', windowPosition)
})
So basically I want to make a Memory game with JS, HTML and CSS. I want to be able to click on Cards which then are supposed to flip with an flip animation.
I don't want to create like 20 buttons. Is there a better way of creating cards with CSS animations.
I kind of know how to create the animations.
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:click .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
transform: rotateY(180deg);
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="frontpageofCard" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<img src="Backpage" alt="Avatar" style="width:300px;height:300px;">
</div>
</div>
</div>
I want to use JS to assign random Pictures on the Backpage.
You can create cards with JS like this:
var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><img src='frontpageofCard' alt='Avatar' style='width:300px;height:300px;'></div><div class='flip-card-back'><img src='Backpage' alt='Avatar' style='width:300px;height:300px;'></div></div></div>"
for (let i = 0; i < 20; i++) {
document.querySelector("#container").innerHTML += card
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:click .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
transform: rotateY(180deg);
<div id="container">
</div>
Just try to use :active pseudo-class instead of :click
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
transform: rotateY(180deg);
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="frontpageofCard" alt="Avatar-Front" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<img src="Backpage" alt="Avatar-Back" style="width:300px;height:300px;">
</div>
</div>
</div>
I'm trying to change the color of a hamburger menu in a sticky nav for a responsive website.
At the moment, the nav bar and menus are styled and toggled with css and js.
Everything thing works fine, but recently i've had to make some changes and have run into this problem.
This is how it works;
- the nav bar sticks to the top of the screen and changes color on scroll.
- On narrow width screens, some js hides the menu text links and toggles a hamburger menu.
- on clicking the hamburger menu, an overlay menu is toggled
The problem i'm having is I've changed the background color of the sticky menu bar on scroll - but I can't see how to change the color of the hamburger icon on scroll.
here's what I have...
<!-- Script Sticky Menu -->
<script type="text/javascript">
window.addEventListener("scroll", function(){
if(window.pageYOffset > 50){
document.getElementById("main-nav").className = "scrolling";
} else {
document.getElementById("main-nav").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("nav-page-section").className = "scrolling";
} else {
document.getElementById("nav-page-section").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("vb-logo-mobile").className = "scrolling";
} else {
document.getElementById("vb-logo-mobile").className = "";
}
})
</script>
Inside "nav-page-section" is a container for the hamburger button...
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
This css styles the button_container...
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
Initially, i added an additional line to the script...
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container").className = "scrolling";
} else {
document.getElementsByClassName("button_container").className = "";
}
And added this css styling...
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
But that hasn't worked. I searched around for a way to target a specific tag ('span') within a classname ('button_container') but didn't find anything.
I keep looking at the span tag and thinking that's what's tripping me up - but i've tried many different variations of the script and nothing seems to work. When i add [0] after the classname - ('button_container')[0] - the hamburger menu disappears.
Anyone have any ideas?
Thanks.
Here is the full CSS and HTML...
/* 7. Main Menu - Hamburger */
/* icon+overlay */
.overlay-menu ul li a {
display: inline-block;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 20px;
font-family: 'HurmeGeometricSans1';
font-weight: 200;
overflow: hidden;
top: 5px;
}
.overlay-menu ul li a:after {
content: '';
position: absolute;
background: #E4002B;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.overlay-menu ul li a:hover:after, .overlay-menu ul li a:focus:after, .overlay-menu ul li a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 18px;
right: 18px;
height: 26px;
width: 30px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
<!-- start Hamburger Menu & Overlay Menu -->
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>V:WEAR</li>
<li>V:GEAR</li>
<li>V:MECHS</li>
<li>V:RDAS</li>
<li>V:LIQUID</li>
</ul>
</nav>
</div>
<!-- end Hamburger Menu & Overlay Menu -->
As far as I understand the spans in the button_container are the bars of the hamburger menu. So, to change color on scroll, I would say:
.scrolling .button_container span {
background-color: red;
}
Replace red with the preferred color.
document.getElementsByClassName("button_container").className
won't work since
document.getElementsByClassName("button_container")
is an array, and you have to iterate the array and assign to element you want.
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container")[0].className = "scrolling";
} else {
document.getElementsByClassName("button_container")[0].className = "";
}
Scenario
I have a mobile menu that shows when the window is below 736px. There is a javascript toggle on this menu that adds and removes a CSS class that shows the mobile menu ul (and of course the child li items).
When you re-size the window the CSS media query swaps out the desktop menu for the separate mobile menu and the toggle works as planned.
Problem
When I re-size the window and then open and close the mobile menu it all works fine, when the window is then subsequently re-sized again after this, the mobile ul and li flash up for a second when the window hits the CSS media query break point again (736px).
I don't know how to stop this happening, it really is sending me totally around the bend and I seem to have spent hours on this and I'm getting nowhere.
If anyone can help me on this I would be so grateful.
P.S I don't mind the fact the mobile menu is still there after re-sizing if the mobile menu was left open - this is intended behaviour. It's when the mobile menu is closed and the window is resized to desktop and then back to mobile again that the flash of the menu is happening.
codepen: https://codepen.io/emilychews/pen/aVYGPr
JS
var mobileMenuButton = document.getElementById("mobile-menu-button")
var mobileMenuItems = document.getElementById("mobile-nav-menu-items")
// TOGGLE MOBILE MENU
var mobileMenu = false
function toggleMobileMenu() {
if (mobileMenu === false) {
mobileMenuItems.classList.remove("mobileMenuInactive")
mobileMenuItems.classList.add("mobileMenuActive")
mobileMenuButton.innerHTML = "Close"
mobileMenu = true
} else {
mobileMenuItems.classList.add("mobileMenuInactive")
mobileMenuItems.classList.remove("mobileMenuActive")
mobileMenuButton.innerHTML = "Menu"
mobileMenu = false
}
}
mobileMenuButton.addEventListener("click", function() {
toggleMobileMenu()
}, false)
CSS
body, ul {padding: 0; margin: 0}
#main-header {width: 100%; height: 100px;}
/* desktop navigation */
#main-navigation {
position: relative;
width: 100%;
height: 100px;
background: red;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 10px 5% 10px 5%;
align-items: center;
}
#logo-holder {
width: 150px;
height: 66px;
background-color: grey;
}
ul#nav-menu-items {
display: flex;
margin-left: auto;
}
#main-navigation ul li {list-style-type: none;}
#main-navigation ul#nav-menu-items li a {
padding: 10px 15px;
margin: 0 5px;
box-sizing: border-box;
background: yellow;
text-decoration: none;
color:#000;
}
#main-navigation ul#nav-menu-items li a:hover {
color:blue;
transition: color .25s;
}
#mobile-menu-button, ul#mobile-nav-menu-items {
display: none;
}
/* --- MOBILE MENU AND DROPDOWN ---
Below is a separate menu added for mobiles.
*/
#media screen and (max-width : 736px) {
/* hides desktop menu */
ul#nav-menu-items {display: none}
#mobile-menu-button {
display: flex;
justify-content: center;
background: blue;
color: white;
padding: 10px 15px;
min-width: 75px;
cursor: pointer;}
ul#mobile-nav-menu-items {
opacity: 0;
transform: scaleY(0);
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 150px;
background: blue;
position: absolute;
right: 5%;
top: 100px;
padding: 10px 0px;
}
ul#mobile-nav-menu-items li {
padding: 10px 10px;
}
ul#mobile-nav-menu-items li a {
padding: 10px 15px;
color: white;
text-decoration: none;
transition: color .3s;
}
ul#mobile-nav-menu-items li a:hover {
color: lightblue;
}
/* -------- MOBILE CLASSES ADDED WITH JavaScript*/
#mobile-nav-menu-items.mobileMenuActive {
animation: showMobileMenu .5s ease-in forwards;
}
#keyframes showMobileMenu {
0% {opacity: 0;transform: scaleY(0);}
1% {opacity: 0; transform: scaleY(1);}
100% {opacity: 1; transform: scaleY(1);}
}
#mobile-nav-menu-items.mobileMenuInactive {
animation: removeMobileMenu .5s ease-out forwards;
}
#keyframes removeMobileMenu {
0% {opacity: 1; transform: scaleY(1);}
99% {opacity: 0; transform: scaleY(1);}
100% {opacity: 0; transform: scaleY(0);}
}
} /*END OF MOBILE MENU STYLING*/
HTML
<header id="main-header">
<!-- desktop nav -->
<nav id="main-navigation">
<div id="logo-holder"></div>
<ul id="nav-menu-items">
<li class="menu-item menu-item-1">News</li>
<li class="menu-item menu-item-2">About</li>
<li class="menu-item menu-item-3">Contact</li>
</ul>
<!-- mobile nav -->
<ul id="mobile-nav-menu-items">
<li class="mobile-menu-item mobile-menu-item-1">News</li>
<li class="mobile-menu-item mobile-menu-item-2">About</li>
<li class="mobile-menu-item mobile-menu-item-3">Contact</li>
</ul>
<!-- button for triggering mobile nav -->
<div id="mobile-menu-button">Menu</div>
</nav>
</header>
I have just removed the code below and it worked, maybe because you are manipulating the same event in your CSS and JS file.
#keyframes removeMobileMenu {
0% {opacity: 1; transform: scaleY(1);}
99% {opacity: 0; transform: scaleY(1);}
100% {opacity: 0; transform: scaleY(0);}
}
I realize this is a rather old question, but since there wasn't a great answer here I thought I'd add one for others searching.
I recently came across this exact same issue and ended up figuring out a pretty good solution to it. I documented it all at https://stevenwoodson.com/blog/solving-animation-layout-flickering-caused-by-css-transitions/ if you're still in need of a fix!
The gist is that the transition needs to be added separately in a different class so you can remove it when you're not actively opening or closing the menu.
I am attempting to create an effect using jQuery, where when the user hovers over an image, a piece of text appears over the image. However, there are a few issues when making changes to the code.
If the ".img" on line 3 of the jQuery is replaced with "img", the code works fine, but causes the hover effect to work on a different image
If I remove the semicolon after "opacity: 0.75;" on line 4 of the jQuery, the code works temporarily, but any other interactions with the page causes the effect to break
Apologies for the code being a bit long winded.
Working JSFiddle: https://jsfiddle.net/9dsL2jyL/3/
My Code:
HTML
<div class="workInfo">
<!-- Nav bar open icon -->
<img src="images/icons/navbar.png" id="hamburger" alt="Navigation Menu" onclick="openNav()">
<!-- Nav bar links -->
<div id="mySidenav" class="sidenav">
×
Home
About
Portfolio
Contact
<!-- Facebook Link -->
<a href="#" id="facebook" alt="Facebook Page Link">
<div class="container">
<img src="images/icons/facebookHover.png">
<img class="fadeTop" src="images/icons/facebook.png" style="display: block;">
</div>
</a>
<!-- Instagram Link -->
<a href="#" id="instagram" alt="Instagram Page Link">
<div class="container">
<img src="images/icons/instagramhover.png">
<img class="fadeTop" src="images/icons/instagram.png">
</div>
</a>
<!-- Github Link -->
<a href="#" id="github" alt="Github Page Link">
<div class="container">
<img src="images/icons/githubhover.png">
<img class="fadeTop" src="images/icons/github.png">
</div>
</a>
</div>
<h1>Work</h1>
</div>
<div class="workDisplay">
<a href="#">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</a>
</div>
CSS
.sidenav {
/* Sets the height to 100% of the page */
height: 100%;
/* Sets the width of the nav bar to 0 */
width: 0;
/* Keeps the nav bar stationary */
position: fixed;
/* Makes the nav bar appear above everything */
z-index: 10;
/* Nav bar Placement stuff */
top: 0;
left: 0;
/* Sets the colour of the nav bar background */
background-color: #141311;
/* Disables horizontal scroll in the nav bar */
overflow-x: hidden;
/* Adds padding above the content */
padding-top: 3%;
/* Adds 0.5 second transition effect to slide in the nav bar */
transition: 0.5s;
}
/* The navigation menu links */
.sidenav a {
/* Sets the font */
font-family: "purista-web",sans-serif;
font-style: normal;
font-weight: 300;
/* Adds padding around the links */
padding: 1vh 1vw 1vh 2vw;
/* Removes all text decoration */
text-decoration: none;
/* Sets the size of the font */
font-size: 1.75vw;
/* Sets the colour of the font */
color: #B8B8B4;
/* Makes the text appear in a block */
display: block;
/* Adds a 0.3s transition to the hover effect */
transition: 0.3s
}
/* Styling for the social media links */
.container {
position: relative;
width: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 5vw;
}
/* Changes the colour when you hover over the link */
.sidenav a:hover, .offcanvas a:focus{
color: #FEFEFA;
}
/* Styling for the top link of the nav bar */
.toplink {
margin-top: 10vh;
}
/* Position and style the close button (top right corner) */
.closebtn {
position: absolute;
top: -4.5vh;
font-size: 8vw !important;
}
/* Styling for the left half of the portfolio page */
.workInfo {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
left: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #FEFEFA;
z-index: 5;
}
/* Styling for Work */
.workInfo h1 {
/* Sets the font */
font-family: "marydale",sans-serif;
font-style: normal;
font-weight: 400;
/* Sets the size of the font */
font-size: 8vw;
/* Sets the positioning for the text */
position: fixed;
top: 50%;
left: 50%;
margin-top: -13vh;
margin-left: -34vw;
/* Sets the colour of the type */
color: #141311;
}
.workInfo #hamburger {
width: 3vw;
position: absolute;
left: 5%;
top: 5.5%;
}
/* Styling for the right half of the portfolio page */
.workDisplay {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #141311;
line-height: 100%;
z-index: 4;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.workDisplay #container {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
}
.workDisplay h2 {
color: #FEFEFA;
/* Sets the typeface */
font-family: "skolar-sans-latin",sans-serif;
/* Makes the font italic */
font-style: italic;
/* Makes the font Bold */
font-weight: 700;
/* Sets the size of the type */
font-size: 3vw;
margin-top: 48vh;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 14;
}
.workDisplay img {
display: block;
height: 100vh;
min-height: 100vh;
width: auto;
z-index: 10;
}
jQuery
/* Hover effect for the nav bar */
$(window).load(function(){
$(".container").hover(function() {
//Adds a fade out of 300ms to the top image
$(this).find(".fadeTop").fadeOut(300);
}, function() {
//Adds a fade in of 300ms to the top image
$(this).find(".fadeTop").fadeIn(300);
});
})
/* Hover effect for the span's on the work page */
$(document).ready(function() {
$('.text').hide();
$('.img').animate({
opacity: 0.75
});
$('.img').hover(function() {
$(this).stop().animate({opacity:.4},200);
$('.text').fadeIn();
}, function() {
$(this).stop().animate({opacity:1},500)
$('.text').fadeOut();
});
Using JQuery, images can be selected by image element $("img") or by class or id of a image $(".imageclass") and $("#imageid") respectively.
In your case, you can provide additional class to the images you want to select by JQuery animate function. Then the function will only affect the images who have that class only. Hope this makes it clear.
$(".imageclass").animate({
opacity: 0.75;
});
Try not to use JS
when it can be solved by Css
html,body{
height: 100%;
margin: 0;
}
.box{
width: 100%;
height: 100%;
font-size: 0;
}
.box-item{
display: inline-block;
width: 50%;
height: 100%;
font-size: 16px;
position: relative;
}
.box-item:hover .box-item-text{
opacity: 1;
transform: translate(0, -50%) scale(1);
}
.box-item:hover .box-item-img{
opacity: .8;
-webkit-filter: blur(3px);
filter: blur(3px);
// http://caniuse.com/#search=filter%3A%20blur
}
.box-item-text{
font-size: 30px;
color: white;
text-align: center;
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%) scale(.5);
opacity: 0;
transition: all 500ms linear;
}
.box-item-img{
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
// or background-size: cover !important;
background-size: 100% 100% !important;
-webkit-filter: blur(0px);
filter: blur(0px);
transition: all 500ms linear;
}
<div class="box">
<div class="box-item">
<div class="box-item-text">Lorem ipsum.</div>
<div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
</div>
<div class="box-item">
<div class="box-item-text">Lorem ipsum.</div>
<div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
</div>
</div>
For anyone who reads this later, I found that the tag surrounding the image in the workDisplay div was causing the issue, as upon removing this tag from my code, the hover effect worked perfectly.
HTML Before:
<div class="workDisplay">
<a href="#">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</a>
</div>
HTML After:
<div class="workDisplay">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</div>