CODEWITHSUNDEEP
jquery
Fatih Toprak
Fatih Toprak

Reputation: 1007

How to add a some class when screen size is smaller than xxx px?

I m trying to create a mobile menu for my new project width slidetoogle function.

jQuery(document).ready(function($) {

    $('.allCategories').click(function(event) {
        $('.categoryContainner').slideToggle('300');
    });


    var mobileMenu = $(window).width();

    $(window).resize(function() {
      mobileMenu = $(window).width();
      if (mobileMenu < 440) {

          $('#allCategroyList').addClass('class_name')();
      }
    });

});

html : 

<div class="bar">
    <div class="content">
        <span class="info">
            <i class="fa fa-bars"></i> Hello we have <strong>2711</strong> HD quality documantary videos in <strong>51</strong> categories.
        </span>
        <span class="allCategories">
            <i class="fa fa-angle-double-down"></i> All Categories
        </span>
    </div>
</div>
<div class="content">
    <div class="categoryContainner">
        <div class="content">
            <nav id="allCategroyList">
                <ul>
                    <li><a href="">Category Link 1</a></li>
                    <li><a href="">Category Link 2</a></li>
                    <li><a href="">Category Link 3</a></li>
                    <li><a href="">Category Link 4</a></li>
                    <li><a href="">Category Link 5</a></li>
                    <li><a href="">Category Link 6</a></li>
                    <li><a href="">Category Link 7</a></li>
                    <li><a href="">Category Link 8</a></li>
                    <li><a href="">Category Link 9</a></li>
                    <li><a href="">Category Link 10</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

It did not worked for me ? Can anyone help me please. Thanks.

EDIT

The solution is,

var mobileMenu = $(window).width();

        $(window).resize(function() {
          mobileMenu = $(window).width();
          if (mobileMenu < 440) {

              $('#allCategroyList').addClass('class_name');
          }
        });

Thanks for fast replay.

Upvotes: 0

Views: 434

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to remove that extra set of parenthesis after the addClass() statement, because it will cause the following error Uncaught TypeError: object is not a function 

  $('#allCategroyList').addClass('class_name')();
                                  ------------^

Upvotes: 1

Related Questions