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

General Discussion

Terrance Corley
Terrance Corley
11,990 Points
Posted by Terrance Corley
Terrance Corley
11,990 Points

Could you help me out with my project?

Hello there,

Hopefully you guys can shed some light on the issues I'm currently having with my site.

My site on GitHub.

  1. How can I fade in my header h1 anytime I load the index.html
  2. I'd like to get the anime/tv shows/movie divs to fade in when I load the index.html. I've gotten them to fade out but can't seem to make them fade in.
  3. When I'm on the anime selection page and go back to my homepage via the menu link there is a brief period where my section content doesn't show. Why is this?

I know these descriptions probably aren't the most helpful, but if you could help me out with any of these issues I'd greatly appreciate it.

Thanks!

Nathan Dalbec
Nathan Dalbec
17,111 Points
Nathan Dalbec
Nathan Dalbec
17,111 Points

Just cloned your repo, I'll be giving it a look to see if I can answer your questions

1 Answer

Nathan Dalbec
Nathan Dalbec
17,111 Points
Nathan Dalbec
Nathan Dalbec
17,111 Points

For the first and second question; to do something on load, you want to use the $(document).ready() function, and to fade something in, it first needs to be hidden which you can do with the .hide() method. Put all this together to fade in the header h1 and main menu divs, and you get:

var $mainHeader = $(".main-header");

// On load fade in header h1 and main menu buttons
$(document).ready(function() {
  $mainHeader
    .children("h1")
    .hide()
    .fadeIn(400)
  $mainMenu
    .children()
    .hide()
    .fadeIn(400)
});

For the third question; in the menuNav click handler, you are setting the window.location variable. This causes the page to be reloaded and therefore the content section will briefly not show because it is being loaded, to fix that and make it look consistent with how the user entered the anime menu, you'll want to do something like this:

$menuNav.on("click", function(){
  $(this).fadeOut(700, function(){
    $(this)
      .parent()
      .siblings('.main-menu')
      .fadeIn(400)
      .children()
      .fadeIn(400)
  });
  return false;
});

Also I noticed when looking through you code you were using the Jquery constructor on the already constructed jquery objects, while that didn't seem to break anything, it is unnessesary

// Instead of this
$($mainMenuDiv).on("click", function(){

// You can just do this
$mainMenuDiv.on("click", function(){

And lastly, here's main.js with all the changes

var $menuNav = $("#menu-nav");
var $mainMenu = $(".main-menu");
var $mainMenuDiv = $(".main-menu div");
var $animeMenuBtn = $(".anime");
var $animeMenu = $(".anime-list");
var $menuSelected = $(".menu-selected");
var $mainHeader = $(".main-header");

// On load fade in header h1 and main menu buttons
$(document).ready(function() {
  $mainHeader
    .children("h1")
    .hide()
    .fadeIn(400)
  $mainMenu
    .children()
    .hide()
    .fadeIn(400)
});

// Show Menu nav when any menu div is clicked and  then hide self and siblings
$mainMenuDiv.on("click", function(){
  $menuNav.fadeIn(700);
  $(this).hide("slow");
  $(this).siblings().hide("slow");
  $mainMenu.hide("slow");
});

// Show anime selection when anime div clicked
$animeMenuBtn.on("click", function(){
  $animeMenu.fadeIn(1500);
});

// Show movies selection when anime div clicked

// Show tv shows selection when anime div clicked

// Fade out selected menu on menu nav click
$menuNav.on("click", function(){
  $menuSelected.fadeOut(700);
});

// Fade out menu nav on click
$menuNav.on("click", function(){
  $menuSelected.fadeOut(700);
  $(this).fadeOut(700, function(){
    $(this)
      .parent()
      .siblings('.main-menu')
      .fadeIn(400)
      .children()
      .fadeIn(400)
  });
  return false;
});
Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Nathan,

Thank you soooooo much! I truly appreciate you taking the time to refactor my code and then explain what you did in detail. You're awesome!

I just had one more question. The return false statement in the code. Could you explain to me why I need it in order for that function to run and what exactly is it doing?

Thanks again!

Nathan Dalbec
Nathan Dalbec
17,111 Points
Nathan Dalbec
Nathan Dalbec
17,111 Points

Using return false on a JQuery event object does the same thing as using .preventDefault() and .stopPropagation() on a JQuery event object. By default, clicking on something like an anchor (a) element or a button element will make the browser try to reload the page, or load a new page. .preventDefault() stops this default behavior, preventing the page from reloading when you don't want it to. .stopPropagation() stops the event from bubbling up to the parent elements on the DOM tree, I don't think it's relevant in this case, but if you started to attach event handlers to the parents of the element then it might come up.

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Thanks for all your help Nathan, it's greatly appreciated!