0

I have a problem creating an event in jquery .. my code is this:

In THML there are no problems because it refers to an event .. I attach the code in jquery:

$("nav ul li a").click(function(e) {
    e.preventDefault();
    var target =  $(this).attr("href");
    $("html,body").animate({
        scrollTop: $(target).offset().top
    },2000,"easeOutQuint");
});

In this way, when I click on the nav entry, it takes me to the desired element ... here there is no problem.

Then I created a hamb that allows me to view the nav in full screen, it opens and closes quietly, here is the code.

$("#hamb").click(function(e) {
    if( $(this).hasClass("on") ){
        $(this).removeClass("on");
        $("#full").stop().fadeIn(800);
        $("#full ul li").addClass("down");
        $(this).css("z-index", "20");
        $("#hamb span:nth-of-type(1)").addClass("ruota1");
        $("#hamb span:nth-of-type(2)").css("opacity", "0");
        $("#hamb span:nth-of-type(3)").addClass("ruota3");
    } else {
        $(this).addClass("on");
        $("#full").stop().fadeOut(300);
        $("#full ul li").removeClass("down");
        $(this).css("z-index", "10");
        $("#hamb span:nth-of-type(1)").removeClass("ruota1");
        $("#hamb span:nth-of-type(2)").css("opacity", "1");
        $("#hamb span:nth-of-type(3)").removeClass("ruota3");
    }
});

I want to make sure that when I click on a voice, the nav closes. I've already tried doing this(#full is the nav):

$("nav ul li a").click(function(e) {
       e.preventDefault();
       var target =  $(this).attr("href");
       $("html,body").animate({scrollTop: $(target).offset().top},2000,"easeOutQuint");
       $("#full").stop().fadeOut(800);
    });

It works, it disappears quietly..the problem is that the nav also disappears in the classic horizontal version .. how can I make sure that this rule is present only at a certain width of the window? So you only work with tablets and mobile phones? I tried with:

if ($(window).width() < 960) {
   example....
}

But I can not use this rule well .. I can not, could someone help me?

BlackNetworkBit
  • 776
  • 10
  • 21
Insomnia
  • 9
  • 4
  • Where did you put the `$(window).width() < 960` check? Try putting inside the click listener so the window width is checked each time the element is clicked. – Adam Sep 12 '18 at 16:35
  • If you want to only do something if the user is on a mobile device, check out [What is the best way to detect a mobile device in jQuery?](https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery). – Joseph Webber Sep 12 '18 at 16:38
  • Yes..but the problem is that if I then enlarge the window and click on the nav entries (which I have horizontally because it is for the desktop version) they disappear .. – Insomnia Sep 12 '18 at 16:41
  • Please include (simplified) html. As it stands its really hard to understand whats going on (whats a hamb? whats a voice, why do you click on it?) – Jason bamber Sep 12 '18 at 16:43
  • is a classic hamburger where when you click the nav leaves – Insomnia Sep 12 '18 at 16:49
  • 1 I click on the hamburger, the nav comes out with all the voices. 2 I click on an entry and the nav closes. I can do it .. but I have the following problem Even when I'm in the desktop version this is put in place, so when I click in a nav entry this disappears. I would like to apply the above mentioned rule only when the window size is less than 960, in order to avoid this problem if the window is enlarged, since the hamburger that lets out the voices is only present from <960 in down, for larger dimensions I have a classic nav centered in the middle with the voices in plain sight. – Insomnia Sep 12 '18 at 16:55

0 Answers0