Stop JQUERY script if screen size is more than

Question

If you take a look at my website www.biblio-tech.nl you'll see that as soon as your mouse leaves the menu bar the elements dissapear, this is caused by the Jquery script to make a accordeon navigation for the mobile version.

Thus when you resize window to mobile/tablet width the navigation is allright as soon as you resize it, it's gone..

<div class="navbar">
<a id="nav-toggle"><span></span></a>
<div class="navwrapper">
          <div id="dropMenu">
            <ul class="level1-menu">
              <li><a href="#">3d printing</a>

                <ul class="level2-menu" id="1">
                  <li><a href="3d.html">blueprints</a>
                    <ul class="level3-menu">
                      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                    </ul>
                  </li>
                      <li><a href="3d.html">information</a>
                        <ul class="level3-menu">
                          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                        </ul>
                      </li>
                         <li><a href="3d.html">software</a>
                            <ul class="level3-menu">
                              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                            </ul>
                          </li>
                </ul>

              </li>

              <li><a href="#">computing</a>

                <ul class="level2-menu" id="2">
                  <li><a href="3d.html">hardware</a>
                    <ul class="level3-menu">
                      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                    </ul>
                  </li>
                      <li><a href="3d.html">information</a>
                        <ul class="level3-menu">
                          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                        </ul>
                      </li>
                         <li><a href="3d.html">software</a>
                            <ul class="level3-menu">
                              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
                            </ul>
                          </li>
                </ul>

              </li>

              </li>
              <li><a href="#">visuals</a></li>
            </ul>
                </div>


</div>
</div>

The HTML

@media screen and (min-width: 280px) and (max-width: 900px){

.navwrapper{
position: relative;
top: 19%;
right: 0;
width: 100%;
}


.navbar {
  position: fixed;
  height: 3em;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}
#nav-toggle { 
  position: absolute;
  right: 10px;
  top: 25%; 
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: rgba(254,254,254,0.9);
  position: absolute;
  display: block;
  content: '';
  opacity: 0.9;
}

#nav-toggle span:before {
  top: -10px; 
}

#nav-toggle span:after {
  bottom: -10px;
}
#dropMenu{
display: none;
position: relative;
width: 60%;
background-color: rgba(0,0,0,0.5);
top: 100%;
right: -20%;
padding: 0;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
border-radius: 0 0 0 10px;
}

#dropMenu li{
  list-style-type : none;
}
#dropMenu ul{
  padding : 5px;
}

#dropMenu ul li{
  border-bottom: 1px solid rgba(254,254,254,0.1);
}

#dropMenu ul ul li{
  font-size: 80%;
  opacity: 0.8;
}

#dropMenu ul ul li:last-child{
  border-bottom: none;
}

#dropMenu ul ul li:first-child{
  border-top: 1px solid rgba(254,254,254,0.1);
}

ul.level1-menu  li a {
    text-decoration: none;
    color: rgba(254,254,254,1);
    font-weight: 100;
    font-size: 160%;
}

.level2-menu,.level3-menu{
  display : none;
}
}

The above is for mobile/tablet

@media screen and (min-width: 900px) and (max-width: 1600px){
.navbar {
width: 100%;
height: 4.5em;
font-weight: 100; 
position: fixed;
background-color: rgba(0,0,0,0.5);
z-index: 100;
}

    .navwrapper {
width: 100%;
height: 4.5em;
position: absolute;
z-index: 100;
left: 5%;
}

    .navbar ul {
    position: relative;
    display: inline-block ;
    list-style: none;
    font-size: 210%;
    }

    .navbar ul li {
    display: inline-table;
    width: 4.9em;
    height: 1.7em;
    margin: 15px 30px;
    color: rgba(254,254,254,0.8);
    }

    .navbar ul ul {
    position: absolute;
    display: none;
    font-size: 80%;
    top: 83%;   
    width: 60%;
    }

    .navbar ul li:hover ul  {
    display: block;
    }

    .navbar ul ul li {
    position: relative ;
    min-width: 60%;
    height: 1%;
    margin: 0 0;
    background: rgba(0,0,0,0.5);
    letter-spacing: 1px;
    text-indent: 10px;
    }

    .navbar ul ul li:hover {
    background-color: rgba(0,0,0,0.7)
    }

    .navbar ul li a {
    display: block;
    text-decoration: none;
    color: rgba(254,254,254,0.8);
    }

    .navbar ul li a:hover {
    opacity: 1;
    }


    .navbar ul ul ul {
    position: absolute;
    left: 100%; 
    top: 0;
    color: white;
    width: 120%;
    font-size: 60%;
    letter-spacing: 1px;
    }

    .navbar ul ul ul li {
    display: none;
    padding: 5px;
    text-indent: 0px;
    border-radius: 0px 15px 15px 15px;
    background-color: rgba(0,0,0,0.7);
    }


    .navbar ul ul li:hover > ul li {
    display: block;
    }

    li:last-child {
    border-radius: 0px 0px 10px 10px;
    }

    li:last-child:hover {
    border-radius: 0px 0px 0px 10px;
    }
    }

This is for desktop

$(document).ready(function(){
    $("#nav-toggle").click(function(){
    event.preventDefault();
        $("#dropMenu").slideToggle(1);
    });

        $(".level1-menu > li > a").click(function(){            
        event.preventDefault();
            $(this).siblings(".level2-menu").slideToggle(".level2-menu");
        });


            $("#dropMenu").mouseleave(function(){
            event.preventDefault();
                $("#dropMenu, .level2-menu").slideUp(1);
            });
});

I was wondering if there was some kind of way in which the script would only load, if screen size is lower than 1300px;

Or some other way to prevent this from happening, if you need more of my code I can put it in !

Thanks in advance for your time invested in helping me.

Sincere greetings,

Raymond the Hammer

Answer 1

if (whatever else condition && screenWidth < 1300) {}

$(document).ready(function(){
$("#nav-toggle").click(function(){
event.preventDefault();
    $("#dropMenu").slideToggle(1);
});

    $(".level1-menu > li > a").click(function(){            
    event.preventDefault();
        $(this).siblings(".level2-menu").slideToggle(".level2-menu");
    });


       $("#dropMenu").mouseleave(function()
                                                                                      {
        event.preventDefault();
         if (screenWidth < 1000){
            $("#dropMenu, .level2-menu").slideUp(1);}
        });

});

Link to pen: http://codepen.io/damianocel/pen/qZPLGQ

Answer 2

Since you're using jQuery, you can use the resize method.

$( window ).resize(function() {
 if($(window).width() <= 500){ // example
    //do stuff here
 }
});