CODEWITHSUNDEEP
javascripthtml
user3550879
user3550879

Reputation: 3469

targeting class in script

I have the following script which (i want it to) adds '.shrink' class to quarter-circle class div.

<script>
$(function(){

var shrinkHeader = 50;
 $(window).scroll(function() {
 var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('quarter-circle').addClass('shrink');
    }
    else {
        $('quarter-circle').removeClass('shrink');
    }
 });

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
}
});
</script>

<div class="quarter-circle"></div>

but It doesn't target it, not sure why.

EDIT- trying to apply this when class is added

css

.quarter-circle.shrink {
  height: 75px;
  width: 75px;
}

Upvotes: 0

Views: 49

Answers (3)

blurfx
blurfx

Reputation: 1360

Class selector is .(dot) not empty character.

So $('.quarter-circle') is the answer.

edit:

Your div.quarter-circle has no content and width and height aren't specified(so 0x0px size) I made example fiddle for help. check it out.

fiddle : http://jsfiddle.net/9k4hk57a/

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

<script>
$(function(){

var shrinkHeader = 50;
 $(window).scroll(function() {
 var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('.quarter-circle').addClass('shrink');
    }
    else {
        $('.quarter-circle').removeClass('shrink');
    }
 });
</script>

<div class="quarter-circle"></div>

Upvotes: 0

Nighisha John
Nighisha John

Reputation: 409

You should select your element by class using class selector

$('.quarter-circle').removeClass('shrink');

Here is the jQuery doc

Upvotes: 1

Related Questions