Uncaught ReferenceError: $ is not defined problem

Uncaught ReferenceError: $ is not defined problem - javascript

I've tried pasting the code copied from the code pen site below in the vault, but it doesn't work. I wonder why it's not working. What do I have to do to make it work? The CSS source code was imported using Viw compiled. Does this matter?
Code Pen Address
https://codepen.io/dodozhang21/pen/vNOmrv
Error :
249 Uncaught ReferenceError: $ is not defined
It says this is the problem.
var $form = $("#imageUploadForm"),
Paste Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#import url(https://fonts.googleapis.com/css?family=Nunito);
#import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #ffd16e;
height: 100%;
padding: 0;
margin: 0;
font-size: 16px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.uploadWrapper {
font-family: "Nunito", sans-serif;
}
.imageUploadForm {
background: #6e95f7;
height: 400px;
width: 500px;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.imageUploadForm .helpText {
color: white;
display: block;
position: absolute;
top: 2%;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
}
.imageUploadForm .helpText:after {
content: "\f067";
font-family: "FontAwesome";
font-size: 150%;
color: rgba(255, 255, 255, 0.5);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin: 4% auto auto auto;
width: 50%;
height: 50%;
border: 6px dashed rgba(255, 255, 255, 0.5);
}
.imageUploadForm .pickFile {
position: absolute;
bottom: 0;
left: 0;
display: block;
background: white;
height: 25%;
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.imageUploadForm .pickFileButton {
display: inline-block;
padding: 0.7em 2em;
color: white;
background: #fb92ae;
text-decoration: none;
}
.imageUploadForm .pickFileButton:hover {
text-decoration: none;
}
.imageUploadForm .uploadButton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 10;
}
.imageUploadForm.loading .helpText {
font-size: 0;
top: 7%;
}
.imageUploadForm.loading .helpText:before {
font-size: 30px;
content: "Uploading...";
}
.imageUploadForm.loading .helpText:after {
display: none;
}
.imageUploadForm.loading .uploadedImg {
position: absolute;
bottom: 12.5%;
left: 12.5%;
width: 75%;
height: 65%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 4px solid white;
-moz-transition: opacity ease-out;
-o-transition: opacity ease-out;
-webkit-transition: opacity ease-out;
transition: opacity ease-out;
}
.imageUploadForm.loading .unveil {
position: absolute;
background: #6e95f7;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
-moz-animation: toTop 4s forwards;
-webkit-animation: toTop 4s forwards;
animation: toTop 4s forwards;
}
.imageUploadForm.loading .unveil:after {
content: "";
position: absolute;
left: -3%;
bottom: 0;
height: 10px;
width: 106%;
background: #ffd16e;
border-radius: 5px;
}
.imageUploadForm.loading .pickFile,
.imageUploadForm.loading .uploadButton {
display: none;
}
.imageUploadForm.loading.loaded {
height: 200px;
}
.imageUploadForm.loading.loaded .uploadedImg {
opacity: 0;
}
.imageUploadForm.loading.loaded .helpText:before {
content: "Upload Complete!";
}
.imageUploadForm.loading.loaded .helpText:after {
display: block;
opacity: 0;
font-size: 0;
line-height: 100px;
-moz-animation: fadeIn 0.4s forwards;
-webkit-animation: fadeIn 0.4s forwards;
animation: fadeIn 0.4s forwards;
content: "\f058";
color: white;
margin-top: 2%;
border-width: 0;
}
#-moz-keyframes toTop {
to {
height: 0;
}
}
#-webkit-keyframes toTop {
to {
height: 0;
}
}
#keyframes toTop {
to {
height: 0;
}
}
#-moz-keyframes fadeIn {
to {
opacity: 1;
font-size: 90px;
}
}
#-webkit-keyframes fadeIn {
to {
opacity: 1;
font-size: 90px;
}
}
#keyframes fadeIn {
to {
opacity: 1;
font-size: 90px;
}
}
</style>
<body>
<div class="uploadWrapper">
<form id="imageUploadForm" class="imageUploadForm">
<span class="helpText" id="helpText">Upload an image</span>
<input type='file' id="file" class="uploadButton" accept="image/*" />
<div id="uploadedImg" class="uploadedImg">
<span class="unveil"></span>
</div>
<span class="pickFile">
Pick file
</span>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$uploadedImg[0].style.backgroundImage = "url(" + e.target.result + ")";
};
reader.readAsDataURL(input.files[0]);
}
}
var $form = $("#imageUploadForm"),
$file = $("#file"),
$uploadedImg = $("#uploadedImg"),
$helpText = $("#helpText");
$file.on("change", function () {
readURL(this);
$form.addClass("loading");
});
$uploadedImg.on(
"webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend",
function () {
$form.addClass("loaded");
}
);
$helpText.on(
"webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend",
function () {
setTimeout(function () {
$file.val("");
$form.removeClass("loading").removeClass("loaded");
}, 5000);
}
);
</script>
</form>
</div>
</body>
</html>

You have to import jquery in your HTML file, do this before you import your own scripts.
This is one source to import jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Here you can find more info about jquery: https://www.w3schools.com/jquery/jquery_get_started.asp

Place this script within the HTML haed to import Jquery. Make sure to place within the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Related

White space on HTML with high width

Hello i dont understand why there is a white space within the container on the rights side, that apeears above like 750 witdh ive been fighting with it for a couple of hours . i am kinda new too..... thanks in advance.
ive tryied playing with flex etc... grow shrink and more flex options i am sure i a missing something.
const hemburger = document.querySelector(`#hemburger`);
const linksContainer = document.querySelector(`.nav__links__container`);
const mainContent = document.querySelector(`.main__content`);
const divHandller = () => {
document.querySelector(`.after__content`).classList.toggle(`display`);
};
const hamburgerHandler = () => {
linksContainer.classList.toggle(`nav__display__icons`);
};
function displayWindowSize() {
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
if (w >= 600) {
linksContainer.classList.remove(`nav__display__icons`);
}
}
window.addEventListener("resize", displayWindowSize);
hemburger.addEventListener(`click`, hamburgerHandler);
mainContent.addEventListener(`click`, divHandller);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
color: white;
}
.container {
display: flex;
justify-content: space-around;
margin-top: 1rem;
align-items: baseline;
}
.nav__logo__container {
flex: 2;
margin-left: 1rem;
position: relative;
}
.nav__links__container {
flex: 0.5 1 auto;
transition: 1s all;
}
#nav__links {
margin: 1rem;
}
#nav__logo {
font-size: 1.5rem;
}
#hemburger {
margin-right: 2rem;
font-size: 1.5rem;
display: none;
color: white;
}
#media (max-width: 600px) {
.nav__links__container {
position: absolute;
flex-direction: column;
display: flex;
left: -100%;
z-index: 2;
}
#hemburger {
display: block;
}
.main__content {
flex-direction: column;
justify-content: center;
}
.btn__container {
align-self: center !important;
}
.main__content {
height: 30vh;
}
}
.nav__display__icons {
position: absolute;
flex-direction: column;
display: flex;
left: 0;
margin-top: 3rem;
}
/* NAV STYLING END */
.main__content {
width: 80%;
height: 80vh;
background-color: black;
margin: 0 auto;
border: rgba(255, 255, 255, 0.491) 1.5px solid;
margin-top: 1.5rem;
display: flex;
align-items: center;
border-radius: 10px;
position: relative;
}
#main__content__text {
}
.after__content {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(130, 127, 127);
top: -150%;
transition: all 2s;
border-radius: 10px;
}
.display {
top: 0%;
}
#main__content__text {
text-align: center;
height: 20rem;
width: 20rem;
font-size: 2rem;
line-height: 4rem;
}
.main__content__img__container {
font-size: 1.5rem;
}
.btn__container {
align-self: flex-end;
margin-bottom: 2rem;
}
#btn {
padding: 1rem 2rem;
border-radius: 25px;
animation-name: btnAnimation;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
position: relative;
}
#btn:hover {
}
#keyframes btnAnimation {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 0.9;
}
}
#keyframes btnAfterAnimation {
0% {
opacity: 0.5;
width: 4rem;
color: black;
}
100% {
opacity: 0;
width: 100%;
color: black;
}
}
#btn::after {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
background-color: rgb(118, 116, 116);
border-radius: 25px;
opacity: 0;
z-index: 1;
transition: all 1s;
}
#btn:hover::after {
animation-name: btnAfterAnimation;
animation-duration: 2s;
}
<!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">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="nav__logo__container">
Logo
</div>
<div class="nav__links__container">
Home
About
My project
Terms
</div>
<div> <i id="hemburger" class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
<section class="main__content">
<div class="main__content__text__container">
<h3 id="main__content__text">strategic design for brands and small business and for you</h3>
</div>
<div class="btn__container">
<button id="btn">Click here for more info</button>
</div>
<div class="main__content__img__container">
<h4>Test test test</h4>
</div>
<div class="after__content"></div>
</section>
<script src="https://kit.fontawesome.com/618bf7505f.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>

please try to add justify-content: space-around; to .main__content

Mobile Resizable Window Dropdown Menu Doesnt Work

Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.

Click checked pure hamburger menu on window/document click

This question may seem similar to other questions but my hamburger menu uses checkbox to function and shows up at 768px width and below and I've been running into issues trying to close the open hamburger menu when the window/document is clicked.
I successfully got it to work using several ways but it still doesn't work as intended. The hamburger menu closes on document click alright, but the hamburger menu no longer closes on hamburger menu click as it originally should.
I have very little knowledge of Javascript/Jquery but I understand the bits I used to make other parts of the code work, but I just can't figure out how to make this particular one work.
Below is the code required to recreate the problem:
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
$('.menu-btn').click();
}
});
});
//With vanilla JS
/* window.onclick = function(event) {
if (document.getElementById('menu-btn').checked) {
document.getElementById('menu-btn').click();
}
} */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
Here is also a fiddle of the code.

Your issue is in this line:
$('.menu-btn').click();
It's enough you changed it to this:
e.preventDefault();
$('.menu-btn').click();
With the first line you prevent the default action while with the second you initiated the click event for the correct element.
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
e.preventDefault();
$('.menu-btn').click();
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>

How do I stop the overlap of elements in an on hover transition?

In my website I want to be able to allow the user to hover over an image and have the image zoomed in by a transition. I've been able to succeed with the implementation of the transition, however, when the image is being zoomed in, it constantly overlaps the other elements. My current layout is ordered in a grid and the container has been given the attribute overflow:hidden.
I tried to assign each element a z-index value of -1 when its being hovered, but the there is a continuous change between the layers which looks horrible. How do I allow each image to be zoomed in without overlapping into any of the other elements?
Here's my jsfiddle: https://jsfiddle.net/Syed213shah/4u0vh5Lb/
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
}
.item1:hover {
transform: scale(1.1);
z-index: -1;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item2:hover {
transform: scale(1.1);
z-index: -1;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item3:hover {
transform: scale(1.1);
z-index: -1;
}

I think it is more simple to use a pseudo-element or a inner tag (as you want) and scale this element setting its parent (our <a>) with overflow:hidden; to prevent your bug.
In my example I used a pseudoelement. I added these line of code to your CSS (I also commented some lines):
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
I didn't touch your HTML.
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg */
/* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */
/* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
/*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/
width: 100%;
height: 200%;
/*transition: all 0.5s ease-in-out;*/
position: relative;
}
/*.item1:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item2 {
/*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/*.item2:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item3 {
/*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/* -------------------------- */
/* I added these lines of code */
/* -------------------------- */
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
/*to set a background without repetition and always horizontally center you could use also this syntaxt:
background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent;
*/
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
/* -------------------------- */
/* I added these line of code */
/* -------------------------- */
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
<body>
<div class="full-height">
<script src="script.js"></script>
<div class="container">
<a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" >
<h2> Europe's biggest stadium </h2>
</a>
<a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" >
<h2>European Success</h2>
</a>
<a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" >
<h2>Current Squad</h2>
</a>
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li>Squad</li>
<li>Contact</li>
<li>About</li>
<a2><a>Created by Awais</a></a2>
</ul>
</div>
<h1>FC Barcelona</h1>
</div>
<div class="bottom-height">
</div>
</body>

instead of transform: scale on your images, perhaps using the background-size and background position might give the result you seek with a bit more control of the actual cropping you are already using.
the jsfiddle attached modifies your code with such an example. I did leave the transform scale in place for the text overlay. also note the image containers need a overflow:hidden in order to prevent hover interaction between cells.
here is your css modified accordingly;
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
background-position: 0% 50%;
background-size:200%;
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item1:hover {
background-size:220%;
background-position: 5% 50%;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
background-position: 0% 50%;
background-size:165%;
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item2:hover {
background-position: 5% 50%;
background-size:180%;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
background-position: 0% 15%;
background-size:175%;
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item3:hover {
background-position: 5% 15%;
background-size:195%;
}
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item1:hover h2,
.item2:hover h2,
.item3:hover h2 {
transform: scale(1.1);
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
#navbar .a2{
float: right;
line-height: 20px;
margin-right: 50px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar .a2 a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
https://jsfiddle.net/w9n6ajq1/

How can I mask the visibility of the text with the overlapping element using CSS

If you see the GIF provided below the text only appears after it has crossed the Black Dot. Until then it is invisible. This was made using Flash but how can we achieve this using CSS?
Here is what I've got so far:
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-text:before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-text:before {
left: 50px;
}
.ypn-text:after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-text:after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
<div class="ypn-logo">
<div class="ypn-text">RUN</div>
</div>
I thought of making a div and locking its right border with the central axis of the dot in the middle but this hides the Green and Red elements also. Is there a way to just block the text element but not other elements?
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-before {
left: 50px;
}
.ypn-after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
.ypn-after:after {
width: 130px;
background: black;
height: 3em;
content: '';
position: absolute;
left: -100px;
}
<div class="ypn-logo">
<div class="ypn-before"></div>
<div class="ypn-text">YPN</div>
<div class="ypn-after"></div>
</div>

You can make the text the child of an element with a background color. Then make the mask by creating an element with a dot and a div set to the background color of the parent. Make the parent's overflow:hidden so the colored area isn't seen as it moves to uncover the text.
$('.overlay').on('click', function() {
$(this).toggleClass('hidden');
});
$(window).on('load', function() {
$('.overlay').removeClass('hidden');
});
body {
background: red;
}
.container {
width: 80%;
height: 60px;
border-radius: 60px;
background: white;
overflow: hidden;
margin: 20px auto;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
background: white;
transition: left 2s ease-out;
position: absolute;
top: 0;
left: calc( -100% + 60px);
}
.overlay.hidden {
left: 0;
}
.overlay::after {
content: '';
background: black;
height: 60px;
width: 60px;
border-radius: 60px;
position: absolute;
right: 0;
top: 0;
}
.text {
font-size: 50px;
line-height: 60px;
width: 100%;
text-align: center;
}
p {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="text">ezoom</div>
<div class="overlay hidden"></div>
</div>
<p> click the circle to toggle the animation</p>
EDIT :
After using the above principle, here's the final code for the effect you need:
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 0;
margin: 0;
background: #222;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.ypn-before {
background: red;
content: '';
overflow: hidden;
width: 180px;
height: 180px;
border-radius: 180px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
left: -20px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-text {
background: none;
position: absolute;
left: 20px;
font-size: 3.2em;
color: #ddd;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot {
width: 200px;
height: 200px;
position: relative;
background: red;
left: -35px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot:after {
content: '';
position: absolute;
background: #222;
width: 60px;
height: 60px;
border-radius: 60px;
top: 70px;
right: -25px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-logo:hover>.ypn-before {
left: 20px;
}
.ypn-logo:hover>.ypn-before .ypn-dot {
left: -135px;
}
.ypn-logo:hover>.ypn-before .ypn-text {
left: 80px;
}
<div class="ypn-logo">
<div class="ypn-before">
<div class="ypn-text">RUN</div>
<div class="ypn-dot"></div>
</div>
</div>

Here is an idea where you can rely on one element and consider a width/margin animation:
.box {
font-size: 50px;
font-weight: bold;
line-height: 1em;
display: inline-flex;
justify-content:flex-end;
overflow:hidden;
white-space:nowrap;
border-radius:1em 0 0 1em;
background: radial-gradient(#000 0.48em, transparent 0.5em) left/1em 1em no-repeat;
width:0;
margin-left:200px;
padding: 5px 1em 5px 0;
transition:1s;
}
body:hover .box {
width:200px;
margin-left:0px;
padding: 5px 0 5px 1em;
}
<div class="box">
some text
</div>
To avoid setting a specific width you can adjust alignment and consider max-width:
.container {
text-align:right;
width:500px;
}
.box {
font-size: 50px;
font-weight: bold;
line-height: 1em;
display: inline-flex;
justify-content:flex-end;
overflow:hidden;
white-space:nowrap;
border-radius:1em 0 0 1em;
background: radial-gradient(#000 0.48em, transparent 0.5em) left/1em 1em no-repeat;
max-width:0;
padding: 5px 1em 5px 0;
transition:max-width 1s,padding 0s 1s;
}
body:hover .box {
max-width:100%;
padding: 5px 0 5px 1em;
transition:max-width 1s;
}
<div class="container">
<div class="box">
some text
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Uncaught ReferenceError: $ is not defined problem - javascript

Place this script within the HTML haed to import Jquery. Make sure to place within the head <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Related

White space on HTML with high width

Mobile Resizable Window Dropdown Menu Doesnt Work

Click checked pure hamburger menu on window/document click

How do I stop the overlap of elements in an on hover transition?

How can I mask the visibility of the text with the overlapping element using CSS

Categories

Resources