Solution to the whole push menu?


#1



Hey all coders out there! I've been seeing that the Push menu exercise using jQuery is buggy despite thinking that you are using the correct code. So do I. I've been stuck now for 2 hours and I've taken a look at the index tab and the css tab to figure out what might be wrong.

I got the correct code for "opening" the menu by clicking on the "icon-menu" but i still gives me an error message. the weird thing is: In the preview it works. I've had this a couple of times in other exercises where the animation worked, but it still was an error message. I think sometimes it's buggy with the structure of the code. So the code which lets the animation work looks like this:


var main = function() {
    $('.icon-menu').click(function() {
        $('menu').animate({left: '0px'}, 200);
        $('body').animate({left: '285px'}, 200);
    });
    $('.icon-close').click(function() {
        $('menu').animate({left: '-285px'}, 200);
        $('body').animate({left: '0px'}, 200);
    });
};

$(document).ready(main)


The code which lets me pass the exercise looks like this:

var main = function () {
    $('.icon-menu'.click(function() {
        $('.menu').animate({
            left: '0px'
        }, 200);
    
        $('.body').animate({
            left: '285px'    
        }, 200);
});
    $('icon-close'.click(function() {
        $('.menu').animate({
            left:'-285px'
        }, 200);
        
        $('body').animate({
            left: '0px'
        },200);
};

$(document).ready(main);

In the index tab it says that the "div class" with the id "icon-close" should use a blue cross (http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png). When the "menu" icon is pushed, the body of the document moves to the right. There is supposed to be the blue cross In that white part of the document which appears after pushing that menu icon. In the index tab I've replaced the link of the cross with another link of a cross because for some reason the blue cross which is supposed to be there was'nt there. My code in the index tab now looks like this:

  <!-- Menu icon -->
  <div class="icon-close">
    <img src="https://www.dekra.pl/Content/images/common/closeButton.png">
  </div>

`

And now the animation works. It closes and open the menu. As long as the animations are working i do not care about error messages. Hope that this will help some of you.


#2

Hi @luu99,

There's a reason you're getting an error message - your first code is incorrect, and doesn't actually work. I highly recommend you pay attention to error messages, even when your code "works", because there's often something small that you missed and the error message is trying to tell you about.

In the case of your first code, you've missed a dot (.) in front of menu - without it, the browser will look for the nonexistent <menu> element, whereas with the dot, it becomes a class selector and any element with the class="menu" attribute will get selected.


#3

Lol omg thats embarassing. I see ... :joy:


#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.