Change element css when div has specific class

Question

I have problem with my code. What I want to do is change css of elemnt when I'm on first div. So, when I'm on first div my element have for example font-size: 24px; when I scroll down my element should have font-size: 40; I'm using wordpress and Vase theme. My site - http:///www.ciranga.pl

When I'm on main slide (with red background) I want to make my arrows on right to be white. When I scroll down I want it to be red. How Can I do that? Any help would be great.

jQuery(document).ready(function($) {
if ($('.swiper-slide:first-of-type').hasClass('swiper-slide-active')) {
    $('.vase_whiteC').css('font-size', '40px');
} else {
    $('.vase_whiteC').css('font-size', '24px');
}
$('html').keydown(function(e) {

    var Key = e.keyCode;

    if ([37, 38, 39, 40].indexOf(Key) > -1) {

        // up!
        if (Key == 38) {
            $(".umicon-vase_arrowPrev").parent().trigger("click");
        }

        // down!
        if (Key == 40) {
            $(".umicon-vase_arrowNext").parent().trigger("click");
        }

        return false;
    }

});

});

I see you have code that allows the arrow in red at the page footer to be visible and hidden on page scroll. You can use the same method to add class that has a different width and color as per your requirement. Then you can add and remove such class to the element which has to change appearance. Also you have c class vase_whiteC with color: #fff !important. you need to remove that and switch red and white classes in scroll position. — Prabhakar Poudel
– Prabhakar Poudel, Commented Apr 21, 2017 at 8:40

Pyromonk · Accepted Answer · 2017-04-21 12:17:47Z

1

After working with the original poster, we have arrived at this solution:

$(window).on('wheel', function() { setButtonState(); });
arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]').click(function() { setButtonState(); });

function setButtonState() {
    setTimeout(function() {
        var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length;
        if(!sbw) {
            arw.css('color', 'red');
        } else {
            arw.css('color', 'white');
        }
    }, 600);
}

answered Apr 21, 2017 at 12:17

Pyromonk

6591 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pyromonk Over a year ago

Adding this link as a comment for future reference. The slider API has callback methods that can be used if someone cannot figure out how exactly it works (I personally can't).

Bhupat Bheda · Accepted Answer · 2017-04-21 08:48:44Z

1

You can use other methods like $(document).scroll(function(){

Below code is not your answer but you can try something like that

var

 $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) { 
            // add css here
     }
  }

targetOffset would be 38,40.

answered Apr 21, 2017 at 8:48

Bhupat Bheda

1,9781 gold badge10 silver badges13 bronze badges

1 Comment

Pyromonk Over a year ago

The scroll event only fires once after page load, so this solution will, unfortunately, not work.

Collectives™ on Stack Overflow

Change element css when div has specific class

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related