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:[email protected]">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>

Remove the ); part in the line before the last in your JavaScript. — doubleOrt
– doubleOrt, Commented May 30, 2018 at 23:50
didn't you see the syntax error in the Javascript console? Why would you post here before fixing the obvious typos? — Barmar
– Barmar, Commented May 31, 2018 at 0:34
Ok, I tried that and it completely disabled the accordion- event at full screen/desktop. — Jessica
– Jessica, Commented May 31, 2018 at 0:35
To Barmar- because when I tried that before it completely disabled the accordion. — Jessica
– Jessica, Commented May 31, 2018 at 0:36
Despite the syntax error, which I fixed, I do still need help disabling the javascript under 480px. Anyone know how to do this? — Jessica
– Jessica, Commented May 31, 2018 at 0:45

slothluvchunk · Accepted Answer · 2018-05-31 00:46:03Z

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.

Collectives™ on Stack Overflow

disable javascript based on browser size

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related