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>
Related
I have a header element that I want to be sticky and appear in front of my article. I have tried changing the z-index but I cannot seem to get it to work.
Does z-index not work at all when I have certain elements floating? Or is there a way to make it work?
Any help would be appreciated. Thanks
h1,
h2,
h3,
h4 {
margin: inherit;
}
.top {
position: sticky;
background-color: grey;
margin: 0em;
z-index: 1000;
float: none;
}
.header {
top: 0em;
}
.navigation {
top: 2em;
}
.aside {
width: 25%;
height: 100%;
float: right;
background-color: darkgrey;
clear: right;
}
.section {
width: 75%;
height: 100%;
float: left;
/*background-color: lightgrey;*/
}
.hidden_link {
color: inherit;
text-decoration: none;
}
* {
z-index: -1;
}
<body>
<main>
<header class="header top">
<h1>
Toyota JZ Engine
</h1>
</header>
<nav class="navigation top">
<a>link</a>
</nav>
<article>
<aside class="aside">
<p><a class="hidden_link" title="Multi-valve" href="https://en.wikipedia.org/wiki/Multi-valve">24 Valves</a> means that there are 4 valves per cylinder</p>
<p><a class="hidden_link" title="DOHC" href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)">DOHC</a> means that there are 2 Camshafts per bank of the sylinder head, 1 for intake and 1 for exhaust</p>
<p>Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox sends all power to the rear wheels</p>
</aside>
<section class="section">
<h2>Introduction</h2>
<hr>
<p>The Toyota JZ engine family is a series of inline-6 automobile engines, which are designed as a replacement for the M-series inline-6 engines. The family features 2.5- and 3.0-litre versions; all are 24-valve DOHC engines.</p>
</section>
<section class="section">
<h3>1JZ</h3>
<hr>
<p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
<h4>1JZ-GE</h4>
<p>This is another common engine version which has a 10:1 compression ratio. The early 1JZ-GE, like all JZ engines, is desigined for longitudnal mounting and RWD. All such models offered only a 4-speed automatic transmission.</p>
<h4>1JZ-GTE</h4>
<p>The 1JZ also features a twin-turbocharged version, known as the 1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A turbochargers which sit parrallel and blow through a side or front mount intercooler. It has an 8:5:1 static compression
ratio. Early generation 1JZ-GTEs combined the inherent smoothness of an inline 6 with the revving capacity of its short stroke and early power delivery of its turbochargers.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg" title="1JZ-GTE">
<figcaption>1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg" title="1JZ-GTE">
<figcaption>Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83 Toyota Cressida</figcaption>
</figure>
<h4>1JZ-FSE</h4>
<p>1JZ-FSE is likely the least known engine of the JZ family. Their goal is to acheive minimal emissions and fuel consumption with no performance loss. It employs the same block as the conventional 1JZ-GE but the cylinder head has a relatively narrow
angle with swirl conrol valves. Fuel consumpton is reduced by about 20%.</p>
<h3>2JZ</h3>
<hr>
<p>The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is not merely a stroked version of the 1JZ, but it has longer connectiong rods and a taller block deck.</p>
<h4>2JZ-GE</h4>
<p>The 2JZ-GE is a common version with Sequential Electronic Fuel Injection, an auminium head, and 4 valves per cylinder, in addition to a cast-iron cylinder block.</p>
<h4>2JZ-GTE</h4>
</section>
</article>
<footer>
</footer>
</main>
</body>
You have a couple things 1 that could be a mistake and another about floating element and block formatting context.
header, main and footer here are supposed to be two siblings (even that you can have headers and footers inside main)
floating element overflow their containers, You need to create a block formatting context (see the link below)
A possible fixed is : extract header and footer from main (nav can be sent to header or remain there).
Then reset the block formatting context(BFC) of main via overflow:hidden, or display:grid, or whatever you find more appropriate after reading : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
h1,
h2,
h3,
h4 {
margin: inherit;
}
main {
overflow: hidden;/* wraps around and aside floats see BFC*/
}
.top {
position: sticky;
background-color: grey;
margin: 0em;
z-index: 1000;
float: none;
}
.header {
top: 0em;
}
.navigation {
top: 2em;
}
.aside {
width: 25%;
height: 100%;
float: right;
background-color: darkgrey;
clear: right;
}
.section {
width: 75%;
height: 100%;
float: left;
/*background-color: lightgrey;*/
}
.hidden_link {
color: inherit;
text-decoration: none;
}
/* * {
z-index: -1;
}*/
<body>
<header class="header top">
<h1>
Toyota JZ Engine
</h1>
</header>
<nav class="navigation top">
<a>link</a>
</nav>
<main>
<article>
<aside class="aside">
<p><a class="hidden_link" title="Multi-valve" href="https://en.wikipedia.org/wiki/Multi-valve">24 Valves</a> means that there are 4 valves per cylinder</p>
<p><a class="hidden_link" title="DOHC" href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)">DOHC</a> means that there are 2 Camshafts per bank of the sylinder head, 1 for intake and 1 for exhaust</p>
<p>Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox sends all power to the rear wheels</p>
</aside>
<section class="section">
<h2>Introduction</h2>
<hr>
<p>The Toyota JZ engine family is a series of inline-6 automobile engines, which are designed as a replacement for the M-series inline-6 engines. The family features 2.5- and 3.0-litre versions; all are 24-valve DOHC engines.</p>
</section>
<section class="section">
<h3>1JZ</h3>
<hr>
<p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
<h4>1JZ-GE</h4>
<p>This is another common engine version which has a 10:1 compression ratio. The early 1JZ-GE, like all JZ engines, is desigined for longitudnal mounting and RWD. All such models offered only a 4-speed automatic transmission.</p>
<h4>1JZ-GTE</h4>
<p>The 1JZ also features a twin-turbocharged version, known as the 1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A turbochargers which sit parrallel and blow through a side or front mount intercooler. It has an 8:5:1 static compression
ratio. Early generation 1JZ-GTEs combined the inherent smoothness of an inline 6 with the revving capacity of its short stroke and early power delivery of its turbochargers.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg" title="1JZ-GTE">
<figcaption>1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg" title="1JZ-GTE">
<figcaption>Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83 Toyota Cressida</figcaption>
</figure>
<h4>1JZ-FSE</h4>
<p>1JZ-FSE is likely the least known engine of the JZ family. Their goal is to acheive minimal emissions and fuel consumption with no performance loss. It employs the same block as the conventional 1JZ-GE but the cylinder head has a relatively narrow
angle with swirl conrol valves. Fuel consumpton is reduced by about 20%.</p>
<h3>2JZ</h3>
<hr>
<p>The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is not merely a stroked version of the 1JZ, but it has longer connectiong rods and a taller block deck.</p>
<h4>2JZ-GE</h4>
<p>The 2JZ-GE is a common version with Sequential Electronic Fuel Injection, an auminium head, and 4 valves per cylinder, in addition to a cast-iron cylinder block.</p>
<h4>2JZ-GTE</h4>
</section>
</article>
</main>
<footer>
footer
</footer>
</body>
For other tip, now-days flex or grid are used to build layouts and it is much easier and much more powerful (no side effects ), float can be used for what it was made at first (it was not entire layouts) here an example with a sticky header, nav and footer https://jsfiddle.net/6r1o0sug/
When creating a navbar, use position fixed, and include all elements inside a div:
<body>
<main>
<!-- Included the header and navigation in one div -->
<div class="navbar">
<header class="header">
<h1>Toyota JZ Engine</h1>
</header>
<nav class="navigation">
<a>link</a>
</nav>
</div>
<article>
<aside class="aside">
<p>
<a
class="hidden_link"
title="Multi-valve"
href="https://en.wikipedia.org/wiki/Multi-valve"
>24 Valves</a
>
means that there are 4 valves per cylinder
</p>
<p>
<a
class="hidden_link"
title="DOHC"
href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)"
>DOHC</a
>
means that there are 2 Camshafts per bank of the sylinder head, 1
for intake and 1 for exhaust
</p>
<p>
Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox
sends all power to the rear wheels
</p>
</aside>
<section class="section">
<h2>Introduction</h2>
<hr />
<p>
The Toyota JZ engine family is a series of inline-6 automobile
engines, which are designed as a replacement for the M-series
inline-6 engines. The family features 2.5- and 3.0-litre versions;
all are 24-valve DOHC engines.
</p>
</section>
<section class="section">
<h3>1JZ</h3>
<hr />
<p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
<h4>1JZ-GE</h4>
<p>
This is another common engine version which has a 10:1 compression
ratio. The early 1JZ-GE, like all JZ engines, is desigined for
longitudnal mounting and RWD. All such models offered only a 4-speed
automatic transmission.
</p>
<h4>1JZ-GTE</h4>
<p>
The 1JZ also features a twin-turbocharged version, known as the
1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A
turbochargers which sit parrallel and blow through a side or front
mount intercooler. It has an 8:5:1 static compression ratio. Early
generation 1JZ-GTEs combined the inherent smoothness of an inline 6
with the revving capacity of its short stroke and early power
delivery of its turbochargers.
</p>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg"
title="1JZ-GTE"
/>
<figcaption>
1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo
</figcaption>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg"
title="1JZ-GTE"
/>
<figcaption>
Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83
Toyota Cressida
</figcaption>
</figure>
<h4>1JZ-FSE</h4>
<p>
1JZ-FSE is likely the least known engine of the JZ family. Their
goal is to acheive minimal emissions and fuel consumption with no
performance loss. It employs the same block as the conventional
1JZ-GE but the cylinder head has a relatively narrow angle with
swirl conrol valves. Fuel consumpton is reduced by about 20%.
</p>
<h3>2JZ</h3>
<hr />
<p>
The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is
not merely a stroked version of the 1JZ, but it has longer
connectiong rods and a taller block deck.
</p>
<h4>2JZ-GE</h4>
<p>
The 2JZ-GE is a common version with Sequential Electronic Fuel
Injection, an auminium head, and 4 valves per cylinder, in addition
to a cast-iron cylinder block.
</p>
<h4>2JZ-GTE</h4>
</section>
</article>
<footer></footer>
</main>
</body>
As you can see, I included all elements inside the top bar in a single div.
Css:
body {
margin: 0;
}
h1,
h2,
h3,
h4 {
margin: inherit;
}
.navbar {
/* Use position fixed, and z-index, set width to max*/
position: fixed;
z-index: 2;
width: 100%;
margin: 0;
background-color: grey;
float: none;
}
article {
/* Add padding to content so that the navbar doesn't overlap */
padding-top: 3.45rem;
}
.aside {
width: 25%;
height: 100%;
float: right;
background-color: darkgrey;
clear: right;
}
.section {
width: 75%;
height: 100%;
float: left;
/*background-color: lightgrey;*/
}
.hidden_link {
color: inherit;
text-decoration: none;
}
Also, I set the body margin to 0 so that everything fits perfectly.
I have a page with three on-page links that should all smoothly animate scrolling to the anchor link, but only the first link scrolls smoothly. Incidentally, the first link is the only link "above" the anchored link. The other two links, which ignore the smooth scrolling script, are located above the link and first scroll to the top of the page before snapping to the anchored link. How can I configure it so that the links beneath the anchored link scroll up smoothly to the anchored link, without scrolling to the top first?
Here's what I have:
const links = document.querySelectorAll(".cta-btn a");
for (const link of links) {
link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
e.preventDefault();
const href = this.getAttribute("href");
const offsetTop = document.querySelector(href).offsetTop;
$("input[id$='input']").focus();
$(".guitar-service-address>span.placeholder-location").hide();
scroll({
top: offsetTop,
behavior: "smooth"
});
}
$('#input').on("focus", function() {
$(".guitar-service-address>span.placeholder-location").hide();
});
$(function() {
$("span.placeholder-location + input").keyup(function() {
if ($(this).val().length) {
$(this).prev('span.placeholder-location').hide();
} else {
$(this).prev('span.placeholder-location').show();
}
});
$("span.placeholder-location").click(function() {
$(this).next().focus();
});
});
if ($(window).width() < 768) {
$(".placeholder-above").append($(".placeholder-float").text());
}
.container {
max-width: 990px;
}
.tab-placeholder {
display: none;
}
input[id="input"] {
width: 500px;
}
.guitar-service-address>span.placeholder-location {
position: absolute;
margin: 6px 8px;
color: #686e74;
cursor: auto;
font: Helvetica 15px/20px bold;
font-weight: bold;
z-index: 1;
}
.guitar-service-address>.placeholder-location>.font-alt {
color: #686e74;
font-weight: normal;
}
input {
padding: 5px;
font-size: 11pt;
color: black;
border: 1px solid #979797;
border-bottom: 4px solid #000;
}
.help-block {
font-size: 90%;
}
.test {
padding: 20px;
}
.section {
padding: 150px 20px;
}
#head {
background-color: #ddd;
padding: 10px 20px;
}
#ckav {
background-color: #d4d4d4;
}
#cta {
background-color: #fdfd4d;
}
#media (max-width: 768px) {
input[id="input"] {
width: 300px;
}
span>.placeholder-float {
display: none;
}
.tab-placeholder {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section" id="head">
<div class="container">
<h2>CTA</h2>
<div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
<section class="section" id="ckav">
<div class="container test">
<div class="row">
<div class="col-sm-12">
<div class="placeholder-above"></div>
<div class="guitar-service-address">
<span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
<input id="input" type="text" />
</div>
<p class="help-block">What is this?</p>
</div>
</div>
</div>
</section>
<section class="section" id="stuff">
<div class="container">
<h2>Stuff</h2>
<div>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media
information without cross-media value.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
<section class="section" id="cta">
<div class="container">
<h2>CTA</h2>
<div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
Here's a fiddle: http://jsfiddle.net/Codewalker/6or8pwjx/
Just add this to the CSS. you don't even need Javascript/Jquery.
* {
scroll-behavior: smooth;
}
👉 Check it in action on Jsfiddle
First post for me there, I'll start by thanking this awesome community for the help I've found for years now.
I've handled multiple pieces of javascript code without getting an overview of the language, sorry for that. My question is I guess basic but this time I don't find the answer by myself..
I have those two div on the homepage of my site
.MainTitle {
position: relative;
margin: auto;
margin-top:200px;
padding:0;
width:50%;
font-size: 100px;
font-weight:300;
color: #2f3542;
text-align:center;
}
.SubTitle {
position: relative;
margin: auto;
padding:0;
width:50%;
font-size: 50px;
font-weight:300;
color: lightgrey;
text-align:center;
}
.country {
position: relative;
margin: auto;
padding:0;
width:50%;
font-size: 50px;
font-weight:300;
color: lightgrey;
text-align:center;
}
<div class="MainTitle">
HERE MAIN TITLE
</div>
<div class="SubTitle">
<span class="country">FR</span>
<span> | </span>
<span class="country"><a href="fr/pages/about.php">EN</span>
</div>
What I'm trying to do is to :
1. Fade-in the Maintitle with a timing and an opacity that I can set ;
2. Also fade-in the Subtitle with timing/opacity but once the Maintitle has been has showed up
I want those two action to be automatically triggered once the page is loaded. Maybe timing before Maintitle fadein and between Maintitle and Subtitle fade-in can be useful.
Thanks a lot if someone can help me on that !
Hugo
<html>
<head>
<style>
div {
display:none;
}
</style>
<body>
<div class="MainTitle">
HERE MAIN TITLE
</div>
<div class="SubTitle">
<span class="country">FR</span>
<span> | </span>
<span class="country"><a href="fr/pages/about.php">EN</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function(){
$(document).ready(function() {
$('.MainTitle, .SubTitle').each(function(fadeInDiv){
$(this).delay(fadeInDiv * 500).fadeIn(1000);
});
});
});
</script>
</body></html>
I've created a page (http://www.nextsteptutoring.co.uk/WhatWeTeach.html) with 4 selectable h3 elements that bring up further text on the topic for the user to read.
The 1st element works perfectly - the whole element is selectable. The 2nd and 3rd are partially selectable, the + and first letter can be clicked. The 4th can't be clicked at all.
The JS works fine and my CSS would seem to be fine as displayed by the 1st working fine, and the 2nd and 3rd being partially ok. I can't see how this could be a z-inex as the only element on the page with a z-index value is the footer, which loads fine as well.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="Main.CSS">
<title>NST | What We Teach</title>
</head>
<body>
<div class="container">
<header> </header>
<div class="leftcolumn">
<h2>What We Teach</h2>
<p> Clear schemes of work, linked to the National Curriculum, which
are individually tailored to your child’s needs. We offer one to one
sessions, or small groups, with a maximum of 4 children. Groups are
based on specific needs/ability, rather than on chronological age.<br/>
<br/>
Programmes of study are adapted for high achievers in need of a
challenge, as well as those who lack confidence or require additional
support, outside of mainstream education.<br/>
</p>
</div>
<div class="rightcolumn">
<div class="hide">
<h3>+ Primary Maths</h3>
<ul>
<li>The four rules of number</li>
<li>Focus on Mental Arithmetic</li>
<li>Multiplication and associated division facts</li>
<li>Fractions, decimals and percentages</li>
<li>Data Handling, measures, and shapes</li>
<li>Algebra</li>
<li>Using and applying mathematical skills in everyday problem
solving</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Primary English</h3>
<ul>
<li>Clear focus on comprehension. Building skills of inference and
reasoning</li>
<li>Individually tailored spelling programme (specialised dyslexia
spelling programme)</li>
<li>Grammar and punctuation</li>
<li>Writing for different purposes and audiences</li>
<li>Handwriting</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Year 6 to Year 7 Transition</h3>
<p>Tailored English and Maths programme to support youngsters who
lack confidence during their transition from Primary to Secondary
education.</p>
</div>
<div class="hide">
<h3>+ Written Reports</h3>
<p>Parents may wish to receive a termly or yearly written report on
their child’s progress, and targets for the next phase of their
learning. This service will incur a fee of ÂŁ10.</p>
</div>
</div>
<footer> </footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("header").load("Header.txt");
});
$(document).ready(function(){
$("footer").load("Footer.txt");
});
$(".hide > h3").click(function(){
$(this).parent().toggleClass("show");
});
$(".show > h3").click(function(){
$(this).parent().toggleClass("hide");
});
</script>
</body>
</html>
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: rgba(150,150,150,1);
color: white;
text-align: center;
z-index: 5;
}
footer .container div {
display: inline-block;
padding: 5px 30px 2px 30px;
}
#contact {
background: rgba(120,117,185,1);
float: right;
padding: 5px 100px 2px 100px;
}
.hide h3 {
width: 100%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
padding: 2px 0 2px 8px;
}
.hide p, .hide ul {
opacity: 0;
height: 0;
}
.show {
height: auto;
}
.show p, .show ul {
opacity: 1;
list-style-type: square;
height: auto;
font-size: 18px;
}
Any ideas would be greatly appreciated!!
The problem is css.
Add this:
.hide p, .hide ul {
opacity: 0;
height: 0;
overflow: hidden;
}
The li elements were overlapping the buttons. So give overflow: hidden to the ul and they get hidden properly without affecting the rest.
CSS
.hide h3 {
padding: 2px 0 2px 10px;
width: 97%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
position: relative;
}
Add position:relative CSS property to your .hide h3 it will work fine.
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>