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");
});
Related
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
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 am creating a unordered list in Bootstrap 3 for my class. I am using a glyphicon as the bullet point. I am having trouble with the last item wrapping in desktop view and as I view it in different breakpoints the items sometimes display inline.
Here is my html
<div class="bg">
<div class="container-fluid text-center" style="height:100%;">
<div class="row content">
<div class="col-sm-2">
</div>
<div class="col-lg-8 text-left">
<h2>EDUCATION</h2>
<hr class="style1">
<h3 class="job">Bachelor of Science, Marketing - San Jose State University</h3>
<h2>CERTIFICATIONS</h2>
<hr class="style1">
<h3 class="job">HubSpot Inbound Certification</h3>
<h4>2016</h4>
<p>The course details the stages of the inbound methodology. Lectures explained various inbound marketing topcis such as how to optimize websites and best practices for a sucessful landing page.</p>
<h3 class="job">Coursera Web Design for Everybody</h3>
<h4>2017</h4>
<ul class="custom-bullet col-lg-4">
<li>Introduction to HTML5</li>
<li>Introduction to CSS3</li>
<li>Interactivity with JavaScript</li>
<li>Advanced Styling with Responsive Design</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
Here is my css:
.bg {
background-color:#ffffff;
background-size:100%;
width:100%;
height: auto;
padding-top:8%;
margin-bottom:0;
margin-top:3%;
}
.job {
color: #800080;
}
.custom-bullet li {
display: block;
}
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left;
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
You are setting float: left; to the ul li, that causes the 'inline' looking behavior.
On larger screen use have container with col-lg-4, so the container is smaller and some items do not fit there and appears on new line.
You can reset this, or adjust the selector, depends on what you want.
.custom-bullet li
display: block;
float: none;
}
The problem is with this class
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left; // change to none
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
By the way why did you add this as with CSS pseudo-elements rather than writing in html.
I'm trying to turn my vertical tab into an accordion view when the page is less than 480px and back to vertical tab view if it is not. I've tried to use #media screen and (min-width: 480px) {} + adding the vertical tab CSS styling but I ended up going no where with it. Then I tried searching a way on how to do this online. I ended up finding some examples but they used different methods on how to accomplish this effect. How can I get this vertical tab transform into an accordion when the screen is less than 480px?
The Link below is an example of the effect I'm going for. (when looking at the example resize the window to see the vertical tab/accordion effect)
Example: https://codepen.io/thejettmiller/pen/hqnua
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
#vertical_tab_nav ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
#vertical_tab_nav li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
#vertical_tab_nav div {
display: block;
float: left;
background: #fff;
background: #fff;
width: 64%;
min-height: 500px;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
.tab_drawer_heading {
display: none;
}
#media screen and (max-width: 781px) {
ul.tabs {
display: none;
}
.tab_container {
display: block;
margin: 0 auto;
width: 95%;
border-top: none;
border-radius: 0;
box-shadow: 0px 0px 10px black;
}
.tab_drawer_heading {
background-color: #ccc;
color: #000;
margin: 0;
padding: 5px 20px;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
&:hover {
background: #ccc;
}
}
.d_active {
background: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul class="tabs">
<li>Tab One</li>
<li class="selected">Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div class="tab_container">
<article>
<h2 class="d_active tab_drawer_heading">Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove
illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died
and twenty were injured. Administration was responsible for it.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van
every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from
stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven
students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water,
health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist.
The government should intensify searching operations in trains.1</p>
</article>
</div>
</section>
I belive this is what you are after:
Codepen link: https://codepen.io/teodragovic/pen/wqEvOV
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$("article").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li a").removeClass("selected");
$("ul.tabs li a[rel^='"+d_activeTab+"']").addClass("selected");
});
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
.tabs {
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
.tabs li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
.tab_container {
display: block;
background: #fff;
width: 80%;
min-height: 500px;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
padding: 10px 3% 3% 3%;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
#media screen and (max-width: 781px) {
.tab_container {
display: block;
margin: 0 auto;
width: 95%;
border-top: none;
border-radius: 0;
box-shadow: 0px 0px 10px black;
}
.d_active {
background: #fff;
}
}
.tabs {
display: none;
}
// style accordion links
.tab_drawer_heading {
margin: 0;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 3%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#media screen and (min-width: 480px) {
.tab_container {
float: left;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
width: 64%;
}
.tabs {
display: block;
}
.tab_drawer_heading {
display: none;
}
article {
padding: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul class="tabs">
<li><a rel="tab1" href="index.html">Tab One</a></li>
<li><a rel="tab2" href="index.html">Tab Two</a></li>
<li><a rel="tab3" href="index.html">Tab Three</a></li>
<li><a rel="tab4" href="index.html">Tab Four</a></li>
</ul>
<div class="tab_container">
<h3 class="tab_drawer_heading" rel="tab1">Tab One</h3>
<article id="tab1">
<h2>Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove
illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died
and twenty were injured. Administration was responsible for it.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab2">Tab Two</h3>
<article id="tab2">
<h2>Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van
every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from
stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab3">Tab Three</h3>
<article id="tab3">
<h2>Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven
students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab4">Tab Four</h3>
<article id="tab4">
<h2>Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water,
health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist.
The government should intensify searching operations in trains.1</p>
</article>
</div>
</section>
What was missing/was wrong in your code:
in between article elements I added <h3> tags that serve as accordion links (if you want them to be also titles for content then hide article heading when width is less than 480px) and applied .tab_drawer_heading to that element instead of article title element.
added rel attribute and id on article to make "drawer" JS code work
I edited "drawer mode" piece of JS to match your classes to add .selected class on tab nav link instead of .active on parent <li>.
did some styling on accordion links and also hide them on +480px widths and did opposite for tabs navigation.
Adding some styles under the media query, its working fine.
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
#vertical_tab_nav ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
#vertical_tab_nav li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
#vertical_tab_nav div {
display: block;
float: left;
background: #fff;
width: 64%;
min-height: 500px;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
#media screen and (max-width: 480px) {
#vertical_tab_nav ul {
width: 100%;
border-radius: 10px 10px 0 0;
}
#vertical_tab_nav li {
display: inline-block;
width: 24%;
height: auto;
}
#vertical_tab_nav div {
width: 94%;
border-radius: 0 0 10px 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul>
<li>Tab One</li>
<li class="selected">Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div>
<article>
<h2>Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died and twenty were injured. Administration was responsible for it.</p>
</article>
<article>
<h2>Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<article>
<h2>Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<article>
<h2>Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water, health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist. The government should intensify searching operations in trains.</p>
</article>
</div>
</section>
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;
}