Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aurelian Spodarec
10,801 PointsSome JS effect
HI,
I need to make passing class. Well, you have a parallax website, and you have active on home section. If you scroll and you're on about section, the navigation li will now have the class active, if you scroll feather down to contact section, the navigation li will have no active class.
I need to select the nav li a href. Then i need to check if the id is touching the top of the winow, and if theres specific ID, i need to swap the nav class to active. Something like that?
<header class="main-header">
<a href="" id="logo">
<h1>THE GALAXY</h1>
</a>
<div class="mobile-menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<nav>
<ul>
<li class="active"><a href="#home">Home</a></li>
<li><a href="#moon">Moon</a></li>
<li><a href="#galaxies">Galaxies</a></li>
<li><a href="#uranus">Uranus</a></li>
<li><a href="#the-earth">The Eath</a></li>
<li><a href="#solar-system">Solar System</a></li>
</ul>
</nav>
the way i put the id:
<section class="third-content group">
<div id="uranus" class="image-separator sun-surface"></div>
<div class="container">
<div id="the-earth" class="earth">
var navLinks = $("a", this).attr('href');
$(window).on('scroll', function() {
});
Aurelian Spodarec
10,801 PointsThat's what i need to change.
.active a{
color: #675ca0;
}
There isn't anything in CSS for this.
Bascially, how can i make this http://getbootstrap.com/javascript/#scrollspy
Aurelian Spodarec
10,801 PointsWithout any plugin or whatever, I'm trying to learn jQuery.
6 Answers
Jesus Mendoza
23,289 PointsSomething like this
var homeOffset = $("#home").offset();
var aboutOffset = $("#about").offset();
var contactOffset = $("#contact").offset();
$(window).scroll(function() {
if ($(this).scrollTop() >= homeOffset.top && $(this).scrollTop() < aboutOffset.top) {
$("#menu ul li").removeClass('active');
$("#menu ul li.home").addClass('active');
} else if ($(this).scrollTop() >= aboutOffset.top && $(this).scrollTop() < contactOffset.top) {
$("#menu ul li").removeClass('active');
$("#menu ul li.about").addClass('active');
} else {
$("#menu ul li").removeClass('active');
$("#menu ul li.contact").addClass('active');
}
});
The .offset() method gives you the top and left coordinates of a given element, in this case we want the top coordinates of our containers #home, #about and #contact (which act like sections of our website). Now that we have the coordinates, we can get the current position using the .scrollTop() method (which tell us how many pixels have we scrolled counting from the top of a given element), we do that on the window object (which is the global object of a website). Now that we have both the current coordinates that we are currently at and the coordinates of the sections, we can compare our current position to the position of the section elements, we use the scroll() method (which executes a callback every time we the scroll event happens in our website).
Working demo: http://codepen.io/Jesusz0r/pen/YGKYKK
Sorry if I didn't make myself clear.
Aurelian Spodarec
10,801 PointsThank you. I will try to understand the code, and learn what you are doing, but i see there is a lot of repetition already, and the offset contact or whatever, isn't dynamic. Would be there a way to make it swap if it hit's the specific id that matches the siblings from the specific navigation menu, so when it matches it actives? just a though. But thank you for the code!
If anyone is wondering, im just learning doing this site https://aurelianspodarec.github.io/hcgalaxy/#homedon't look at the design, I really don’t wanna do anything to this project anymore, apart from oadding JS, maybe because im still learnign git and will take time to figure out me how to do this again :D maybe, just maybe :D i already did it once, but this was just for me using pure HTML and CSS
Jesus Mendoza
23,289 PointsYeah I know there is a lot of repetition and refactor can be done, I have to give it a deeper thought though. We can't see the web pages that you're developing locally by the way.
Aurelian Spodarec
10,801 PointsIt's this lol wrong link https://aurelianspodarec.github.io/hcgalaxy/#home
Kathryn Notson
25,941 PointsAurelian Spodarec:
I actually had difficulty with that whether I used Internet Explorer 11 or Google Chrome browsers. I couldn't get it to work for me using those browsers.
Review this link & see if it helps you. http://v4-alpha.getbootstrap.com/components/scrollspy/. My personal note to myself: "Home, about, speakers, schedule id added; not highlighted unless cursor hovers over navigation bar, not when scrolling scrollbar."
Aurelian Spodarec
10,801 PointsI'm trying to do something like this here but vertically and with jQuery : p
Kathryn Notson
25,941 PointsAurelian Spodarec:
You misspelled "Earth" on your navigation bar. You left out the "r". You should also capitalize the word "Galaxy" on the left side if you are referring to a specifically named galaxy. Otherwise, if you are referring to "galaxies" in general, then the lowercase "g" at the beginning of the word is correct.
Aurelian Spodarec
10,801 Pointsoh, it’s actually not that hard to push via git, its easy from what i can see : d i think i need to push few changes to make this work and learn git : d well, ill just do few changes, thank you :)
Kathryn Notson
25,941 PointsAurelian Spodarec:
You're welcome.
If you are enrolled in the Front End Web Development track, there is a module on Git Basics. You'll learn Git & Git Workflow & there will be a little bit about Git Hub.
Aurelian Spodarec
10,801 PointsYes, i did Git Basics, and Git Hosting project, hence i got this :D
It's just that I don't have enough practice. I understand how it works, to a degree, jsut the basics, but i alwasy forgot the commands and the process, which if i look up here i remember all.
Im trying to do learn and be advanced on CSS, so im doing the front-end track, but i though to swich and do full CSS. I know CSS pretty well, in terms of it's familiarity, but i was following a lot of bad practices. Now im going throw the TTH courses and i see how i can make it better. Do you think if i code the way i learn in the video i should get best practices in a week? I know it's time and it depends but oh well.
Would you hire someone like me here , two of them are made in WP, and another is comming, but if you look at the code, although the code is 1year old, but even though, woudl that be ok?
If I was to call and say i know git basics, HTML/CSS, understanding of jQuery and JS, PHP workflow basics, SASS, boostrap/foundation, MySQL, WordPress Theme development.
But basics. And you can see how i code HTML nd CSS etc.. do you think i could get a job?
Kathryn Notson
25,941 PointsAurelian Spodarec:
I suggest you work on typing/keyboarding skills, too. You should be placing your fingers on the home keys (a, s, d, f, j, k, l, ; which is a semi-colon) on your keyboard. From those positions, you then reach for the other keys with the fingers nearest them. Spelling American English or British English words correctly is also necessary. You must spell words correctly in coding or it will make your web pages messy. Your paragraph above also has missing letters of words, using an incorrect word, missing punctuation (apostrophe), & transposed letters like this: "jsut" should be "just". If you have a red line appearing underneath words as you type, here, then they are spelled incorrectly. The pronoun "I" is always capitalized. Typing speed (such as 55 words per minute with 3 errors) is O.K., but you need to spell words correctly first, then build your typing speed. Things like that make a difference in how a potential employer views you. Coding is very exact so the smallest details are important.
There are free tutorials online to teach you typing/keyboarding skills.
I don't hire anyone. I'm a student like yourself.
Aurelian Spodarec
10,801 PointsI know how to write on the keyboard with the index finger on the home keys lol etc... but thanks for advice, I will definitely do more of this, and I'll take care of my English too.
Thank you :)
Kathryn Notson
25,941 PointsAurelian Spodarec:
The method of using your 2 index fingers to type on a keyboard is called "hunt & peck." Typewriting from the keyboard home keys is how typing is formally taught. That's how I learned to type.
I've seen people "type" with their thumbs on their smart phones & some people are quite fast. However, you can strain your joints by using just your 2 index fingers or just your thumbs too much that way. Remember to give your fingers a break once in a while so you don't strain them.
Happy coding! :-)
Aurelian Spodarec
10,801 PointsWut ? xD I must have say it in a wrong way.
Look at this image http://www.learntyping.org/QWERTY-home-keys-position%20crop.png
You use your index finger to know where you are on the keyboard. F and J keys, are the home, you have a little thingy on the, so you can type and find your way on the keyboard wihtout looking.
You press the letter with a specific finger, and thats why the keyboard isn't aligned, and thats why the keys aren't alphabetical order, otherwise it woudl be hard to type good.
;D but thanks to remoind me about it, i sometimes slack off and use only 8 fingers lol need to work on that
Kathryn Notson
25,941 PointsKathryn Notson
25,941 PointsAurelian Spodarec:
Are you actually referring to your "logo"? I'm not sure exactly what you're attempting to do without seeing your entire code.
You didn't include your main.css code.