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;
}
Related
hi I'm doing a website for one of my class projects its nothing fancy but I can't get my variables to define and not sure how to as I'm relatively new to this I've been trying to use different ways to call the variables but they won't define and I'm not sure why I've been using brackets so any help would be greatly appreciated
/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');
/*What the button is suppose to do*/
function doDemo() {
var button = this;
square.style.backgroundColor = "#ff4545";
button.setAttribute("diabled", "true");
setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("diabled");
}
clickMe.onclick = doDemo;
/* color for webpage*/
html{
background: silver;
}
/* setting for heading 1 */
h1{
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2{
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display:block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime{
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square{
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button{
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="script.js"></script>
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
https://www.artofdrink.com/soda/history-of-the-milkshake</p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
</body>
</html>
The most effecient way in modern browsers is to use the defer attribute in your script tag the tag in the head so you could just change your single line of code in the head to:
<script defer type="text/javascript" src="script.js"></script>
Besically this is the best approach because parsing finishes just like when we put the script at the end of the body tag, but overall the script execution finishes well before, because the script has been downloaded in parallel with the HTML parsing. Using defer gives you the best of both worlds: asynchronous loading but it waits until the DOM is ready.
There is a very good article explaining the effeciency of each javascript loading technique in detail. here.
You are trying to locate and reference your HTML elements before they've been parsed in to memory. Move your <script> reference to just before the closing body tag.
In the code below, I've manually inserted the code that you will be referencing, but as long as you keep the script tag where I have it below, you can remove the JavaScript and add the .js reference to the script.
/* color for webpage*/
html{
background: silver;
}
/* setting for heading 1 */
h1{
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2{
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display:block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime{
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square{
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button{
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
https://www.artofdrink.com/soda/history-of-the-milkshake</p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
<script>
/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');
/*What the button is suppose to do*/
function doDemo() {
var button = this;
square.style.backgroundColor = "#ff4545";
button.setAttribute("diabled", "true");
setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("diabled");
}
clickMe.onclick = doDemo;
</script>
</body>
</html>
It is recommended to use eventListeners and that will solve the issue
Also you need to make sure you spell things correctly - it is disabled
/*variables used in index.html document*/
let square;
let clickMe;
/*What the button is suppose to do*/
function doDemo() {
square.style.backgroundColor = "#ff4545";
clickMe.setAttribute("disabled", "true");
setTimeout(clearDemo, 2000);
}
/*removes the attributes when you click the button again*/
function clearDemo(button) {
square.style.backgroundColor = "transparent";
clickMe.removeAttribute("disabled");
}
window.addEventListener("load", function() {
square = document.getElementById("square")
clickMe = document.getElementById('clickMe');
clickMe.addEventListener("click", doDemo);
});
/* color for webpage*/
html {
background: silver;
}
/* setting for heading 1 */
h1 {
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2 {
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro {
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime {
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square {
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="script.js"></script>
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for
2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones
you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not
tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
https://www.artofdrink.com/soda/history-of-the-milkshake</p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width="400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
</body>
</html>
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 am writing a civil war journal for my 8th grade Social Studies class and I am presenting it as an HTML file that had the title of each journal and the date. When I click in each entry, it is supposed to open the actual journal entry and close any other open ones. I am having a problem with making the journal entries open up once you click on the journal. Here's my code. (P.S. All of the journal entries aren't finished yet.)
EDIT: Code is working in JSFiddle, but not in the browser.
HTML
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='journal.css'/>
<title>Pericby Zarby Journal</title>
</head>
<body>
<div id='container'>
<div class='entry current'>
<div class='item row'>
<div class="col-xs-3">
<p class='date'>July 22, 1861</p>
</div>
<div class='col-xs-6'>
<p class='title'>The Battle of Bull Run</p>
</div>
</div>
<div class='description row'>
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<p>As I step through the door of the steel mill, I overhear the conversation that my boss and one of my co-workers are having.
I hear something about a battle and the start of a civil war. I walk by and suddenly my friend Joe runs up to me and says, 'Did ya hear?'
I give him a funny look that shows how confused I am. He proceeds to tell me about the Battle of Bull Run.
He says that a small skirmish between the Union and Confederate armies happened in Virginia. He also says that the Union lost.
That last part really surprises me. The North is supposed to have a lot more men than the South and should have destroyed the South.
Hopefully the rest of the war does not go like this.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>December 15, 1862</p>
</div>
<div class='col-xs-6'>
<p class='title'>Fredericksburg</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>While I am drinking and talking with some of the other blacks in the 86th regiment, I spot a small man running up to Colonel Smith
and telling him that General Burnside needs reinforcements. Smith shouts for everyone to get into formation and begin marching towards
Fredericksburg. After about an hour of marching I am finally able to see a battlefield, but it does not look pretty.
A group of Union soldiers is charging towards a Confederate barricade. One by one, each soldier is getting killed.
No progress is made by the soldiers. My regiment begins to line up in formation for another charge. As Burnside begins to realize that the
charge before is proving futile he barks a command to retreat. My regiment marches in an orderly fashion back to the nearest Union camp.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>January 2, 1863</p>
</div>
<div class='col-xs-6'>
<p class='title'>Emancipation Proclamation</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>It’s official. Lincoln has released the Emancipation Proclamation. Slaves from states in rebellion are now free.
Southern plantations won’t let that happen though. No slaves are going to be freed, yet. The best thing about the Emancipation Proclamation
is that now slaves have something to fight for. They will begin to help win this war, in big and small ways.
Also, France and Great Britain can’t help the South anymore because they are slave-free countries.
Lincoln may have just given the Union the boost they need to win this civil war. I know it has given me hope.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="journal.js"></script>
</body>
</html>
CSS
body {
position: fixed;
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
#container {
height: 700px;
width: 600px;
border-right: 3px black solid;
border-left: 3px black solid;
border-bottom: 3px black solid;
position: fixed;
margin: 10px auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.row {
margin: 0;
}
.current .item{
background-color: rgba(112,112,112,0.7);
}
.entry {
background-color: rgba(216, 209, 209, 0.7);
border-top: 3px solid black;
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 18px;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.item .date {
margin-left: 20px;
font-weight: bold;
font-style: italic;
}
.item .title {
font-weight: bold;
font-size: 20px;
text-align: center;
}
Javascript
var main = function() {
$('.entry').click(function() {
$('.entry').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
}
$(document).ready(main);
If you're working locally, you may need to change this line:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Stuck on a homework problem. This is what the web page is supposed to look like:
http://www.acsu.buffalo.edu/~amnero/lincoln.htm
I'm only on chapter 4 of my HTML and CSS book. I'm learning basics of CSS so this assignment is heavily based on CSS. The HTML file had already came with this tutorial. I've spent good hours of my day seeing what I missed or didn't miss. Can some please take a look at my code and let me know what I'm doing wrong? Can you PLEASE help as my professor never responds.
Style Sheet:
/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 1
History Style Sheet
Author: Mohammad Raza Hussain
Date: September 16th, 2013
Filename: history.css
Supporting Files:
*/
/* Display HTML5 structural elements as blocks */
header, section, nav {
display: blocks;
}
/* Styles for the Page Body */
body {
margin: 0px;
padding: 0px;
background-color: rgb(51, 51, 51);
}
/* Styles for the Page Header */
header {
background-color: rgb(51, 51, 51);
text-align: center;
width: 55em;
height: 4em;
}
/* Navigation lists */
nav {
float: left;
width: 15em;
background-color: rgb(51, 51, 51);
}
nav a {
text-decoration: none;
}
nav.vertical li {
font-family: CenturyGothic, sans-serif;
font-size: 0.7em;
list-style-type: none;
line-height: 1.4em;
margin-left: 1em;
margin-bottom: 1.2em;
}
nav.vertical li a {
color: rgb(212, 212, 212);
}
nav.vertical li a:hover {
color: white;
}
/* Speech */
#speech {
background-color: rgb(212, 212, 212);
width: 40em;
float: left;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
#speech h1 {
background-color: rgb(51, 51, 51);
color: rgb(212, 212, 212);
font-size: 2em;
text-align: center;
}
#speech p {
font-size: 0.9em;
margin: 1em;
}
#speech p:first-of-type:first-letter {
float: left;
font-size: 4em;
line-height: 0.8em;
margin-right: 0.3em;
padding-right: 0.2em;
padding-bottom: 0.2em;
border-right: 0.02em solid;
border-bottom: 0.02em solid;
}
#speech p:first-of-type:first-line {
text-transform: uppercase;
}
#speech img {
clear: right;
float: right;
height: 4em;
}
HTML file in case you need it:
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 1
Lincoln Speech
Author: Mohammad Raza Hussain
Date: September 16th, 2013
Filename: lincoln.htm
Supporting files: arlogo.png, history.css,
lincoln01.png - lincoln10.png,
modernizr-1.5.js
-->
<meta charset="UTF-8" />
<title>Lincoln's Second Inaugural Address</title>
<script src="modernizr-1.5.js"></script>
<link href="history.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header><img src="arlogo.png" alt="American Rhetoric" /></header>
<nav class="vertical">
<ul>
<li>Give Me Liberty or Give Me Death <br /> Patrick Henry</li>
<li>Ain't I a Woman? <br /> Sojourner Truth</li>
<li>A House Divided <br /> Abraham Lincoln</li>
<li>The Gettysburg Address <br /> Abraham Lincoln</li>
<li>The Second Inaugural <br /> Abraham Lincoln</li>
<li>Cross of Gold <br /> William Jennings Bryan</li>
<li>The Man in the Arena <br /> Theodore Roosevelt</li>
<li>The Only Thing We Have to Fear <br /> Franklin Roosevelt</li>
<li>A Date Which Will Live in Infamy <br /> Franklin Roosevelt</li>
<li>Old Soldiers Never Die <br /> Douglas MacArthur</li>
<li>Inaugural Address <br /> John Kennedy</li>
<li>Ich Bin Ein Berliner <br /> John Kennedy</li>
<li>The Ballot or the Bullet <br /> Malcolm X</li>
<li>I Have a Dream <br /> Martin Luther King, Jr.</li>
<li>A Time for Choosing <br /> Ronald Reagan</li>
<li>Tear Down this Wall <br /> Ronald Reagan</li>
</ul>
</nav>
<section id="speech">
<h1>Lincoln's Second Inaugural</h1>
<p>The Almighty has his own purposes. "Woe unto the world because of offenses! For
<img src="lincoln01.png" alt="" />
<img src="lincoln02.png" alt="" />
<img src="lincoln03.png" alt="" />
<img src="lincoln04.png" alt="" />
<img src="lincoln05.png" alt="" />
<img src="lincoln06.png" alt="" />
<img src="lincoln07.png" alt="" />
<img src="lincoln08.png" alt="" />
<img src="lincoln09.png" alt="" />
<img src="lincoln10.png" alt="" />
it must needs be that offenses come; but woe to that man by whom the offense
cometh." If we shall suppose that American slavery is one of those offenses which,
in the providence of God, must needs come, but which, having continued through his
appointed time, he now wills to remove, and that he gives to both North and South
this terrible war, as the woe due to those by whom the offense came, shall we discern
therein any departure from those divine attributes which the believers in a living
God always ascribe to him?
</p>
<p>Fondly do we hope — fervently do we pray — that this
mighty scourge of war may speedily pass away. Yet, if God wills that it continue
until all the wealth piled by the bondsman's two hundred and fifty years of unrequited
toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by
another drawn with the sword, as was said three thousand years ago, so still it must
be said, "The judgments of the Lord are true and righteous altogether."
</p>
<p>With malice toward none; with charity for all; with firmness in the right, as God
gives us to see the right, let us strive on to finish the work we are in; to bind up
the nation's wounds; to care for him who shall have borne the battle, and for his
widow, and his orphan — to do all which may achieve and cherish a just and lasting peace
among ourselves, and with all nations.
</p>
</section>
</body>
</html>
Try this one
nav.vertical li {
font-family: CenturyGothic, sans-serif;
font-size: 0.7em;
list-style-type: none;
line-height: 1.4em;
margin-left: 1em;
margin-bottom: 1.2em;
display: inline-block;
}
I don't really understand what the problem is. The only thing I can think of is when page is to narrow, #sections falls under #vertical element. In this case, add min-width to body element:
body {
/* other styles here */
min-width: 55em;
}
Here is the questions!! I followed it to the tee and can't find out where the mistake is.
http://books.google.com/books?id=Xe8JAAAAQBAJ&pg=PA307&lpg=PA307&dq=tutorial+4+lincoln+css&source#v