7

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

Improve this question
3
  • 4
    This might be a duplicate of 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
    Commented Oct 6, 2016 at 23:58
  • 1
    In addition to @machineghost comment, in Stackoverflow, you have to supply the code that you have tried.
    – SaidbakR
    Commented Oct 7, 2016 at 0:01
  • 1
    @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
    Commented Oct 7, 2016 at 0:02

2 Answers 2

Reset to default
3

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
});
Improve this answer
1
  • 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
    Commented Oct 7, 2016 at 1:32
0

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");
    }
  });
});

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.