redirect

Question

I am at a loss as to what to do on this challenge, particularly what it means by redirect; what should I do?

js/app.js

//Problem: It look gross 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 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 selected options depending on current page
  if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }
  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});
//Create button 
var $button = $("<button>Go</button>");
($button);
//Bind click to button
$button.click(function(){
  //Go to select's location
  window.location = $select.val();
});

index.html

<!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="//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>

Answer 1 · 2015-06-23T01:24:59Z

June 23, 2015 1:24am

The first step was "Remove the code that appends the button to the #menu, but keep the $button variable." We can see you've done that on line 27. You can actually finish deleting that line. The part it wants you to keep is the line above it, which defines "var $button".

The second step was "Now modify the $button click code so it now performs the redirect when the $select is changed."

A "redirect" is when the web page tells the browser to load a new page. That is happening within the $button.click function. Specifically, it's the line "window.location = $select.val();".

For this quiz, you don't have to do anything with that line. They only want you to make the change so that this line gets executed because of "$select.change" instead of "$button.click".

This step was performed in the video directly before this quiz, so I recommend you watch it again if you're still not clear.

Welcome to the Treehouse Community

Looking to learn something new?

Matt Bloomer

Matt Bloomer

redirect

1 Answer

Geoffrey Emerson

Geoffrey Emerson