Adding and removing CSS classes with jquery

Question

I am trying to resize my footer with jquery. So far when I resize the window it doesn't add the class. Am I implementing it right?

 /* My jQuery: */

$(document).ready(function() {
 $(window).on('resize', function(){
  var win = $(this);
     if (win.width() > 600) {
      $("#anc").addClass('social-lg');
      $("#ico").addClass("icon-lg");
     } else {
      $("#anc").addClass('social-sm');
      $("#ico").addClass("icon-sm");
     }
 });
});

/* My CSS: */

.social-lg div.col-md-12 > ul > li > a {
   border: 2px solid #616161;
   border-radius: 50%;
   display: inline-block;
   letter-spacing: normal;
   text-align: center;
   height: 4.25rem;
   width: 4.25rem;
}
.icon-lg div.col-md-12 > ul > li > a > i {
   padding-top: .5rem;
   font-size: 2em;
}
.social-sm div.col-md-12 > ul > li > a {
   border: 2px solid #616161;
   border-radius: 50%;
   display: inline-block;
   letter-spacing: normal;
   text-align: center;
   height: 3.25rem;
   width: 3.25rem;
}
.icon-sm div.col-md-12 > ul > li > a > i {
   padding-top: .5rem;
   font-size: 1.5em;
}

<!-- My HTML: -->

<div class="row" id="footer">
  <div class="col-md-12">
    <ul>
      <li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
      <p>Lorem Ipsum</p>
    </ul>
  </div>
</div>

Edit: embedded code inside the question instead of providing a link

This might be a duplicate of http://stackoverflow.com/questions/9828831/jquery-on-window-resize (and even if not, that answer might be helpful). Also, you might want to identify where the problem is. Throw a `console.log('foo')` inside your resize handler; if you don't see `foo` get logged when you resize you know that the handler is the problem. If you do see it, you know the problem is with the logic inside the handler. — machineghost, Oct 06 '16 at 23:58
In addition to @machineghost comment, in Stackoverflow, you have to supply the code that you have tried. — SaidbakR, Oct 07 '16 at 00:01
@sємsєм To be fair, he did, it's just hard to recognize ("enter link description here" links to a pastebin). Just goes to show how important it is to write a question fully *before* posting, rather than rushing and trying to fix it after (a mistake I too am sometimes guilty of making). — machineghost, Oct 07 '16 at 00:02

score 3 · Accepted Answer · answered Oct 07 '16 at 00:39

You have a number of same id parameters for li and i tags which prevents jquery to select all the elements of the same id, so make them classes like following

<div class="row" id="footer">
            <div class="col-md-12">
                <ul>
                    <li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
                    <p>Lorem Ipsum</p>
                </ul>
            </div>
        </div>

Then use the modified javascript code

$(document).ready(function() {
  $(window).on('resize', function() {
    var win = $(this);
    if (win.width() > 600) {
      $(".anc").addClass('social-lg').removeClass('social-sm');
      $(".ico").addClass("icon-lg").removeClass("icon-sm");
    } else {
      $(".anc").addClass('social-sm').removeClass('social-lg');
      $(".ico").addClass("icon-sm").removeClass("icon-lg");
    }
  }).trigger("resize"); //this to force first event on load
});

If I implement this the javascript (I console.logged it) however there's seemingly no change in the css or at least how it looks. — Quesofat, Oct 07 '16 at 01:32

score 0 · Answer 2 · answered Oct 07 '16 at 00:00

You didn't include a case when there's a need to delete a one class to make another one work. Toggle class should fix it.

Edit: toggle won't work in this case. You have to use another solution:

$(document).ready(function() {
  $(window).on('resize', function() {
    var win = $(this);
    if (win.width() > 600) {
      $("#anc").addClass('social-lg');
      $("#ico").addClass("icon-lg");
      $("#anc").removeClass('social-sm');
      $("#ico").removeClass("icon-sm");
    } else {
      $("#anc").addClass('social-sm');
      $("#ico").addClass("icon-sm");
      $("#anc").removeClass('social-lg');
      $("#ico").removeClass("icon-lg");
    }
  });
});

Adding and removing CSS classes with jquery

2 Answers2