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

Posted by Alex Jang
Alex Jang
2,062 Points

Why code works once I refresh the web page?

This question is a little off topic but can someone explain why my code doesn't work when the webpage originally loads but after I refresh it, the jQuery work?

Sergio Alen
Sergio Alen
26,726 Points

can you paste your code here so we can see it?

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

Which browser are you using? Have you cleared your cache lately? Does this problem occur each time? Do you add the jQuery after you initially load the page?

4 Answers

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

I can't find anything wrong with your code apart from a small issue, you forgot to close an </option> tag

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

I copy your code to my local machine and cant replicate the issue. What browser are you using? did you check your developer tools if you have any errors in the console? have you tried it in other browsers?

Alex Jang
Alex Jang
2,062 Points
Alex Jang
Alex Jang
2,062 Points 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

* {
    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;
}
/** Start Coding Here **/
/**
modify css to hide links on small width and show button and select
 -also hides select and button on larger width and show links
**/

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

@media (min-width: 568px) {
  #menu select, #menu button {
    display: none;
  }
}
Alex Jang
Alex Jang
2,062 Points

sorry i'm a noob at posting. This is my very first post

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

*Edited Markdown for readability

Falk Schwiefert
Falk Schwiefert
8,706 Points

Heya,

I understand from your question that you have trouble with you JS code. Could you post that here too? Above is only html and CSS.

Sergio Alen
Sergio Alen
26,726 Points

and the JS work? you said you had problems with the jquery code, can you paste that too?

Alex Jang
Alex Jang
2,062 Points
Alex Jang
Alex Jang
2,062 Points 
//create a select and append to options
var $select = $('<select></select>');
$('#menu').append($select);
//Cycle over menu links and create options
$('#menu a').each(function(){
  var $anchor = $(this);
  var $option = $('<option></option');

  //deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")){
    $option.prop("selected", true);
  }

  //options value is the href of the link
  // append option to select  
  $option.val($anchor.attr('href'));//getting the hyperlink 
  $option.text($anchor.text());//getting the title name
  $select.append($option);
});

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

//bind click to button
$button.click(function(){

//go to selects location
window.location = $select.val();
});
Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

First, try loading your jQuery file in the head section of your .html file. It may or may not slow down page loading. If you load your jQuery before your html and css load it will be ready by the time enough of the user interface has been downloaded for the user to interact with your webpage.

Also, try loading your jQuery locally instead of from someone else's server. Loading jQuery from a 3rd party server takes more time to download the coding you need.

Alex Jang
Alex Jang
2,062 Points
Alex Jang
Alex Jang
2,062 Points

I'm using chrome, and yes I have checked my developer tools and no errors came up. I did try it in safari and I didn't come across the same problem, so it might just be chrome. But thanks for the help anyways!