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 Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Attaching Jquery correctly to my project

Hello, I am trying out the jquery drop down menu on a project, but it does not seem to of attached to my html doc. Can anyone see where I have gone wrong? Thank you in advance.

<!doctype html>
<html lang ="en"> 

<head>
    <meta charset ="utf-8">
    <title>Pam Mitchell Tomatis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

    <body>

<div id="wrapper"> <!--opening wrapper div-->

    <header>    
        <div class="mini-header"> <!--opening mini-header div-->
            <h3><a href="http://tomatis.co.nz/">tomatis.co.nz</a></h3>

                <a href="http://tomatis.com"><img src= "../Images/tomatis-logo.jpg" alt="Tomatis logo" id="tomatis-logo1"></a>  

                    <img src= "../Images/facebook-logo.png" alt="facebool logo" id="facebook-logo1">
        </div><!--closing mini-header div-->

             <div class="main-header">  <!--opening main-header div-->
                 <h1>Pam Mitchell</h1>
                 <h2>Tomatis</h2>
                 <h4>Auditory Theory Programme</h4>
                    <div id="menu">
                        <ul class="nav">
                            <li class="selected"><a id="main.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                            <li><a href="testimonials.html">Testimonials</a></li>
                        </ul>   
                  </div><!--closing id menu div-->
                </div> <!--closing main-header div-->
              </header>

    <div class="main-content content-flex"> <!--opening main content div-->

            <img src="../Images/mobile-cover-image-bw.jpg" alt="Cover image of child listening to headphones" id="mobile-cover-image" class="relative">

             <img src="../Images/large-cover-image-bw.jpg" alt="Cover image of child listening to headphones large" id="large-cover-image" class="relative">

                <div id="content-paragraph">
                    <p>"THE TOMATISĀ® METHOD increases concentration, speeds up learning, improves reading, sleep and communication while reducing stress and anxiety."</p>
                        </div><!--closing content-paragraph div-->

            <a href="http://tomatis.com"><img src= "../Images/tomatis-logo.jpg" alt="Tomatis logo" id="tomatis-logo"></a>  

            <img src= "../Images/facebook-logo.png" alt="facebool logo" id="facebook-logo">

    </div> <!--closing main content div-->

    </div><!--closing wrapper div-->
        <div id="footer">
            <footer>
                <p>&copy; Pam Mitchell 2016</p>
            </footer>
        </div><!--closing footer div-->
    <script script="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script>src="dropMenu.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

// problem - it looks gross in smaller broswer widths such as a phone

// solution would be to hide the text links and swap them with a more appropriate navigation


// 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>");
});

// deal with the selected option depending on current page
if($anchor.parent().hasclass("selected")) {
  $option.prop("selected", true);
}
// options value is the href
$option.val($anchor.attr("href"));

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


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

// bind change to the select menu
$select.change(function(){
  //go to select location
  window.location = $select.val();
});

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

// also hide select and button on larger width and show links

// Deal with selected options depending on current page
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points 
// 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>"); });

// deal with the selected option depending on current page if($anchor.parent().hasclass("selected")) { $option.prop("selected", true); } // options value is the href $option.val($anchor.attr("href"));

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

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

// bind change to the select menu $select.change(function(){ //go to select location window.location = $select.val(); });

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

// also hide select and button on larger width and show links

// Deal with selected options depending on current page

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

You have a few typos in your script tags. Change the following lines at the bottom of your html document

<script script="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script>src="dropMenu.js" type="text/javascript" charset="utf-8"></script>

to

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dropMenu.js" type="text/javascript" charset="utf-8"></script>
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you for your help. The file looks like it has attached but only a small scroll bar has appeared on the left hand side. I am not sure where to go from here to make it work, any ideas, what I have done wrong, I am keen to learn how to do this correctly.

html

<!doctype html> <html lang ="en">

<head> <meta charset ="utf-8"> <title>Pam Mitchell Tomatis</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/nav.css"> </head>

<body>

<div id="wrapper"> <!--opening wrapper div-->

<header>    
    <div class="mini-header"> <!--opening mini-header div-->
        <h3><a href="http://tomatis.co.nz/">tomatis.co.nz</a></h3>

            <a href="http://tomatis.com"><img src= "../Images/tomatis-logo.jpg" alt="Tomatis logo" id="tomatis-logo1"></a>  

                <img src= "../Images/facebook-logo.png" alt="facebool logo" id="facebook-logo1">
    </div><!--closing mini-header div-->

         <div class="main-header">  <!--opening main-header div-->
             <h1>Pam Mitchell</h1>
             <h2>Tomatis</h2>
             <h4>Auditory Theory Programme</h4>
                <div id="menu">
                    <ul class="nav">
                        <li class="selected"><a id="main.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="testimonials.html">Testimonials</a></li>
                    </ul>   
              </div><!--closing id menu div-->
            </div> <!--closing main-header div-->
          </header>

<div class="main-content content-flex"> <!--opening main content div-->

        <img src="../Images/mobile-cover-image-bw.jpg" alt="Cover image of child listening to headphones" id="mobile-cover-image" class="relative">

         <img src="../Images/large-cover-image-bw.jpg" alt="Cover image of child listening to headphones large" id="large-cover-image" class="relative">

            <div id="content-paragraph">
                <p>"THE TOMATISĀ® METHOD increases concentration, speeds up learning, improves reading, sleep and communication while reducing stress and anxiety."</p>
                    </div><!--closing content-paragraph div-->

</div> <!--closing main content div-->
        <footer>
            &copy; Pam Mitchell 2016
        </footer>
</div><!--closing wrapper div-->

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
            <script src="../Javascript/dropMenu.js"></script>
</body>

</html>

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

The console is saying

dropMenu.js:20 Uncaught ReferenceError: $anchor is not defined

can you explain what is wrong for me here?