Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript My first jQuery XP: looking for some help

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #153487
    Nathan Gross
    Participant

    So here I am, attempting to write some jquery for the first time. And I’m now stuck. I would really appreciate some help or guidance.

    In this codepen: http://cdpn.io/avHxr

    I’m trying to make the navigation (everything under the toggle) show/hide using slideToggle. That seems to be working just fine. I’d like though, that the navigation is “hidden” on page load though. I’ve read that you use display: hidden (currently commented out in the codepen), and then the slideToggle will work. But it does not. I’m not sure where I’m going wrong.

    Ultimately, I’m working on a responsive site. On a screen less than 450px, the navigation is 1 single column of links. So really, I’d like the jquery to hide the nav portion if someone resizes their browser (or changes the oreintation of their device)

    I’m considering using a media query to show/hide the toggle button for the nav.

    Any help/input/direction would be super awesome.

    Thanks!

    #153491
    Alen
    Participant
    #153493
    Nathan Gross
    Participant

    Awesome, thanks Alen!

    I forked it and made some tweaks to the classes so it can be more modular.

    So, the $(document).ready(function() { is not needed, because that waits for the page to load?

    #153552
    Nathan Gross
    Participant

    Got it. Thanks Ed!

    #153562
    Nathan Gross
    Participant

    Ok, so I’m still working through this and having a few more issues:

    http://cdpn.io/KLiaD

    I thought it might be better to use classes to make it more modular for other/future uses in the site.

    The slideToggle does not seem to work anymore. I tried with either id or class. What am I missing here?

    Also, I’m looking to have the toggle only appear when <500px.

    Another issue is if the page is resized to larger than 500 and the nav has been toggled to hidden.

    #153567
    Senff
    Participant

    Keep in mind that some of your jQuery code is ONLY executed on page load.

    So for example:

    if ($(window).width() < 500) {
      toggle_container.hide();
    }
    

    It will only hide the toggle_container if your window is smaller than 500 on page load, because that’s when the IF statement is tested. If it’s larger than 500 and then you resize it to less than 500, the toggle_container.hide will not be executed.

    This code however:

    toggle.on('click', function(){
      toggle_container.slideToggle();
    });
    

    While it’s initially loaded on page load, it will keep running in the background (so to speak) because you basically say “keep testing this thing all the time and do something when there’s a click event on the “toggle” element“.

    Make sure you don’t mix things up. If you want to show or hide something based on the window width, do this with media queries. Javascript/jQuery is usually not needed for that. You kinda mixed things up there, by using both methods.

    Finally, the syntax for your media query is incorrect. You have:

    .main-nav-toggle {
        @media screen and (min-width: 500px) {
          display: none;
      }
    }
    

    I’m not sure if that’s because you Codepen’s internal style parser is different or if that’s a Sass-type of doing things, but this is the standard way:

    @media screen and (min-width: 500px) {
        .main-nav-toggle {
            display: none;
        }
    }
    
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.