Okay. First of all, it may seem like my question has been asked once before. But I looked into so many stackoverflow questions and answers and non of them were what I were looking for, or they didn't work, or they answered specifically to the code of the one who asked and it doesn't work for my code.
So what I want to know how to make is a script that adds a class named "active" to the "a" element in the navBar that corresponds with where you are on the page. Say you are viewing the div with the id of "Poem1" the Poem1 section in the navBar becomes Highlighted (due to styling of the class active in css) and in the url bar the end of the link changes so that the id is at the end. to further explain this here's an example: htps://What Ever.html#Poem1. Notice how it says the id at the end of the url, I want that end id to change depending on which div the user is viewing on the website.
Also just a side note: I made a nav bar that slides to the left when the "≡" is clicked and then disappears when the "×" is clicked on.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script src="Unit11.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
<script src="http://ift.tt/1XwG72U"></script>
<script src="http://ift.tt/1Rv6w94"></script>
<script src="http://ift.tt/2eBd7UN"></script>
<link rel="stylesheet" href="Unit11.css" type="text/css"/>
<link rel="icon" href="logo.ico" type="image/x-icon">
<title> Unit 11 - Poetry Creative Interpretation (Evaluation) </title>
</head>
<body onload="welcome()">
<span id="navBar" class="navBar">
<ul class="nav" id="nav">
<li> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> </li>
<li> <a href="#Intro" id="start"> Intro </a> </li>
<li> <a href="#Poem1" id="tab"> Poem#1 </a> </li>
<li> <a href="#Poem2" id="tab2"> Poem#2 </a> </li>
<li> <a href="#Comparision" id="compare"> Comparision </a> </li>
<li> <a href="#About" id="info"> About </a> </li>
</ul>
</span>
<span onclick="openNav()" id="open">≡</span>
<div id="Intro" class="Content">
<h1 class="special"> Intro </h1>
<hr/>
<p>
Both of the poems we will be discussing are written by Robert Lee Frost. "Nothing Gold can Stay" </br> <img src="Frost.jpg" alt="Robert Frost" id="image3">
was written for a book called "The Outsiders" by S. E. Hinton. Robert Frost was an American poet, </br>
but his work was initially published in England before it was published in America. He had a very </br>
successful poetry career, he was awarded four Pulitzer Prizes for Poetry, the Congressional Gold Medal </br>
in 1960, and he was named Poet Laureate of Vermont the year after. It may seem like Robert Frost's life </br>
was full of joy, but that's definitely not the case. There was actually a devastating dark side to </br>
Robert Frost's life. Robert Frost was born to an alcoholic father who died of tuberculosis when Frost </br>
was 11 and to a depressed mother. His sister was put into a mental hospital and so was his daughter Irma. </br>
His son Carol committed suicide. His daughter Elinor died during days after her birth and his daughter </br>
Marjorie died while giving birth. His son Elliot died of cholera. Out of his 6 children only Lesley was </br>
completely fine, she and Irma outlived their father. </br>
</p>
</div>
<div id="Poem1" class="Content">
<h1> Poem 1 </h1>
<hr/>
<article>
<h2> The Road Not Taken </h2>
<p>
Two roads diverged in a yellow wood, <br/> <img src="TRNTimagery.jpg" alt="Poem Imagery" id="image2">
And sorry I could not travel both <br/>
And be one traveler, long I stood <br/>
And looked down one as far as I could <br/>
To where it bent in the undergrowth; <br/>
<br/>
Then took the other, as just as fair, <br/>
And having perhaps the better claim, <br/>
Because it was grassy and <mark class="pers" title="Personification"> wanted</mark> wear; <br/>
Though as for that the passing there <br/>
Had worn them really about the same, <br/>
<br/>
And both that morning equally lay <br/>
In leaves no step had trodden black. <br/>
Oh, I kept the first for another day! <br/>
Yet knowing how <mark class="rep" title="Repitition"> way</mark> leads on to <mark class="rep" title="Repitition"> way</mark>, <br/>
I doubted if I should ever come back. <br/>
<br/>
I shall be telling this with a sigh <br/>
Somewhere <mark class="rep" title="Repitition"> ages</mark> and <mark class="rep" title="Repitition"> ages</mark> hence: <br/>
Two roads diverged in a wood, and I— <br/>
I took the one less traveled by, <br/>
And that has made all the difference. <br/>
</p>
</article>
<aside>
By Robert Frost, 1874 - 1963 <br/>
Written in 1916
</aside>
</div>
<div id="Poem2" class="Content">
<h1> Poem 2 </h1>
<hr/>
<article>
<h2> Nothing Gold Can Stay </h2>
<p>
Nature’s first green is gold, <br/> <img src="NGCSimagery.jpg" alt="Poem Imagery" id="image">
<br/>
<mark class="pers" title="Personification"> Her</mark><mark class="alit" title="Alliteration"> hardest hue to hold.</mark> <br/>
<br/>
<mark class="pers" title="Personification"> Her</mark> early leaf’s a flower; <br/>
<br/>
But only so an hour. <br/>
<br/>
Then <mark class="rep" title="Repitition"> leaf</mark> subsides to <mark class="rep" title="Repitition"> leaf.</mark> <br/>
<br/>
<mark class="alus" title="Allusion"> So Eden sank to grief,</mark> <br/>
<br/>
So <mark class="con" title="Contrast"> dawn</mark> goes down to <mark class="con" title="Contrast"> day.</mark> <br/>
<br/>
Nothing gold can stay. <br/>
</p>
</article>
<aside>
By Robert Frost, 1874 - 1963 <br/>
Written in 1923
</aside>
</div>
<div id="Comparision" class="Content">
<h1> Comparitive Poem Reflection </h1>
<hr/>
<article>
<p>
Both of the poems are written by Robert Frost and therefore share many of the same themes and literary devices. Most notably, they share a theme of Man and Nature. For example in “The Road Not Taken” nature is used as a metaphor for the speaker's life. In the poem Frost compares making major decisions to encountering two different paths while lost in a forest. Meanwhile, in “Nothing Gold Can Stay” nature is used as a metaphor for the speaker's perception of life. Gold is a metaphor for innocence and youth, green is a metaphor for life at its fullest just like when the tree’s leaves become green during spring time, and nature is a metaphor for life. This theme of Man and the Natural World is a very reoccurring trend in Frost's poems. Metaphor is not the only literary device both poems utilize, they also both utilize personification and repetition. In “Nothing Gold Can Stay” personification is used when Frost refers to nature as a “Her” e.g. “Her hardest hue to hold / Her early leaf’s a flower” (Frost 2-3). In “The Road Not Taken” personification is used when Frost implies that the road has desires (just as we humans do) i.e. “Because it was grassy and wanted wear” (Frost 8). Repetition is also used in both poems; “Then leaf subsides to leaf” (“Nothing Gold Can Stay” 5), “leaf” is being repeated. “Somewhere ages and ages hence” (“The Road Not Taken” 17), “ages” is being repeated. However, both poems do not share the same style or structure. For instance “The Road Not Taken” is much longer (but still an average sized poem), consisting of four stanzas with five lines each (or four quintains). The rhyme scheme for “The Road Not Taken” is ABAAB. This is much different from “Nothing Gold Can stay” which has an AABBCCDD rhyme scheme. Also, “Nothing Gold Can Stay” is a relatively short poem and it really only has one stanza.
</p>
</article>
</div>
<div id="About" class="Content">
<h1> About </h1>
<hr/>
<p> Made By: Zaid Alnemer </br>
Contact me at: zalnemer2287@hwdsb.on.ca </br>
<aside id="disclaimer">
*Not made using wix.com or other online tools that help make a website for you* </br>
*Made completely from scratch using a text editor (Notepad++ etc.)*
</aside>
</p>
</div>
<script>
</script>
</body>
</html>
Here's the css:
body {
background: #c5d8e2;
padding: 0;
margin: 0;
}
div {
margin-left: 5.5%;
transition: margin-left .5s;
padding: 20px;
}
h1 {
padding-top: 10px;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 0;
font-size: 35px;
}
h2 {
font-size: 25px;
}
h1.special {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
p {
font-size: 21px;
}
aside {
font-size: 18px;
}
#image {
position: relative;
float: right;
top: -50px;
}
#image2 {
position: relative;
float: right;
top: -50px;
height: 360px;
width: 700px;
}
#image3 {
position: relative;
float: right;
top: -20px;
height: 318px;
width: 242px;
}
#open {
height: 100%;
padding: 1.5%;
font-size: 80px;
color: orange;
background-color: #f1f1f1;
display: block;
position: fixed;
}
#disclaimer {
font-weight: bold;
font-size: 20px;
}
.alit {
background-color: #FFFF00;
}
.con {
background-color: #0000FF;
}
.rep {
background-color: #00FF00;
}
.alus {
background-color: #FF0000;
}
.pers {
background-color: #FF6000
}
.navBar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #555; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
}
And Here's the javascript:
function welcome() {
viewer = prompt('What is your name?') if (viewer != "") { alert('Welcome ' + viewer) } else { alert('Please enter a name next time!') } } /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */ function openNav() { document.getElementById("navBar").style.width = "15%"; document.getElementById("Intro").style.marginLeft = "15%"; document.getElementById("Poem1").style.marginLeft = "15%"; document.getElementById("Poem2").style.marginLeft = "15%"; document.getElementById("Comparision").style.marginLeft = "15%"; document.getElementById("About").style.marginLeft = "15%"; } /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */ function closeNav() { document.getElementById("navBar").style.width = "0"; document.getElementById("Intro").style.marginLeft = "5.5%"; document.getElementById("Poem1").style.marginLeft = "5.5%"; document.getElementById("Poem2").style.marginLeft = "5.5%"; document.getElementById("Comparision").style.marginLeft = "5.5%"; document.getElementById("About").style.marginLeft = "5.5%"; } var XFoo = document.registerElement('r-s'); document.body.appendChild(new XFoo());
Aucun commentaire:
Enregistrer un commentaire