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

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

Ryan Herlihy
Ryan Herlihy
7,448 Points
Posted by Ryan Herlihy
Ryan Herlihy
7,448 Points

Media queries not working

When scaling the browser window, the list menu doesn't disappear and the select doesn't disappear.

style.css

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background: #fff;
}

#menu {
    background: #384047;
    height: 60px;
    padding: 0 5px 0;
    text-align: center;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
    width: 84px;
    text-align: center;
}

ul li a {
    color: #fff;
    width: 100%;
    line-height: 60px;
    text-decoration: none;
}

ul li.selected {
    background: #fff;
}

ul li.selected a {
    color: #384047;
}

select {
    width: 84%;
    margin: 11px  0 11px 2%;
    float: left;
}

button {
    display: inline-block;
    line-height: 18px;
    padding: 0 5px;
    margin: 11px 2% 11px 0;
    float: right;
    width: 10%;
}

h1 {
    margin: 40px 0 10px;
    text-align: center;
    color: #384047;
}

p {
    text-align: center;
    color: #777;
}

@media (min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display:none;
  }
}

@media (min-width: 569px) {
  #menu select, #menu button {
    display:none;
  }
}

app.js

//Create a select and append to menu
var $select = $('<select></select>');
$('#menu').append($select);

//Cycle over menu links
$('#menu a').each(function() {
  var $anchor = $(this);

  //Create an option
  var $option = $ ('<option></option>');

  var ($anchor.parent().hasClass('selected')) {
    $option.prop('selected', true);
  }

  //options value is the href
  $option.val($anchor.attr('href'));

  //options text is the tezt of the link
  $option.text($anchor.text());

  //append option to select
  $select.append($option);
});

//Create button to click to go to selects location
var $button = $('<button>Go</button>');
$('#menu').append($button);

$button.click(function() {
  window.location = $select.val();
});

//modify css to hide links on small wdiths and show button select


//also hides select and button on larger widths
//deal with selected options depending on current page
Amandeep Dindral
Amandeep Dindral
8,915 Points

Hi Ryan,

Will you please post your code. Thank you.

Joseph Fraley
Joseph Fraley
Treehouse Guest Teacher
Joseph Fraley
Joseph Fraley
Treehouse Guest Teacher

In addition to sharing your actual code, it's also very helpful to ask specific, particular questions. It's even better to include a statement about any research you've already done, or any experiments you've already tried that don't seem to be working. It makes it much more likely you will get a helpful answer.

2 Answers

Joseph Fraley
STAFF
Joseph Fraley
Treehouse Guest Teacher
Joseph Fraley
Joseph Fraley
Treehouse Guest Teacher

There are a number of problems with the script you've posted. I'd like to hear more about what you're seeing on your screen. For example:

  var ($anchor.parent().hasClass('selected')) {
    $option.prop('selected', true);
  }

" ( " and " ) " are not valid symbols to appear in a JavaScript variable. The only characters that are allowed to to follow a var statement are letters, the underscore (_), the dollar sign ($), and numbers -- as long as the numbers are not the FIRST character. Thus, var ($anchor is invalid straight away, because it is a var statement containing a " ( ". But anyway, you don't mean to post a variable assignment here. You want an if condition, to check whether the script should add a class to a particular tab or not.

  if ($anchor.parent().hasClass('selected')) {
    $option.prop('selected', true);
  }

You also had a similar problem here:

//Create an option
  var $option = $ ('<option></option>');

In the block above, there is a space between the $ and the (...). Compare the following: 

$ ('<option>')

$('<option>')

In (1), jQuery isn't working, because the parentheses that announce the arguments you want it to take are too far away. It doesn't know what you want it to do. In (2), jQuery receives the "<option>" argument, and does what you want. Everything should work, if the links in your HTML are pointing to the right place. In other words, it's not your CSS Media Queries, it's your JavaScript.

Does that answer your question? If so, please up-vote my answer as "Best Answer"! It helps me reach my career path goals quickly. If not, feel free to write more in order to clarify your question!

Ryan Herlihy
Ryan Herlihy
7,448 Points
Ryan Herlihy
Ryan Herlihy
7,448 Points

Thanks, it had been working fine before the media queries were added so I guess I didn't think to look at the JS. Good catches, these syntax errors seem obvious now

Anthony c
Anthony c
20,907 Points
Anthony c
Anthony c
20,907 Points

I had to split them up like this:

'''

@media (min-width: 568px) {

menu select { display: none; }

menu button { display: none; }

}

'''