disable javascript based on browser size

Question

I have been looking for an answer to this everywhere and cannot come up with anything that works. I am working on building my portfolio and have it set up so that when the user hovers over the footer it expands using the accordion function in javascript. I would like to remove this feature is the user is on mobile or any screen under 480px. Here is the code I have for this, if anyone could help I would really appreciate it! I tried if($(window).width() > 480){ and it doesn't seem to work.

 $(document).ready(function($) { if ($(window).width() > 480) { $(window).resize(); $('#accordion').find('.accordion-toggle').hover(function() { //Expand or collapse this panel $(this).next().slideToggle('slow'); //Hide the other panels $(".accordion-content").not($(this).next()).slideUp('slow'); $(this).find('.accordion-content').stop(true, true).slideToggle() }, function() { $(this).find('.accordion-content').stop(true, true).slideUp() }).find('.accordion-content').hide() }); }); 

 .accordion-content { display: none; } .aboutPara { color: #000; text-align: left; margin-top: 5%; font-size: 1.2em; } .emailTag { color: white; font-family: BAUHS93; font-size: 1.5em; } .headPic2 { margin-top: 5%; width: 50%; height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <footer id="accordion"> <div class="accordion-toggle"> <br> <h2 class="headline2" id="footerText">Jessica Levine - Web Designer and Blogger - <a class="footerLink" href="index.html">Learn More </a></h2><br> </div> <div class="accordion-content"> <div class="row"> <div class="col-md-5 col-md-offset-2 col-sm-offset-1"> <div class="aboutPara"> <h3>About Me</h3> I have worked for big corporations, small businesses and non-profit organizations. As a freelance web designer and a blogger, I strive to connect with people and strive for my designs to reflect that.<br><br> I work with clients who love what they do and are looking for affordable and attainable ways to see their visions reach the screen. Contact me if you are looking to build a website and/or brand for your business or would like help to re-create the website you have. I look forward to discussing your ideas and vision!<br> <a class="emailTag" href="mailto:levine.jessica76@gmail.com">Email Me</a> </div> </div> <div class="col-md-5"> <img src="images/headshot.jpg" class="headPic2" alt="Jessica Levine Headshot" /></div> </div> </div> </footer> 

Answer 1

Your initial approach worked just fine - the only issue was that your if condition, had an unnecessary closing ) and ; that were making javascript upset.

Here's a working fiddle , with the syntax errors fixed, and the addition of an "alert()" so that you can see what your $(window).width() is before testing the hover.

Here's the fixed js:

$(document).ready(function($) {
  if ($(window).width() > 480) {
    $(window).resize();
    $('#accordion').find('.accordion-toggle').hover(function() {

      //Expand or collapse this panel
      $(this).next().slideToggle('slow');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('slow');


      $(this).find('.accordion-content').stop(true, true).slideToggle()
    }, function() {
      $(this).find('.accordion-content').stop(true, true).slideUp()
    }).find('.accordion-content').hide()

  }
});

NOTE - if the desired effect is that the hover functionality changes without page reload, then we'll need to change your initial evaluation of $(window).width() , as it is occurring in the doc.ready, which will fire off after the DOM completes loading. If you wanted the page to always be aware of screen width, and then change with a changing screen size dynamically, you'll need to add an event listener that "listens" for, and acts upon, the screen size changing. Here is some documentation on jQuery's resize() event handler that would allow you to evaluate the window width whenever the screen size changes.