Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Creating a mobile drop down menu - Perform part 1: Not working in Firefox or Google Chrome

Hi I'm following the video for creating a mobile drop down menu (using jQuery). I got as far as the first couple of minutes, where the select element is created and added to the menu object.

This worked fine in workspace on the video, but I've tried two browsers (Chrome 34.0 and Firefox 28.0) and and it doesn't work.

Here is the code.

var $select = $("<select></select");
$("#menu").append.($select);

In the video, it works using workspace, the select element is visible. Should it not work on various browsers also? This was only two lines of code, and I checked my typing many times and couldn't see any error. So I don't know why it isnt' working.

I did complete the video, but am still having problems. I did try the completed solution from the download files, but they don't appear to work either using the browsers I've already mentioned.

Can anyone help, please? Thanking you in advance.

4 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Hi Jerome,

At the bottom of the script you have $sselect.show(); You have 2 ss -- should be $select.show();

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Is that the exact code you're using? If it is, you need to add the closing >to the select element:

var $select = $("<select></select>");

Also, there's no period after append:

$("#menu").append($select);

Hi Dave, thanks for the reply. You're correct there were typing errors in what I posted here. However in the version I was using, those errors weren't there.

Here is the code I am using.

//Problem: It looks unsightly in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

//Create a select box, append the select box to the #menu
var $select = $("<select></select>");
$("#menu").append($select)


// Cycle over each menu link
$("#menu a").each (function () {
  var $anchor = $(this);
  //Create an option
  var $option = $("<option></option>");
  //Option's value is the href
  $option.val($anchor.attr("href"));
  //Option's text is the text of the link
  $option.text($anchor.text()); // Sets the option object's text to be the same as that of the current anchor

  //Append option to select
  $select.append($option);
  $sselect.show();

});

Ah yes, I see. You are absolutely correct, I have amended that and it now works in both browsers. Thank you for taking the time to help me with this. I definitely have to watch the typing in future. Thanks again.