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

Posted by Jerome Obba
Jerome Obba
7,384 Points

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
Dave McFarland
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
Dave McFarland
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);
Jerome Obba
Jerome Obba
7,384 Points
Jerome Obba
Jerome Obba
7,384 Points

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();

});
Jerome Obba
Jerome Obba
7,384 Points
Jerome Obba
Jerome Obba
7,384 Points

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.