Responsive navigation disrupting other code elements - javascript

At max-width:37.em, the nav styled under a hamburger is opened automatically and I'd rather it be closed than open when scaled to size.
It also lets the underlying menu show underneath it (div.gallery with clickable radio buttons/labels), and I'd rather the nav slide everything below it down once open.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="mpicon.png">
<title>The Marshall Project | About Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="about.css" rel='stylesheet' type='text/css' />
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header>
<section id="space">
<section id="screen1">
<h1>About Us</h1>
</section>
<!-- navigation -->
<nav class="navigation-bar">
<img class="logo" src="mplogo.png" width="200" height="27">
<a class="burger-nav"></a>
<ul class="open">
<li>ABOUT</li>
<li>EUROPEAN TUNE</li>
<li>FINANCIAL</li>
<li>SUPPORT</li>
</ul>
</nav>
</section>
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 65;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
</script>
</header>
<div class="sticky">
<div id="intro">
<i>
Investigative reporting is at the core of what we do. </i>
<div class="gallery">
<label for="raz0" title="0">ABOUT US</label>
<label for="raz1" title="1">MESSAGE FROM THE PRESIDENT</label>
<label for="raz2" title="2">WHY THE MARSHALL PROJECT?</label>
<label for="raz3" title="3">OUR TEAM</label>
<label for="raz4" title="4">CONTACT US</label>
</div>
</div>
</div>
<!-- info -->
<input type="radio" checked="checked" name="raz" id="raz0" />
<input type="radio" name="raz" id="raz1" />
<input type="radio" name="raz" id="raz2" />
<input type="radio" name="raz" id="raz3" />
<input type="radio" name="raz" id="raz4" />
<div id="contentdiv0">
<h3>ABOUT US</h3>
<p id="content0">
<img src="citizen.png" style="width: 85%; height: 85%;">
<br>
<br>
<b style="font-size: 1em;">THE MARSHALL PROJECT</b> is a nonpartisan, nonprofit news
organization that seeks to create and sustain a sense of national urgency about the U.S. criminal justice system.
<br>
<br>
We achieve this through award-winning journalism, partnerships with other news outlets and public forums. In all of our work we strive to educate and enlarge the audience of people who care about the state of criminal justice. Our reporters dive into stories that other media have missed or misunderstood. <br>
<br>
We often spend months interviewing sources, digging through documents, filing Freedom of Information Act requests, and visiting jails, prisons, courtrooms, and police stations around the United States.
<br>
<br>
We keep a close eye on breaking criminal justice news, looking for opportunities to provide context or analysis. Since our launch in November 2014, we have published a steady stream of stories, including profiles, interviews, commentaries, and first-person narratives.
</p>
</div>
<div id="contentdiv">
<h3 style="margin-bottom: -20px;">MESSAGE FROM THE PRESIDENT</h3>
<p id="content">
<i style="line-height: 25px;">
<br>The American criminal justice system is in crisis. The statistics tell the story. Even in the bitterly divided world of American politics, both liberals and conservatives have vowed their commitment to reform. Achieving it will require hard work: from advocates, criminal justice experts, law enforcement, the judiciary, and yes, good and skillful politicians.</i>
<br>
<br>
<img src="president.png" style="width: 85%; height: 85%;">
<br>
<br>
<b font-size: 1em;>IT WILL TAKE GREAT JOURNALISM. </b>
<br>
No social problems has ever been solved without shining a light into some dark corners. That’s what The Marshall Project was born to do. In just two years, we’ve published approximately 650 criminal justice stories and worked with a diverse range of media partners.
<br>
<br>
We’ve had an amazing launch. In our first year, President Barack Obama granted us an exclusive interview. By 18 months, we’d won our first Pulitzer. We’ve prompted federal investigations, informed a Supreme Court opinion, helped improve police training, and gotten cameras installed in a prison where abuse was rampant. Along the way, we’ve told fresh and important stories and given voice to Americans who were not being heard in our national conversation.
<br>
<br>
<b>We both come to this issue with hopeful hearts. </b>
<br>
Neil, a former reporter and hedge fund manager, launched The Marshall Project based on his belief that the criminal justice system is a national disgrace and high-quality journalism could help elevate the issue. Carroll, once a foreign correspondent for Newsweek, spent nearly two decades at Human Rights Watch before feeling impelled to focus on America’s biggest human rights problem: criminal justice. We’re proud to work with one of the country’s preeminent journalists, our Editor-in-Chief Bill Keller, in leading The Marshall Project.
Our aim is to create and sustain a sense of urgency about criminal justice.
We hope you will find a way to help.
</p>
</div>
<div id="contentdiv2">
<h3>WHY THE MARSHALL PROJECT?</h3>
<p id="content2"><i style="line-height: 25px;">If Marshall were alive, I have no doubt that he would place criminal justice reform high among the urgent priorities of today’s civil rights movement, and that his would be a powerful voice for change. It is for these reasons that I chose to name The Marshall Project in his honor.
<br>
— Neil Barsky, founder of The Marshall Project</i>
<br>
<br>
<img src="thurgood.png" style="width: 85%; height: 85%;">
<br>
<br>
<b style="font-size: 1em;">THURGOOD MARSHALL IS AN AMERICAN HERO.</b>
His work as a lawyer for the NAACP Legal Defense Fund, including the landmark Brown vs. Board of Education decision, laid the groundwork for the modern U.S. civil rights movement. As the first African-American justice of the U.S. Supreme Court, he was a persuasive advocate for a living and breathing Constitution that sees beyond the prejudices of revolutionary America.
<br>
<br>
Thurgood Marshall (1908-1993) was a towering figure in the civil rights movement and the first African American justice to serve on the United States Supreme Court. Before joining the court in 1967, he worked as a civil rights lawyer, famously criss-crossing the South on behalf of black clients who were facing Jim Crow justice from white police officials, prosecutors, judges and juries. In 1940, at age 32, he founded the NAACP Legal Defense and Education Fund and served as an executive there for two decades. He and his colleagues won a series of Supreme Court victories that gradually eroded the "separate but equal" doctrine, the legal underpinning of segregation in America. The most famous of those cases was Brown v. Board of Education, the landmark 1954 decision that declared unconstitutional segregation in the nation's public schools.
<br>
<br>
Marshall served on the Supreme Court for 24 years until his retirement at the end of the 1991 term. During his tenure, he was known for his strong support of First Amendment principles and was a reliable vote against the death penalty, even though he often said he was personally not opposed to capital punishment. He frequently sided with his fellow Warren Court jurists in seeking to protect and expand the constitutional rights of citizens charged with crimes, and he became a frequent dissenter during his later years as the Court moved rightward. The leader of that conservative shift, Chief Justice William Rehnquist, spoke at Marshall's funeral in 1993:
“As a result of his career as a lawyer and as a judge, Thurgood Marshall left an indelible mark, not just upon the law, but upon his country. Inscribed above the front entrance to the Supreme Court building are the words ‘Equal justice under law.’ Surely no one individual did more to make these words a reality than Thurgood Marshall.”
</p>
</div>
<div id="contentdiv3">
<h3>OUR TEAM</h3>
<p id="content3">The Marshall Project is a nonprofit news organization covering the U.S. criminal justice system. Our team draws together seasoned investigative journalists, veteran crime reporters, innovative digital producers, and experienced news editors.
<br>
<br>
Neil Barsky <i>Founder & Chairman</i><br>
Bill Keller <i>Editor-in-Chief</i><br>
Carroll Bogert <i>President</i><br>
<br>
<b>EDITORIAL</b>
<br>
Kirsten Danis <i>Managing Editor</i><br>
Andrew Cohen <i>Senior Editor</i><br>
Tom Meagher <i>Deputy Managing Editor</i><br>
Geraldine Sealey <i>Features Editor</i><br>
Maurice Chammah <i>Staff Writer</i><br>
Tatiana Craine <i>Social Media Editor</i><br>
Taylor Eldridge <i>Investigative Fellow</i><br>
Celina Fang <i>Multimedia Editor</i><br>
Anna Flagg <i>Interactive Reporter</i><br>
John Carlos Frey <i>Special Correspondent</i><br>
Justin George <i>Washington, D.C. Correspondent</i><br>
Eli Hager <i>Staff Writer</i><br>
Gabe Isman <i>Director of Technology</i><br>
Nicole Lewis <i>Tow Reporting Fellow</i><br>
Yolanda Martinez <i>Web Producer</i><br>
Joseph Neff <i>Staff Writer</i><br>
Alysia Santo <i>Staff Writer</i><br>
Beth Schwartzapfel <i>Staff Writer</i><br>
Alex Tatusian <i>Editorial Designer</i><br>
Christie Thompson <i>Staff Writer</i><br>
Abbie Vansickle <i>Staff Writer</i><br>
Manuel Villa <i>Data Reporting Fellow</i><br>
Simone Weichselbaum <i>Data Reporting Fellow</i><br>
</p>
</div>
<div id="contentdiv4">
<h3>CONTACT US</h3>
<p id="content4">
<img id="feyes" src="feyes.png" style="width: 85%; height: 85%;">
<br>
<b>General Inquiries</b><br>
Inquiries can be addressed to <br>info#themarshallproject.org
<br>or mailed to
<br>
The Marshall Project<br>
156 West 56th Street, Suite 701<br>
New York, NY 10019<br>
212-803-5200<br>
<br>
<b>Story Ideas and Tips</b><br>
To pitch a story idea to our editors, please email<br>
pitches#themarshallproject.org.
<br>
To pitch opinions, essays, analysis or other commentary pieces, please email<br>
commentary#themarshallproject.org.
<br>
<br>
<b>Media Inqueries</b>
<br>
All media and interview requests should contact Ruth Baldwin, director of communications at
<br>rbaldwin#themarshallproject.org
<br>or 212-803-5270.
<br>
<br>
<b>themarshallproject.org</b></p>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
Here is the CSS
/* split sides (for content) and navigation */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* configuring support of HTML5 */
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
/* general body styles */
body {
font-family: Franklin Gothic, Arial, sans-serif;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#intro {
position: -webkit-sticky;
position: sticky;
top: 100px;
margin-left: 50px;
margin-top: 100px;
margin-bottom: -30px;
padding-right: 12px;
line-height: 22px;
width: 75%;
text-align: left;
}
i {
font-family: Georgia, serif;
}
p {
line-height: 22.5px;
}
/* header */
h1 {
color: #E1E000;
font-size: 4em;
margin: auto;
padding-left: 50px;
padding-top: 50px;
position: relative;
}
h2 {
font-size: 1.25em;
margin-left: 50px;
width: 78%;
color: black;
}
h3 {
/*background-color: white;*/
visibility: hidden;
opacity: 0;
color: #E1E000;
letter-spacing: 2px;
}
/* top image */
#screen1 {
background-image: url(about.png);
background-size: cover;
max-width:100%;
height:730px;
position: inherit;
}
/* navigation styles */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
nav {
top: 0;
width: 100%;
background: #fff;
display: inline-block;
z-index: 1;
padding: 25px 25px 15px 25px;
}
nav ul {
float: right;
margin-top: 1px;
z-index: 1;
}
nav li {
display: inline;
z-index: 1;
padding: 10px;
}
nav li a:hover {
color: #E1E000;
z-index: 1;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: #E1E000;
text-decoration: line-through;
}
div.sticky {
width: 25%;
float: left;
margin: 0;
position: -webkit-sticky;
position: sticky;
top: 20px;
height: 1420px;
background-color: #E1E000;
}
#contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4, #contentdiv5{
position: absolute;
width: 35%;
margin-left: 500px;
margin-top: 75px;
}
#contentdiv0 a {
color: black;
}
#contentdiv0 a:hover {
color: #E1E000;
cursor: pointer;
}
#content0, #content, #content2, #content3, #content4, #content5{
/*background-color: white;*/
visibility: hidden;
opacity: 0;
}
/*clickable gallery*/
input[name="raz"] {
display: none;
}
div.gallery {
position: absolute;
top: 145%;
padding: 0;
width: 200px;
background: no-repeat 50% 0;
background-size: auto 100%;
}
div.gallery label {
display: inline-block;
width: 300px;
height: 20px;
background: no-repeat 50% 50%;
background-size: calc(100% - 5px) calc(100% - 5px);
margin: 5px;
cursor: pointer;
}
.gallery label:hover {
text-decoration: line-through;
color: white;
transition: background 0.3s ease-in;
}
#raz0:checked ~ #contentdiv0 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz0:checked ~ #contentdiv0 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
/* beginning of media queries - tablet display */
#media only screen and (max-width: 64em){
}
/* smartphone display */
#media only screen and (max-width: 37.5em) {
*{
height: auto;
}
.logo {
margin-top: 20px;
margin-left: 20px;
width: 50;
height: 6.75;
display: block;
}
.burger-nav {
margin-top: -80px;
display: inline-block;
height: 60px;
width: 100%;
background: url(nav.png) no-repeat 98% center;
background-color: none;
cursor: pointer;
padding: 0;
}
header {
padding-bottom: 0;
}
header .navigation-bar {
width: 100%;
padding: 0;
height: 70px;
z-index: 1;
}
header nav ul {
height: 0;
overflow: hidden;
background: #fff;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
}
header nav ul.open {
height: auto;
z-index: 1;
margin-bottom: 10px;
}
header nav ul li {
float: none;
text-align: left;
width: 100%;
margin: 0;
z-index: 1;
}
header nav li a {
color: black;
padding: 10px;
border-bottom: 1px solid #e1e000;
display: block;
margin: 0;
z-index: 1;
}
#screen1 {
position: relative;
height: 300px;
}
mobile {
display: inline;
}
div.sticky {
clear:both;
width: 100%;
min-height: 13px;
height: auto;
position: inherit;
margin-bottom: 20px;
}
#intro {
font-size: 15px;
margin: auto;
padding: 15px;
width: 90%;
max-width: 100%;
min-height: 250px;
overflow: hidden;
position: inherit;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 {
visibility: visible;
position: absolute;
margin: auto;
margin-top: 250px;
margin-left: 30px;
width: 80%;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 h2{
position: absolute;
text-align: left;
margin: auto;
padding: auto;
font-size: 3em;
margin-top: 250px;
margin-bottom: -15px;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 p {
text-align: left;
margin-top: 250px;
margin-bottom: 30px;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 h3 {
font-size: 1em;
width: 100%;
text-align: left;
margin-top: 250px;
padding: 10px;
margin-left: 15px;
}
h1 {
font-size: 3em;
width: 100%;
margin: auto;
top: 100px;
}
div.gallery {
top: 55%;
padding: 5px;
width: 300px;
background: no-repeat 50% 0;
background-size: auto 100%;
}
div.gallery label {
display: inline-block;
width: 300px;
height: 20px;
background: no-repeat 50% 50%;
background-size: calc(100% - 5px) calc(100% - 5px);
margin: 5px;
margin-left: -5px;
cursor: pointer;
}
.gallery label:hover {
text-decoration: line-through;
color: white;
transition: background 0.3s ease-in;
}
}
and here is the external JS
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
})
})

For starters, you've included jquery 3 times in the html, you might want to remove all but the last one near the foot of your html. It's best to load script tags at the end of your markup.
Also, its good practice to use css classes to target your markup, instead of using style tags directly.

Related

How to stop two spans from overlapping when one span is "hidden" until a toggle button is clicked?

I'm trying to figure out how to stop spans from overlapping when one span is text that is dynamically toggled through clicking a button, and the other is an image. Here's pictures of what I'm talking about:
Before the toggle, it looks like this.
After the toggle (clicking the red pointer icon), it looks like this.
However, it cuts off the text that comes after "think"—the rest of the text is hidden under the image. What I'd like is for the image to move down to come after the text.
I'm using Tufte CSS, which affects the text, and Gatsby, which affects the image. The image is in a class gatsby-resp-image-wrapper, which might make a difference?
The HTML:
<label for="md-two-swans-so" class="margin-toggle ">⊕</label><input type="checkbox" id="md-two-swans-so" class="margin-toggle">
<span class="marginnote">Two swans so intertwined and in love that they can't walk, think separate or else they tip over; Hungarian Pastry Shop bathroom; 2022-07-30.</span>
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1280px; ">
<a class="gatsby-resp-image-link" href="/static/fcd3fd51eb8e2b80f1c1221f0864471b/9568a/two-swans.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 133.438%; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwIAAf/EABYBAQEBAAAAAAAAAAAAAAAAAAABA//aAAwDAQACEAMQAAABY5jHRMWqY5KJjx//xAAbEAACAgMBAAAAAAAAAAAAAAAAAQIREiAxQf/aAAgBAQABBQKTMkWS76Nl6//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABYQAAMAAAAAAAAAAAAAAAAAABARMP/aAAgBAQAGPwIuP//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExEFH/2gAIAQEAAT8hExewaw6eFjqoYmXPhLZsuPv/2gAMAwEAAgADAAAAEFvsQ//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8QH//EABURAQEAAAAAAAAAAAAAAAAAAAEg/9oACAECAQE/EAj/xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhMUFRYf/aAAgBAQABPxAMAZgeyxVpT8jWWALYV5fYMgZAAIy/QU9g1tK17HOJthjUVvc//9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
<img class="gatsby-resp-image-image" alt="Two swans so intertwined and in love that they can't walk, think separate or else they tip over." title="Two swans so intertwined and in love that they can't walk, think separate or else they tip over." src="/static/fcd3fd51eb8e2b80f1c1221f0864471b/eea4a/two-swans.jpg" srcset="/static/fcd3fd51eb8e2b80f1c1221f0864471b/cb69c/two-swans.jpg 320w,
/static/fcd3fd51eb8e2b80f1c1221f0864471b/c08c5/two-swans.jpg 640w,
/static/fcd3fd51eb8e2b80f1c1221f0864471b/eea4a/two-swans.jpg 1280w,
/static/fcd3fd51eb8e2b80f1c1221f0864471b/0f98f/two-swans.jpg 1920w,
/static/fcd3fd51eb8e2b80f1c1221f0864471b/8ec0a/two-swans.jpg 2560w,
/static/fcd3fd51eb8e2b80f1c1221f0864471b/9568a/two-swans.jpg 3024w" sizes="(max-width: 1280px) 100vw, 1280px" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;" loading="lazy" decoding="async">
</a>
</span>
The marginnote style:
.sidenote,
.marginnote {
float: right;
clear: right;
margin-right: -45%;
width: 37.75%;
margin-top: 0.3rem;
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.3;
vertical-align: baseline;
position: relative;
}
Any help would be very, very appreciated! 😁

How do I float elements left and right in a <div> tag?

I'm unable to format https://evolveyourgaming.com/extensions/ecademy.php correctly. I cannot get the images to float:left with their names underneath, and the bios to float:right. Currently my VS Code is giving me yellow squiggly lines for all my Float properties. Can anyone offer any insight as CSS is not my strong suit.
function condenseLinks() {
var x = document.getElementById("links");
if (x.className === "vidlinks") {
x.className += " responsive";
} else {
x.className = "vidlinks";
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 100%;
text-align: center;
display: inline-block;
}
.vidbody {
background-color: black;
height: 100%;
display: inline-block;
}
.logo {
float: left;
max-width: 90%;
padding-top: 6px;
}
.vidhead {
background-color: black;
position: relative;
height: 10%;
width: 100%;
}
body {
background-color: black;
background-size: cover;
display: inline-block;
width: 100%;
height: 100%;
}
.container {
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
}
.teamBios .container {
display: flex;
}
.container img {
float: left;
}
.teamBios .about-details {
flex: 1;
}
.vidlinks {
float: right;
width: 45%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
/* Hide the link that should open and close the topnav on small screens */
.vidlinks .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.left {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.right {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.mid {
text-align: center;
display: inline-block;
width: 10%;
}
.vidlinks a {
color: white;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.vidlinks a:hover,
.dropdown:hover .dropbtn {
color: #7e3bfe;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
color: #8449ff;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.mid {
display: none;
}
.left {
width: 80%;
}
.right {
width: 80%;
}
.vidbody {
background-color: black;
height: auto;
width: auto;
display: inline-block;
}
.vidlinks {
text-align: center;
width: 90%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
.logo {
text-align: center;
max-width: 100%;
padding-top: 2px;
}
}
.vidlinks.responsive {
position: relative;
}
.vidlinks.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.vidlinks.responsive a {
float: none;
display: block;
text-align: left;
}
.vidlinks .responsive .dropdown {
float: none;
}
.vidlinks .responsive .dropdown-content {
position: relative;
}
.vidlinks .responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
/* Style the form */
#regForm {
background-color: #ffffff;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
}
/* Style the input fields */
.input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
.input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
</head>
<body>
<div class='content'>
<div class='vidhead'>
<div class='logo'>
<p>
<img src='Evolvelogo.png' style='width:24%; height: 30%;'>
</p>
</div>
<div class='vidlinks' id='links'>
<a href='../index.html#about' style='text-decoration:none; font-weight:200px; ' class='inactive'>ABOUT</a>
<a href='../index.html#team' style='text-decoration:none; ' class='inactive'>TEAM</a>
<a href='../index.html#contact-form-section' style='text-decoration:none; ' class='inactive'>CONTACT</a>
<a href='tournament.php' style='text-decoration:none; ' class='active'>TOURNAMENT</a>
<a href='privacy.php' style='text-decoration:none; ' class='active'>PRIVACY POLICY</a>
<a href='ecademy.php' style='text-decoration:none; ' class='active'>ECADEMY</a>
<a href="javascript:void(0);" class="icon" onclick="condenseLinks()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class='vidbody' style="text-align:center; width:100%;">
<h2 style="color:white; background:black; color:#8449ff; font-family:cairo, sans-serif; font-style:normal; font-weight:200px;">
<img src="eCademy_LogoPNG.png" alt="ecademy" style="width:400px; height:100px;">
</h2>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="evolvephoto1.png" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Kevin Kapoor <br> IGN/Handle: Irøh (or sometimes ZukosUncle) <br> Twitch: #irohsTeaShop <br>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes
for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
</div>
</div>
<div class="teamBios" style="color:black; background:black; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Desmond Wong2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Desmond Wong <br> IGN/Handle: Overlorred <br> Twitch: #overlorredtft <br>
</div>
<p>
A versatile coach in every sense of the word, he brings four years of experience competing at the top level of the collegiate esports scene as both a player and as a coach. Combined with his six years as a high elo solo queue player, his coaching style
brings together all the knowledge he has learned over the years from playing with and against the best. It is the perfect blend of his experiences from his time in the competitive scene and grinding the solo queue ladder. Whether you're completely
new to the game or an aspiring pro, Desmond is ready to guide you every step of the way to help you reach your goals.
</p>
</div>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Alex Gingrich2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> Name: Alex Gingrich<br> IGN/Handle: Chunder<br> Twitter: #alexgingrich<br>
</div>
<p>
Alex has built his entire professional life around applying traditional sports and business strategy into esports. Although Alex has been playing competitive games since the days of Halo 3 he got his first taste in esports player improvement at grad school
when he managed the inaugural Varsity Overwatch teams at The University of Akron. Since then Alex has gone on to work for ReKTGlobal, owners of Team Rogue and The London Royal Ravens, where he gains first hand knowledge of professional esports
and the mentalities of what makes a great player.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I think you put the image and name under e parent div and make the display flex. Also remove the unwanted tag. Hope it works
<div class="container">
<div class="bioPhotos">
<img src="evolvephoto1.png">
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
.container{
display: flex;
width: 50%;
}
.bioPhotos{
display: flex;
flex-direction: column;
}
.about-details{
display: flex;
}
p{
display: flex;
align-items: center;
justify-content: center;
}
Change this part:
<div class="container" style="display: flex;width: 60%;justify-content: center;padding: 20px;">
<div class="cullomnOne">
<div class="bioPhotos" style="width:256px; height:266px;min-width: 256px;min-height: 256px;">
<img src="evolvephoto1.png" style="width:100%; height:100%;">
</div>
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p style="padding: 20px;">
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>

multiple divs pointing to same tag

I am trying to create a personal website for me and I am a beginner in html and css. In my work section, i have created multiple buttons which open a small window and give the description of the project. The issue i am facing is all different divs are pointing to last div and the content of the last div is getting copied in all other divs. Thank you so much in advance for helping me out.
Below is the content of my last div:
Below is my image of second div:
Below is the overall code:
$(document).ready(function() {
$(".call_modal").click(function() {
$(".modal").fadeIn();
$(".modal_main").show();
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").fadeOut();
$(".modal_main").fadeOut();
});
});
work body {
margin: 0;
background: #e5eaee;
}
h3 {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #e1c184;
text-align: center;
padding: 50px 0px 0px;
clear: both;
}
.modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
display: none;
}
.modal_close {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
margin-left: -8px;
}
.close {
cursor: pointer;
}
.gl1_content .modal_main {
width: 50%;
height: 500px;
background: #B7BBBE;
z-index: 4;
position: fixed;
top: 16%;
border-radius: 4px;
left: 25%;
overflow: auto;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
text-align: center;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
.gl1_content .content {
padding: 50px 0px 30px;
text-align: justify;
margin-left: 20px;
margin-right: 10px;
}
button {
display: block;
width: 25%;
height: 150px;
padding: 40px;
border-radius: 5px;
background: #3399cc;
border: none;
font-size: 20px;
color: #fff;
margin-top: 40px;
margin-left: 80px;
float: left;
text-align: center;
position: center;
}
.ProjTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 50%;
}
.ProjTable td,
#ProjTable th {
border: 1px solid #ddd;
padding: 8px;
}
.ProjTable tr:nth-child(even) {
background-color: #f2f2f2;
}
.ProjTable tr:hover {
background-color: #ddd;
}
.ProjTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/B55FB9A2-E45C-3242-96D3-CF26E54EC901/main.js" charset="UTF-8"></script>
<h3 id="work">Work</h3>
<div class="gl_content">
<button class="call_modal" style="cursor:pointer;">SAS Consult and Support</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p></p>
</div>
</div>
</div>
</div>
<div class="content">
<button class="call_modal" style="cursor:pointer;">Global Reporting Infrastructure Project (GRIP)</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p><strong>Global Reporting Infrastructure Project (GRIP)</strong> is a key global initiative and is aimed at delivering a set of standard reports with standard metrics, definitions and templates across RBWM products Origination, Portfolio Management,
Profitability and RWAs by providing a global platform for Risk data aggregation and reporting. RBWM Risk has historically lacked Group level risk aggregation and reporting capability and relied upon end user computing to produce executive reporting
to drive risk management and decision making. Numerous inconsistencies relating to Key Performance Indicators (KPI) captured, business definitions used, calculations performed and report formats utilized are inherent with this method of reporting.
RBWM Risk management desires a system that will provide more metrics and KPIs to drive better decision making and analysis.</p>
</div>
</div>
</div>
</div>
A generic approach can be:
a) First add a common class(like- 'modal_container') to all the modal containers.
<div class="gl_content modal_container">...</div>
...
<div class="content modal_container">...</div>
...
b) On click event get the immediate modal container element on top of the element that got clicked and show/hide the modal inside it(the modal container).
I have redesigned the code below, please check with it:
<script>
$(document).ready(function(){
$(".call_modal").click(function(){
var modal_container = $(this).closest('.modal_container');
$(".modal", modal_container).fadeIn();
$(".modal_main", modal_container).show();
});
$(".close").click(function(){
var modal_container = $(this).closest('.modal_container');
$(".modal", modal_container).fadeOut();
$(".modal_main", modal_container).fadeOut();
});
});
</script>
You need to change this line of code :
$(".modal").fadeIn();
to be :
$(this).next($(".modal")).fadeIn();
In this case: When you click at any button, the div with class modal after the clicked button only will be work.
$(document).ready(function() {
$(".call_modal").click(function() {
$(this).next($(".modal")).fadeIn();
$(".modal_main").show();
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").fadeOut();
$(".modal_main").fadeOut();
});
});
work body {
margin: 0;
background: #e5eaee;
}
h3 {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #e1c184;
text-align: center;
padding: 50px 0px 0px;
clear: both;
}
.modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
display: none;
}
.modal_close {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
margin-left: -8px;
}
.close {
cursor: pointer;
}
.gl1_content .modal_main {
width: 50%;
height: 500px;
background: #B7BBBE;
z-index: 4;
position: fixed;
top: 16%;
border-radius: 4px;
left: 25%;
overflow: auto;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
text-align: center;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
.gl1_content .content {
padding: 50px 0px 30px;
text-align: justify;
margin-left: 20px;
margin-right: 10px;
}
button {
display: block;
width: 25%;
height: 150px;
padding: 40px;
border-radius: 5px;
background: #3399cc;
border: none;
font-size: 20px;
color: #fff;
margin-top: 40px;
margin-left: 80px;
float: left;
text-align: center;
position: center;
}
.ProjTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 50%;
}
.ProjTable td,
#ProjTable th {
border: 1px solid #ddd;
padding: 8px;
}
.ProjTable tr:nth-child(even) {
background-color: #f2f2f2;
}
.ProjTable tr:hover {
background-color: #ddd;
}
.ProjTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="work">Work</h3>
<div class="gl_content">
<button class="call_modal" style="cursor:pointer;">SAS Consult and Support</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p></p>
</div>
</div>
</div>
</div>
<div class="content">
<button class="call_modal" style="cursor:pointer;">Global Reporting Infrastructure Project (GRIP)</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQxuLL7OoxpB8Eju7xawRbmtMl855M2e09m1-_30NDM8i_m2vr" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p><strong>Global Reporting Infrastructure Project (GRIP)</strong> is a key global initiative and is aimed at delivering a set of standard reports with standard metrics, definitions and templates across RBWM products Origination, Portfolio Management,
Profitability and RWAs by providing a global platform for Risk data aggregation and reporting. RBWM Risk has historically lacked Group level risk aggregation and reporting capability and relied upon end user computing to produce executive reporting
to drive risk management and decision making. Numerous inconsistencies relating to Key Performance Indicators (KPI) captured, business definitions used, calculations performed and report formats utilized are inherent with this method of reporting.
RBWM Risk management desires a system that will provide more metrics and KPIs to drive better decision making and analysis.</p>
</div>
</div>
</div>
</div>

Parallax page not scrolling smoothly on chrome

I am currently trying to make my portfolio website for my university project, however my parallax scrolling is not scrolling smoothly on google chrome, however I don't have any problems with safari.....
Do you know why and what this might cause this problem and how I can fix it.
/* this is my css code for my navigation bar. For example, you can change the background of the navigation bar */
#nav {
background-color: transparent;
overflow: hidden;
position: fixed;
}
/* this is the css code for the links inside the navigation bar for example where to position the links they way they will look */
#nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-family: "Lato", sans-serif;
}
/* this is to change the background of the buttons(links) when they are on hover */
#nav a:hover {
background-color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 2px rgb(0, 0, 255);
}
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: rgb(102, 102, 102);
}
.image1,
.image2,
.image3 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.image1 {
background-image: url(background1.jpg);
min-height: 100%;
}
.image2 {
background-image: url(background.jpg);
min-height: 400px;
}
.image3 {
background-image: url(ist.jpg);
min-height: 400px;
}
.section {
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: rgb(40, 46, 52);
color: rgb(0, 0, 0);
}
.text1 {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: rgb(0, 0, 0);
font-size: 27px;
letter-spacing: 8px;
text-transform: uppercase;
}
.text1 .border {
background-color: #111;
color: #fff;
padding: 20px;
}
.text1 .border.trans {
background-color: transparent;
}
#media(max-width:568px) {
.image1,
.image2,
.image3 {
background-attachment: scroll;
}
}
.arrow-down {
width: 100%;
margin: 0 auto;
text-align: center;
}
.arrow-down::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
margin-top: 820px;
margin-left: 820px;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-right: 4px solid rgb(255, 0, 0);
border-bottom: 4px solid rgb(0, 0, 0);
-webkit-transform: rotate(45deg);
animation: 3s arrow infinite ease;
}
#-webkit-keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
#keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- This is my code for my Navigation bar -->
<div id="nav">
HOME
ABOUT ME
MY PROJECTS
MY CV
CONTACT
</div>
<!-- this is my heading and the main background on my main page(Index) -->
<div class="image1">
<div class="text1">
<span class="border">
Ivan Chamukov
</span>
</div>
</div>
<!-- this is my code for my scrolling arrow, the "onclick" makes my class/object clickable -->
<div class="arrow-down" onclick="slideDown()"></div>
<!-- this is my page - About me, and the information about me. -->
<section class="section section-light">
<h2> About me</h2>
<p class="about">My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take
part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with
grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended
Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom. </p>
</section>
<div class="image2">
<div class="text1">
<span class="border">
Image Two Text
</span>
</div>
</div>
<section class="section section-dark">
<h2> Section Two </h2>
<p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
along the way</p>
</section>
<div class="image3">
<div class="text1">
<span class="border">
Image three text
</span>
</div>
</div>
<section class="section section-dark">
<h2> Section Three </h2>
<p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
along the way</p>
</section>
<div class="image2">
<div class="text1">
<span class="border">
Ivan Chamukov
</span>
</div>
</div>
The background image of the snowy mountains with the sled is almost 17 MB large. Parallax effects usually cause repainting on the browser. Repainting something that huge is a performance nightmare.
Reducing the file size of background1.jpg would help tremendously.

fade in and fade out div onclick with jQuery

I have a div on left and right of the page. Currently the div on the right is being hidden.
I'm trying to use jQuery to fadeout the div that is currently being displayed and replace it by fading in the hidden div.
What am I doing wrong? I followed the example on this similar question.
It should happen when you click the About link in the code snippet:
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255, 80, 70, 1) !important;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255, 80, 70, 1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float: left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255, 80, 70, 1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float: left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top: 2.5%;
}
.feed-show {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
Here is a codepen
Many thanks!
I have maded some modifications to your code:
I have changed position:absolute to keep hidden #feed-show with display:none
I have changed inside click function fadeIn to be executed when fadeOut is finish to avoid strange moving effect
$(document).ready(function(){
$("#feed-show").fadeOut(0);
$("a").on('click', function() {
$(".feed").fadeOut(1000,function(){
$("#feed-show").fadeIn(1000);
});
});
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
#feed-show{
display:none;
}
#feed-show p{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="container">
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK. C-oC aims to contribute to the
necessary exaltation of talented artists within the various
ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
OCULT TEXT
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
</div>
You have some problems on your code.
First, your feed-show div is inside your feed div. So if you fadeOut() your feed div, everything inside will be hidden.
And second, in your CSS you have absolute position and top and left properties set for your feed-show, so even if you fadeIn() that element, you're not gonna be able to see it.
I've made a couple of changes on your code, so you can see how one div is fade out and the other one is fade in.
Cheers!
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
.feed-show {
display: none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>

Categories