Now we need to hide some stuff. This will largely involve the adding, removing or (better yet) toggling of classes.
We’ll use jQuery here. Search for google hosted jquery. For the widest browser support, copy the link to the latest version 1 stream of the jQuery library. Add it as the src attribute to a script tag, just before the closing body tag. Make another script tag with a src attribute pointing to an external file. Call it whatever you want: something like menu.js would make sense.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="js/menu.js"></script>
If you’re using vanilla JavaScript for class toggling, check to see that the methods you use are supported in the browsers you’re targeting. If you’re using the classlist property, for example, IE9 and below will not understand it.
Anyway, with jQuery wired up and our external js file connected, let’s get to work.
First, let’s hide the main widget area. Then we will hide the search form.
Start with the jQuery document.ready method:
$(document).ready();
Now pass an anonymous function to the ready method. To test if your syntax is correct, pass a console.log statement to the passed function.
$(document).ready(function(){
console.log('document is ready.');
});
To check if everything is wired up correctly, open the Developer Tools to the Console ( command-option-j on Mac: “j” of course standing for javascript).
If the message shows up in the console, your script is wired up correctly. Now it’s time to modify it to do something useful.
Now modify the script as follows:
$(document).ready(function(){
var sForm = $('#searchform');
var sToggle = $('#search-toggle');
var widgets = $('.widget');
var menuButton = $('#menu-grid');
var articleOrder = -1;
sForm.toggleClass('hidden');
});
Here we get jQuery to retrieve the items we want to work with and save them in variables. Doing so means that we don’t make the same searches multiple times.
By toggling the hidden class (with a value of display: none, as you might imagine) via JavaScript rather than just putting the class into the HTML, we ensure that devices that don’t have JS will not have the form hidden.
Now let’s modify the script, retrieving the button that will toggle the display of the searchform. Here I would add an ID to the HTML for that element, for more efficient JS: since each ID can appear only once in each document, once jQuery finds the first instance of an ID, it assumes that there are no more and stops searching.
More specifically, add #search-toggle to the LI holding the magnifier icon. Then add the following to your document.ready handler:
sToggle.on('click', function(){
sf.toggleClass('hidden');
});
sToggle.on('mouseover', function(){
$(this).css('pointer','cursor');
})
Test your page. When mousing over the magnifying glass, your cursor should change to the hand and your search form should appear when the magnifying class is clicked on. It will also disappear when the magnifying glass icon is clicked again.
Now we can take care of the main menu. First add a media-queried .hidden-menu class:
@media screen and (min-width: 700px) {
.hidden-menu {
display: none;
}
}
Now modify your document.ready handler to add the ability to show or hide the menu with the menuButton.
menuButton.on('click', function(){
widgets.toggleClass("hidden-menu");
});
At this point, we can now wire up a handler to display the menu when the menu-grid button is clicked on.
For one of the bonus marks, you were asked to put the cursor in the search field when it appears. As an event, this is called focus. jQuery, however, also has a focus() method which will be very useful here. Modify your sToggle click handler to include the following:
if(!sForm.hasClass('hidden')){
$("#search").focus();
}
What we are doing here is checking to see if the form is currently NOT hidden. If not, we can use the jQuery focus() method to put the cursor into the box. This prevents us from putting focus in the search box when clicking to dismiss it.