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

HTML jQuery Basics (2014) Creating a Mobile Drop Down Menu Preparation

Marston Gould
seal-mask
.a{fill-rule:evenodd;}techdegree
Marston Gould
PHP Development Techdegree Student 17,314 Points
Posted by Marston Gould
.a{fill-rule:evenodd;}techdegree
Marston Gould
PHP Development Techdegree Student 17,314 Points

Why wouldn't this better be accomplished with CSS / Media Queries vs. JQuery?

I'm sure as I get through the rest of the videos on this section, it will show that you can accomplish this using JQuery. My question is why wouldn't you just solve this using CSS / Media Queries? How do you know which approach is better.

8 Answers

Tom Schinler
Tom Schinler
21,052 Points
Tom Schinler
Tom Schinler
21,052 Points

Marston, I misread your question at first. I thought you were arguing as to why not use JQuery instead of CSS. Yes, I agree with your point, and Boy makes another compelling argument for CSS. Now I'll play devils advocate and give the JQuery side.

Plain and simple, JQuery can do animations, transistions, effects, and DOM Alterations much smoother, and prettier than CSS alone. JQuery can make a site much more interactive, and take a user to another level. Yes the additions in CSS3 and HTML5 close this gap, but JavaScript still stands on its own as an incredibly powerful tool.

While you can make an animation with CSS, JQuery can make it pop.

You should make sure your site is fundamentally sound and usable with out JavaScript, but allow JavaScript/JQuery to give it that wow factor.

Marston Gould
seal-mask
.a{fill-rule:evenodd;}techdegree
Marston Gould
PHP Development Techdegree Student 17,314 Points
Marston Gould
.a{fill-rule:evenodd;}techdegree
Marston Gould
PHP Development Techdegree Student 17,314 Points

So you seem to be reinforcing what I thought. While you can accomplish this task using JQuery / Javascript - and as a point of lesson, that's fine - it really does make more sense to accomplish this task with CSS.

Tom Schinler
Tom Schinler
21,052 Points
Tom Schinler
Tom Schinler
21,052 Points

The simple answer is that some users have JavaScript turned off. One of your goals as a developer is unobtrusive JavaScript. The sites functionality should be there regardless of JS limitations. JavaScript should be used to enhance a user experience but not be relied on for basic tasks.

With that said, there is always a JQuery library that has what you are looking for.

Jon Edwards
Jon Edwards
7,913 Points
Jon Edwards
Jon Edwards
7,913 Points

Also keep in mind that this video series is to show the basic introduction of what can be accomplished with jQuery. These simple tasks show the workflow that a jQuery programmer employs.

He is not concerned about deciding if he should create the example without jQuery. That being said, I believe that some of the coursework on Treehouse discusses your point to some degree, called "best practices".

michel rodrigues
michel rodrigues
11,727 Points
michel rodrigues
michel rodrigues
11,727 Points

In my opinion we can accomplished this task with CSS:Media Queries, BUT!! the purpose of this course is teach to us that we can accomplished as well using jQuery / javascript. I thought the same as you at first don't worry.

Boy Buijsman
Boy Buijsman
13,773 Points
Boy Buijsman
Boy Buijsman
13,773 Points

I think the loadspeed is an issue. You dont need to load the .js library so an all CSS solution would be quicker in theory.

Kartik Kapoor
Kartik Kapoor
3,016 Points
Kartik Kapoor
Kartik Kapoor
3,016 Points

I am sorry but I don't understand how we can accomplish the project with CSS alone.We want to create a drop down menu for smaller devices.That can surely be done.But how will you direct the user to appropriate page when he has selected a particular page from the drop down?We do need jQuery to trigger an event when the button is pressed ,am I right?Or is there some way that the task can be accomplished by CSS alone?

Tom Schinler
Tom Schinler
21,052 Points
Tom Schinler
Tom Schinler
21,052 Points

HTML5 has a drop down menu built in that does not require JQuery to run it.

<select>
  <option value="choice1">choice1</option>
  <option value="choice2">choice2</option>
  <option value="choice3">choice3</option>
  <option value="choice1">choice4</option>
</select>
Claudia Klees
Claudia Klees
1,292 Points
Claudia Klees
Claudia Klees
1,292 Points

Tom, yes it does. However, good coding also requires some support for older browsers. HTML5 is not fully supported in older versions of internet explorer. As for the original person's question, the question is not 'is it best to use jQuery?' but 'what can jQuery do?'. This is, after all, a jQuery course.