So the issue is, the header should be fixed to ease navigation throughout the page.
However with the carousel of testimonials they are overlapping if you scroll down. Any solution or elegant alternative is highly appreciated.
Fiddle:https://jsfiddle.net/6oLuyqdp/3/
PS: Yes I know the NAV looks horrible for a smaller screen that's the next step. The overlaying is currently the issue.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CopyCrest</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="We are a team of experienced copywriters that offer professional and high-quality copywriting services for businesses of all sizes. Our services include website copy, blog posts, product descriptions, and more."
/>
<link rel="shortcut icon" type="image/x-icon" href="logo_small.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css"
/>
<link rel="stylesheet" href="example.css" />
</head>
<body>
<header>
<div class="logo-container">
<a href="#">
<img src="logo2_transparent.png" alt="logo" />
</a>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Testimonials</li>
<li>Order</li>
</ul>
</nav>
</header>
<main>
<section id="testimonials">
<h1>Testimonials</h1>
<!-- START TESTIMONIAL -->
<section id="testimonial_area" class="section_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="testmonial_slider_area text-center owl-carousel">
<div class="box-area">
<div class="img-area">
<img src="img/2.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"The team at My Copywriting Website helped us improve our
website's copy and increase our conversion rate. Highly
recommend!" - John Doe, CEO at Example Inc.<br><br><br>
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/3.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"Our firm gained more leads because to the blog posts and
social media content My Copywriting Website produced for
us. I'm grateful." — Jane Smith, Example Inc.'s marketing
manager<br><br>
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/4.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"The quality of the product descriptions that My
Copywriting Website wrote for us was excellent. They
really helped us boost our sales." - Michael Brown,
E-commerce Manager at Example Inc.<br><br>
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/5.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"I was impressed by the quality of the copywriting
services provided by My Copywriting Website. They helped
us improve our website's engagement and conversions." -
Sarah Lee, Head of Digital Marketing at Example Inc.<br>
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/6.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"My Copywriting Website's blog post writing services were
excellent. They helped us attract more visitors to our
website and generate more leads." - David Kim, Content
Marketing Manager at Example Inc.<br><br>
</p>
<h6 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
</div>
</div>
</div>
</div>
</section>
<!-- END TESTIMONIAL -->
</section>
<p>
We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics. We create a pitch deck that is polished, interesting, and
successfully communicates the value of your company to make a
lasting impression. Our team of professionals will collaborate
with you to comprehend your company and target market, then use
this understanding to develop a pitch deck that connects with them
and motivates them to act. In order to make the deck as successful
as possible, we'll also employ analytics and statistics.
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script>
$(".testmonial_slider_area").owlCarousel({
autoplay: true,
slideSpeed: 1000,
items: 3,
loop: true,
nav: true,
navText: [
'<i class="fa fa-arrow-left"></i>',
'<i class="fa fa-arrow-right"></i>',
],
margin: 30,
dots: true,
responsive: {
320: {
items: 1,
},
767: {
items: 2,
},
600: {
items: 2,
},
1000: {
items: 3,
},
},
});
</script>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script>
$(".testmonial_slider_area").owlCarousel({
autoplay: true,
slideSpeed: 1000,
items: 3,
loop: true,
nav: true,
navText: [
'<i class="fa fa-arrow-left"></i>',
'<i class="fa fa-arrow-right"></i>',
],
margin: 30,
dots: true,
responsive: {
320: {
items: 1,
},
767: {
items: 2,
},
600: {
items: 2,
},
1000: {
items: 3,
},
},
});
</script>
</body>
</html>
CSS:
header {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* The first and third column will take up all the remaining space */
align-items: center; /* center the items vertically */
height: 22vh; /* you can use vh to set the height in relation to the viewport height */
background-color: #5bc0f8;
color: #fff;
box-shadow: 0px 2px 5px rgb(48, 47, 47);
position: fixed;
width: 100%;
left: 0px;
top: 0px;
}
.logo-container {
grid-row: 1;
grid-column: 1;
width: 13vw;
height: 20vh;
}
.logo-container a {
display: flex;
}
.logo-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
nav {
grid-row: 1;
grid-column: 2;
text-align: right;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin-right: 10px;
}
nav ul li a {
color: #0a3351;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
transition: background-color 0.2s ease;
font-size: 2.5vh;
margin: 2.5vh;
}
section {
padding-top: 22vh;
}
#testimonial_area {
padding: 10% 0;
}
.box-area {
padding: 30px;
position: relative;
display: block;
background: #fff;
color: #000;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin: 40px 0;
}
.box-area h5 {
font-size: 16px;
font-weight: 700;
color: #0a69ed;
margin-top: 30px;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.box-area span {
color: #262626;
display: block;
font-size: 13px;
margin: 0 0 10px;
font-weight: 400;
}
.box-area .content {
color: #262626;
}
.box-area .img-area {
width: 90px;
height: 90px;
position: absolute;
top: -40px;
left: 0;
bottom: 0;
margin: 0 auto;
right: 0;
z-index: 1;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}
.box-area .img-area img {
width: 100%;
height: auto;
border-radius: 50%;
}
.socials {
margin-top: 30px;
}
.socials i {
margin: 0 10px;
color: #0a69ed;
font-size: 18px;
}
#testimonial_area .owl-nav {
position: absolute;
top: 50%;
width: 100%;
}
#testimonial_area .owl-prev,
#testimonial_area .owl-next {
width: 40px;
height: 40px;
line-height: 40px;
color: #0a69ed;
border-radius: 50%;
text-align: center;
background: #fff;
position: absolute;
}
#testimonial_area .owl-prev {
left: -60px;
top: -30px;
}
#testimonial_area .owl-next {
right: -60px;
top: -30px;
}
#media only screen and (max-width: 991px) {
.owl-nav {
display: none;
}
}
#media only screen and (max-width: 767px) {
.box-area {
text-align: center;
}
.owl-nav {
display: none;
}
}
You have not set a z-index to the header.
Just add z-idex:100; or something like that to the header tag it will be fixed.
add this to your css code in header
header{z-index: 10;}
You should see lessons for the use of the Z-Index property in CSS3
Related
I have a header element that I want to be sticky and appear in front of my article. I have tried changing the z-index but I cannot seem to get it to work.
Does z-index not work at all when I have certain elements floating? Or is there a way to make it work?
Any help would be appreciated. Thanks
h1,
h2,
h3,
h4 {
margin: inherit;
}
.top {
position: sticky;
background-color: grey;
margin: 0em;
z-index: 1000;
float: none;
}
.header {
top: 0em;
}
.navigation {
top: 2em;
}
.aside {
width: 25%;
height: 100%;
float: right;
background-color: darkgrey;
clear: right;
}
.section {
width: 75%;
height: 100%;
float: left;
/*background-color: lightgrey;*/
}
.hidden_link {
color: inherit;
text-decoration: none;
}
* {
z-index: -1;
}
<body>
<main>
<header class="header top">
<h1>
Toyota JZ Engine
</h1>
</header>
<nav class="navigation top">
<a>link</a>
</nav>
<article>
<aside class="aside">
<p><a class="hidden_link" title="Multi-valve" href="https://en.wikipedia.org/wiki/Multi-valve">24 Valves</a> means that there are 4 valves per cylinder</p>
<p><a class="hidden_link" title="DOHC" href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)">DOHC</a> means that there are 2 Camshafts per bank of the sylinder head, 1 for intake and 1 for exhaust</p>
<p>Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox sends all power to the rear wheels</p>
</aside>
<section class="section">
<h2>Introduction</h2>
<hr>
<p>The Toyota JZ engine family is a series of inline-6 automobile engines, which are designed as a replacement for the M-series inline-6 engines. The family features 2.5- and 3.0-litre versions; all are 24-valve DOHC engines.</p>
</section>
<section class="section">
<h3>1JZ</h3>
<hr>
<p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
<h4>1JZ-GE</h4>
<p>This is another common engine version which has a 10:1 compression ratio. The early 1JZ-GE, like all JZ engines, is desigined for longitudnal mounting and RWD. All such models offered only a 4-speed automatic transmission.</p>
<h4>1JZ-GTE</h4>
<p>The 1JZ also features a twin-turbocharged version, known as the 1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A turbochargers which sit parrallel and blow through a side or front mount intercooler. It has an 8:5:1 static compression
ratio. Early generation 1JZ-GTEs combined the inherent smoothness of an inline 6 with the revving capacity of its short stroke and early power delivery of its turbochargers.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg" title="1JZ-GTE">
<figcaption>1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg" title="1JZ-GTE">
<figcaption>Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83 Toyota Cressida</figcaption>
</figure>
<h4>1JZ-FSE</h4>
<p>1JZ-FSE is likely the least known engine of the JZ family. Their goal is to acheive minimal emissions and fuel consumption with no performance loss. It employs the same block as the conventional 1JZ-GE but the cylinder head has a relatively narrow
angle with swirl conrol valves. Fuel consumpton is reduced by about 20%.</p>
<h3>2JZ</h3>
<hr>
<p>The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is not merely a stroked version of the 1JZ, but it has longer connectiong rods and a taller block deck.</p>
<h4>2JZ-GE</h4>
<p>The 2JZ-GE is a common version with Sequential Electronic Fuel Injection, an auminium head, and 4 valves per cylinder, in addition to a cast-iron cylinder block.</p>
<h4>2JZ-GTE</h4>
</section>
</article>
<footer>
</footer>
</main>
</body>
You have a couple things 1 that could be a mistake and another about floating element and block formatting context.
header, main and footer here are supposed to be two siblings (even that you can have headers and footers inside main)
floating element overflow their containers, You need to create a block formatting context (see the link below)
A possible fixed is : extract header and footer from main (nav can be sent to header or remain there).
Then reset the block formatting context(BFC) of main via overflow:hidden, or display:grid, or whatever you find more appropriate after reading : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
h1,
h2,
h3,
h4 {
margin: inherit;
}
main {
overflow: hidden;/* wraps around and aside floats see BFC*/
}
.top {
position: sticky;
background-color: grey;
margin: 0em;
z-index: 1000;
float: none;
}
.header {
top: 0em;
}
.navigation {
top: 2em;
}
.aside {
width: 25%;
height: 100%;
float: right;
background-color: darkgrey;
clear: right;
}
.section {
width: 75%;
height: 100%;
float: left;
/*background-color: lightgrey;*/
}
.hidden_link {
color: inherit;
text-decoration: none;
}
/* * {
z-index: -1;
}*/
<body>
<header class="header top">
<h1>
Toyota JZ Engine
</h1>
</header>
<nav class="navigation top">
<a>link</a>
</nav>
<main>
<article>
<aside class="aside">
<p><a class="hidden_link" title="Multi-valve" href="https://en.wikipedia.org/wiki/Multi-valve">24 Valves</a> means that there are 4 valves per cylinder</p>
<p><a class="hidden_link" title="DOHC" href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)">DOHC</a> means that there are 2 Camshafts per bank of the sylinder head, 1 for intake and 1 for exhaust</p>
<p>Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox sends all power to the rear wheels</p>
</aside>
<section class="section">
<h2>Introduction</h2>
<hr>
<p>The Toyota JZ engine family is a series of inline-6 automobile engines, which are designed as a replacement for the M-series inline-6 engines. The family features 2.5- and 3.0-litre versions; all are 24-valve DOHC engines.</p>
</section>
<section class="section">
<h3>1JZ</h3>
<hr>
<p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
<h4>1JZ-GE</h4>
<p>This is another common engine version which has a 10:1 compression ratio. The early 1JZ-GE, like all JZ engines, is desigined for longitudnal mounting and RWD. All such models offered only a 4-speed automatic transmission.</p>
<h4>1JZ-GTE</h4>
<p>The 1JZ also features a twin-turbocharged version, known as the 1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A turbochargers which sit parrallel and blow through a side or front mount intercooler. It has an 8:5:1 static compression
ratio. Early generation 1JZ-GTEs combined the inherent smoothness of an inline 6 with the revving capacity of its short stroke and early power delivery of its turbochargers.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg" title="1JZ-GTE">
<figcaption>1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg" title="1JZ-GTE">
<figcaption>Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83 Toyota Cressida</figcaption>
</figure>
<h4>1JZ-FSE</h4>
<p>1JZ-FSE is likely the least known engine of the JZ family. Their goal is to acheive minimal emissions and fuel consumption with no performance loss. It employs the same block as the conventional 1JZ-GE but the cylinder head has a relatively narrow
angle with swirl conrol valves. Fuel consumpton is reduced by about 20%.</p>
<h3>2JZ</h3>
<hr>
<p>The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is not merely a stroked version of the 1JZ, but it has longer connectiong rods and a taller block deck.</p>
<h4>2JZ-GE</h4>
<p>The 2JZ-GE is a common version with Sequential Electronic Fuel Injection, an auminium head, and 4 valves per cylinder, in addition to a cast-iron cylinder block.</p>
<h4>2JZ-GTE</h4>
</section>
</article>
</main>
<footer>
footer
</footer>
</body>
For other tip, now-days flex or grid are used to build layouts and it is much easier and much more powerful (no side effects ), float can be used for what it was made at first (it was not entire layouts) here an example with a sticky header, nav and footer https://jsfiddle.net/6r1o0sug/
When creating a navbar, use position fixed, and include all elements inside a div:
<body>
<main>
<!-- Included the header and navigation in one div -->
<div class="navbar">
<header class="header">
<h1>Toyota JZ Engine</h1>
</header>
<nav class="navigation">
<a>link</a>
</nav>
</div>
<article>
<aside class="aside">
<p>
<a
class="hidden_link"
title="Multi-valve"
href="https://en.wikipedia.org/wiki/Multi-valve"
>24 Valves</a
>
means that there are 4 valves per cylinder
</p>
<p>
<a
class="hidden_link"
title="DOHC"
href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)"
>DOHC</a
>
means that there are 2 Camshafts per bank of the sylinder head, 1
for intake and 1 for exhaust
</p>
<p>
Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox
sends all power to the rear wheels
</p>
</aside>
<section class="section">
<h2>Introduction</h2>
<hr />
<p>
The Toyota JZ engine family is a series of inline-6 automobile
engines, which are designed as a replacement for the M-series
inline-6 engines. The family features 2.5- and 3.0-litre versions;
all are 24-valve DOHC engines.
</p>
</section>
<section class="section">
<h3>1JZ</h3>
<hr />
<p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
<h4>1JZ-GE</h4>
<p>
This is another common engine version which has a 10:1 compression
ratio. The early 1JZ-GE, like all JZ engines, is desigined for
longitudnal mounting and RWD. All such models offered only a 4-speed
automatic transmission.
</p>
<h4>1JZ-GTE</h4>
<p>
The 1JZ also features a twin-turbocharged version, known as the
1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A
turbochargers which sit parrallel and blow through a side or front
mount intercooler. It has an 8:5:1 static compression ratio. Early
generation 1JZ-GTEs combined the inherent smoothness of an inline 6
with the revving capacity of its short stroke and early power
delivery of its turbochargers.
</p>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg"
title="1JZ-GTE"
/>
<figcaption>
1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo
</figcaption>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg"
title="1JZ-GTE"
/>
<figcaption>
Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83
Toyota Cressida
</figcaption>
</figure>
<h4>1JZ-FSE</h4>
<p>
1JZ-FSE is likely the least known engine of the JZ family. Their
goal is to acheive minimal emissions and fuel consumption with no
performance loss. It employs the same block as the conventional
1JZ-GE but the cylinder head has a relatively narrow angle with
swirl conrol valves. Fuel consumpton is reduced by about 20%.
</p>
<h3>2JZ</h3>
<hr />
<p>
The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is
not merely a stroked version of the 1JZ, but it has longer
connectiong rods and a taller block deck.
</p>
<h4>2JZ-GE</h4>
<p>
The 2JZ-GE is a common version with Sequential Electronic Fuel
Injection, an auminium head, and 4 valves per cylinder, in addition
to a cast-iron cylinder block.
</p>
<h4>2JZ-GTE</h4>
</section>
</article>
<footer></footer>
</main>
</body>
As you can see, I included all elements inside the top bar in a single div.
Css:
body {
margin: 0;
}
h1,
h2,
h3,
h4 {
margin: inherit;
}
.navbar {
/* Use position fixed, and z-index, set width to max*/
position: fixed;
z-index: 2;
width: 100%;
margin: 0;
background-color: grey;
float: none;
}
article {
/* Add padding to content so that the navbar doesn't overlap */
padding-top: 3.45rem;
}
.aside {
width: 25%;
height: 100%;
float: right;
background-color: darkgrey;
clear: right;
}
.section {
width: 75%;
height: 100%;
float: left;
/*background-color: lightgrey;*/
}
.hidden_link {
color: inherit;
text-decoration: none;
}
Also, I set the body margin to 0 so that everything fits perfectly.
I want to display a button in my project and I have created a button.css file that stores all the CSS for creating the button. Initially, I used the whole code from a different source but have managed to copy and paste the css code into the button.css file except the HTML code. I am having issues with the html code and don't know where to paste it in my index.html file. I tried working with it but it would produce a totally different output with just a simple and plain box that says "Check Out My Blogs!"
The HTML Code I want To Paste In My index.html file:
<head>
<link type="text/css" rel="stylesheet" href="css/button.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<div id="container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Check Out My Blogs!</span>
</button>
</div>
My Main index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title >Hussain Omer</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-180664536-1');
</script>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav class="nav-menu">
<ul>
<li class="active"><i class="bx bx-home"></i> <span>Home</span></li>
<li><i class="bx bx-user"></i> <span>About Me</span></li>
<li><i class="bx bx-file-blank"></i> <span>Resume</span></li>
<li><i class="bx bx-book-content"></i> <span>Projects</span></li>
<li><i class="bx bx-server"></i> <span>Blogs</span></li>
<li><i class="bx bx-server"></i> <span>Skills</span></li>
<li><i class="bx bx-envelope"></i> <span>Contact</span></li>
</ul>
</nav><!-- .nav-menu -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Hussain Omer</h1>
<p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
<div class="social-links">
<!--<i class="bx bxl-twitter"></i>
<i class="bx bxl-facebook"></i>-->
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about portfolio services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>My Story</h2>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Lahore, Pakistan (2003-2010)</h4>
<p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited Pakistan in over 5 years, and I hope to go back some day 😀
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>About ME</h2>
<p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
</div>
<img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am upto 😃</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h4 class="title">7CUPS.com</h4>
<p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<h4 class="title">School Clubs</h4>
<p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold a Vice-President position at my school's STEM Club. I am also the Technical Team Member for our school's Student Tech Hub</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<h4 class="title">Blog Writing</h4>
<p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences. Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
</body>
</html>
The html code may look very long but I want the button to be displayed after "This is my new favourite thing to do when I am bored........" which is near the very bottom
So where should the HTML code go for it to display the button right after the line I said above? I tried putting the code after the line but it wouldnt work for some reason. Could you guys please help?
Here is the Button.css file which has the css for my button:
#import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Mukta", sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #f3f8fa;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
right: 25px;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
#supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}
#yes {
grid-area: main;
align-self: center;
justify-self: center;
}
}
I am having problem with smooth anchor link, where there is only few content in the first section and second section is visible in the viewport, the active state shows to the second anchor.
here is the fiddle: https://jsfiddle.net/moviecrew/k4o275Lh/17/
try increasing the result page height and decreasing.
is there any way I can make the first item active when there is less content in the first section?
function initAnchors() {
new SmoothScroll({
anchorLinks: 'a.smooth-scroll[href^="#"]:not([href="#"])',
// extraOffset: 185,
extraOffset: 209,
// extraOffset: 313,
activeClasses: 'parent',
anchorActiveClass: 'active',
wheelBehavior: 'none'
});
}
This is where the page is initialized.
you can use css min-height:100%:
document.querySelectorAll('header a').forEach(ha=>{
ha.onclick=e=>{
document.querySelector('header li.active').classList.remove('active')
e.target.closest('li').classList.add('active')
}
})
.nav {
list-style: none;
display: block;
width: 100%;
margin: 0;padding: 0;
}
.nav>li {
display: inline-block;
padding: 8px;
}
.nav a {
display: block;
background: #666;
padding: 5px 10px;
text-decoration: none;
color: #fff;
border-bottom: 2px solid #666;
}
.nav li.active a,
.nav li a:hover {
background: #333;
border-bottom-color: #f0f;
}
/* .subcontent { padding-top: 40px; } */
html { height:100%; }
body { display: flex; height: 100%; flex-direction: column; margin: 0;padding: 0; }
/* header { } */
main { flex-grow:1; overflow: auto; scroll-behavior: smooth; }
.subcontent { min-height:100%; }
<header>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a class="nav-tab-link smooth-scroll" href="#planBenefits">Plan Benefits</a>
</li>
<li role="presentation">
<a class="nav-tab-link smooth-scroll" href="#supportDocuments">Support Documents</a>
</li>
</ul>
</header>
<main>
<div id="planBenefits" class="subcontent">
<h1 class="push-bot-3 text-capitalize"><strong>Plan benefits</strong></h1>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
</div>
<div id="supportDocuments" class="subcontent">
<h1 class="push-bot-3 text-capitalize"><strong>Supports</strong></h1>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
</div>
</main>
[edit] other solution: (just for the last subcontent)
document.querySelectorAll('header a').forEach(ha=>{
ha.onclick=e=>{
document.querySelector('header li.active').classList.remove('active')
e.target.closest('li').classList.add('active')
}
})
.nav {
list-style: none;
display: block;
width: 100%;
margin: 0;padding: 0;
}
.nav>li {
display: inline-block;
padding: 8px;
}
.nav a {
display: block;
background: #666;
padding: 5px 10px;
text-decoration: none;
color: #fff;
border-bottom: 2px solid #666;
}
.nav li.active a,
.nav li a:hover {
background: #333;
border-bottom-color: #f0f;
}
/* .subcontent { padding-top: 40px; } */
html { height:100%; }
body { display: flex; height: 100%; flex-direction: column; margin: 0;padding: 0; }
/* header { } */
main { flex-grow:1; overflow: auto; scroll-behavior: smooth; }
main div.subcontent:last-child { min-height:100vh; }
<header>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a class="nav-tab-link smooth-scroll" href="#planBenefits">Plan Benefits</a>
</li>
<li role="presentation">
<a class="nav-tab-link smooth-scroll" href="#supportDocuments">Support Documents</a>
</li>
</ul>
</header>
<main>
<div id="planBenefits" class="subcontent">
<h1 class="push-bot-3 text-capitalize"><strong>Plan benefits</strong></h1>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
</div>
<div id="supportDocuments" class="subcontent">
<h1 class="push-bot-3 text-capitalize"><strong>Supports</strong></h1>
<p class="push-bot-2">Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.</p>
</div>
</main>
I'm trying to have a collapsible where the arrow changes from right facing to down-facing when opened. The code i have pretty much does what I want, but when i open the collapsible with a click, the icon changes, and then immediately goes back to right-facing when I lift my mouse. I need it to stay down-facing until i close the collapsible with a click again. Here is my code:
<body>
<script>
$(document).ready(function(){
$(".collapsible-body").hide();
$(".collapsible-header").click(function(){
$(this).next(".collapsible-body").slideToggle("normal");
});
});
</script>
<style>
.collapsible-header {
display:inline-block;
justify-content: space-between;
vertical-align: middle;
width: 95.8%;
margin-bottom: 2%;
padding: 15px;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
font-size: 14px;
font-weight:500;
line-height:1.4;
white-space:nowrap;
webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
color:#333;
background-color:#e8e8e8;
}
.collapsible-header:after {
font-family: 'fontawesome';
content: "\f054";
float: left;
font-size: .70em;
vertical-align: middle;
margin-right: 10px;
display: inline-block;
line-height: 1.5em;
margin-top: 4.2px;
}
.collapsible-header:active:after {
font-family: 'fontawesome';
content: "\f078";
float: left;
font-size: .70em;
vertical-align: middle;
margin-right: 10px;
display: inline-block;
line-height: 1.556em;
}
.collapsible-header.focus,
.collapsible-header:focus {
color:#333;
background: #d8d8d8 !important;
}
.active, .collapsible-header:hover {
color:#333;
background: #d8d8d8;
}
ul.collapsible {
list-style-type:none;
padding-inline-start: 0;
}
.collapsible-body {
text-align:left;
padding-top: 2%;
padding-bottom: 2%;
border-bottom: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
margin-bottom: 2%;
}
.collapsible-body p {
margin-left: 1.5%;
margin-right: 1.5%;
}
</style>
<h3>Delivering Relevant Tools and Resources</h3>
<p>Our key strength is providing an avenue for bringing together scientific information and technical research on cereal grains and related materials through its various resources. Members belong to Cereals & Grains Association to keep up-to-date on key issues through meetings and publications as well as to have opportunities for professional growth and networking with their peers. Key offerings include:</p>
<br/>
<ul class="collapsible">
<li>
<div class="collapsible-header">Cereal Chemistry</div>
<div class="collapsible-body"><p>Cereal Chemistry, a journal with peer-reviewed, original research on raw materials, processes, and products utilizing cereals, oilseeds, and pulses as well as analytical procedures and methods in the cereals area. No other journal surpasses it in the quantity and quality of juried, original research.</p></div>
</li>
<li>
<div class="collapsible-header">Cereal Foods World (CFW)</div>
<div class="collapsible-body"><p>Cereal Foods World (CFW) include feature articles and original research in a multimedia environment that focuses on advances in grain-based food science and the application of these advances on current practices in baking, snack foods, breakfast foods, and other grain-based products.</p></div>
</li>
<li>
<div class="collapsible-header">Cereals & Grains Association Books</div>
<div class="collapsible-body"><p>Cereals & Grains Association offers more than 65 titles on various food science topics plus the highly respected <i>AACC Approved Methods of Analysis, 11th Edition</i>. Some titles are technically focused while others are designed for generalists.</p></div>
</li>
<li>
<div class="collapsible-header">Annual Meeting</div>
<div class="collapsible-body"><p>The Annual Meeting draws an international audience of more than 1,000 grain-based professionals to discuss key grain science issues. The annual meeting is the primary education and networking event for professionals working in the grain-based foods industry around the world. The annual meeting also features a tradeshow composed of more than 250 exhibits.</p></div></LI>
<li>
<div class="collapsible-header">Continuing Education</div>
<div class="collapsible-body"><p><p>Continuing education programs offer quality professional development services for food industry professionals at any level in a variety of food-related industries. Courses are designed to increase skills and broaden understanding of grain-based applications.</p></div>
</li>
<li>
<div class="collapsible-header">Website</div>
<div class="collapsible-body"><p>Our website (www.cerealsgrains.org) offers members the opportunity to obtain information and resources in one common location. The website features more than 40 years of searchable <I>Cereal Chemistry </I>abstracts, an online catalog of books, special reports, calendar of events, online symposia, and a searchable directory is always available to find members by geographic region or area of expertise.</p></div></LI>
<li>
<div class="collapsible-header">Technical and Administrative Committees</div>
<div class="collapsible-body"><p>Our members work together on various initiatives through technical and administrative committees. Committee participants help identify emerging issues and create definitions for critical industry ingredients, as well as investigate and validate analytical methodology.</p></div>
</li>
</ul>
</body>
Rather than using a pseudo-class to define the different icon, you could also toggle the class of the header, and define the special appearance in that class.
So this class
.collapsible-header:active:after {...}
Becomes
.collapsible-header.open {...}
And
$(".collapsible-header").click(function(){
$(this).next(".collapsible-body").slideToggle("normal");
});
Becomes
$(".collapsible-header").click(function(){
$(this).next(".collapsible-body").slideToggle("normal");
$(this).toggleClass("open");
});
I have written the css, js and html for this simple application to appear on scroll and it still won't run in html? Maybe it's the way I'm connecting it in my html but that seems fine I have searhed many sites to confirm it's right... I don't know where I'm going wrong.
CSS:
.aboutfilmandcrew {
width: 100%;
float: left;
background-color: green;
}
#filminfo{
padding:1em;
border:.1em solid rgb(230, 230, 230);
margin: 2em;
width: 40%;
float: left;
}
#crew{
padding:1em;
border:.1em solid rgb(230, 230, 230);
margin: 2em;
width: 40%;
float: right;
}
HTML:
<div>
<div id="filminfo"> Neuromancer, a novel written by William Gibson in 1984, takes place in the near future in a cyberpunk setting. Cyberpunk is a genre that focuses on future societies where technology has advanced, but crime and corruption have as well. Common features include globe-spanning mega-corporations, cybernetically enhanced mercenaries, and the importance of technology as a tool for crime. The story follows the experiences of Case, an out-of-work hacker who is contacted by a mysterious new employer called Armitage. Along with Molly, a mercenary cyborg, and a thief/illusionist named Peter Riviera, Case participates in a series of data thefts for their employer. Based on the novel, and helmed by master director Ridley Scott, NEUROMANCER features a star studded cast that includes Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch.
<br/>
<h4> GENRES </h4> <p>Sci fi/Adventure </p>
</div>
<!---aboutfilm-->
<div id="crew">
<p>Director Ridley Scott </p>
<p> Screenplay by Drew Goddard </p>
<p> Based on the Novel By William Gibson </p>
<p> Producers Simon Kinberg, Ridley Scott, Michael Schaefer, Aditya Sood, Mark Huffam </p>
<p> Actors Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch </p>
</div>
</div>
<!---crew-->
<!---aboutfilmandcrew-->
JS:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 200) {
$('.aboutfilmandcrew').fadeIn();
} else {
console.log("<");
$('.aboutfilmandcrew').fadeOut();
}
});`
According to me, your code is working as you needed.
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 200) {
$('.aboutfilmandcrew').fadeIn();
} else {
$('.aboutfilmandcrew').fadeOut();
}
});
.aboutfilmandcrew {
width: 100%;
float: left;
background-color: green;
}
#filminfo {
padding: 1em;
border: .1em solid rgb(230, 230, 230);
margin: 2em;
width: 40%;
float: left;
}
#crew {
padding: 1em;
border: .1em solid rgb(230, 230, 230);
margin: 2em;
width: 40%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aboutfilmandcrew">
<p id="filminfo">
Neuromancer, a novel written by William Gibson in 1984, takes place in the near future in a cyberpunk setting. Cyberpunk is a genre that focuses on future societies where technology has advanced, but crime and corruption have as well. Common features include globe-spanning mega-corporations, cybernetically enhanced mercenaries, and the importance of technology as a tool for crime.
The story follows the experiences of Case, an out-of-work hacker who is contacted by a mysterious new employer called Armitage. Along with Molly, a mercenary cyborg, and a thief/illusionist named Peter Riviera, Case participates in a series of data thefts for their employer. Based on the novel, and helmed by master director Ridley Scott, NEUROMANCER features a star studded cast that includes Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch.
<h4>GENRES</h4>
Sci fi/Adventure
</p>
</div>
<div id="crew">
<p>Director Ridley Scott </p>
<p> Screenplay by Drew Goddard </p>
<p> Based on the Novel By William Gibson </p>
<p> Producers Simon Kinberg, Ridley Scott, Michael Schaefer, Aditya Sood, Mark Huffam </p>
<p> Actors Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch </p>
</div>
$(function(){
$(".aboutfilmandcrew").hide();
});
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 200) {
$('.aboutfilmandcrew').fadeIn();
}
else {
$('.aboutfilmandcrew').fadeOut();
}
});
.aboutfilmandcrew {
width: 100%;
float: left;
background-color: green;
}
#filminfo {
padding: 1em;
border: .1em solid rgb(230, 230, 230);
margin: 2em;
width: 40%;
float: left;
}
#crew {
padding: 1em;
border: .1em solid rgb(230, 230, 230);
margin: 2em;
width: 40%;
float: right;
}
body {
height: 1600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mycss.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="aboutfilmandcrew">
<div id="filminfo"> Neuromancer, a novel written by William Gibson in 1984, takes place in the near future in a cyberpunk setting. Cyberpunk is a genre that focuses on future societies where technology has advanced, but crime and corruption have as well. Common features include globe-spanning mega-corporations, cybernetically enhanced mercenaries, and the importance of technology as a tool for crime. The story follows the experiences of Case, an out-of-work hacker who is contacted by a mysterious new employer called Armitage. Along with Molly, a mercenary cyborg, and a thief/illusionist named Peter Riviera, Case participates in a series of data thefts for their employer. Based on the novel, and helmed by master director Ridley Scott, NEUROMANCER features a star studded cast that includes Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch.
<br/>
<h4> GENRES </h4>
<p> Sci fi/Adventure </p>
</div>
<!---aboutfilm-->
<div id="crew">
<p>Director Ridley Scott </p>
<p> Screenplay by Drew Goddard </p>
<p> Based on the Novel By William Gibson </p>
<p> Producers Simon Kinberg, Ridley Scott, Michael Schaefer, Aditya Sood, Mark Huffam </p>
<p> Actors Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch </p>
</div>
<!---crew-->
</div>
</body>
</html>
There is a </p> after Sci fi/Adventure that you've never opened. Just add the starting <p> so you can easily fix this error.
EDIT: If you want to do what you've commented you have to set a specific size to the body in CSS.
body{
height:1000px;
}