last day (14 days later) » 

9:43 AM
0
A: Change element css when div has specific class

PyromonkIf I understood your question properly: var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length; var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]'); arw.toggleClass('vase_whiteC'); if(!sbw) { arw.css({'font-size': '40px', 'color...

 
This is exactly what I want to do but it's not work for me :/ I don't have any console errors.
 
@MMPL1, did you manage to get it to work? You've marked my answer as correct.
@MMPL1, can you please insert an alert/console.log inside the if to check if the first selector works? I'll check my code against your site as well to see if I can help.
 
console.log(sbw) outside if give me 0
 
@MMPL1, I have updated and tested the code. It should work now (a class was preventing the colour value from being updated).
 
$('html').keydown(function(e) { var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-cont‌​entSlider.swiper-b‌​ut‌​ton-disabled').lengt‌​h; if (sbw) { var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]'); arw.css({ 'font-size': '40px', 'color': 'red' }); } else { $('.sliderBtnWrapper [class*="vs_swiper-button"]').css({ 'font-size': '24px', 'color': 'red' }); } console.log(sbw); }); });
We almost got it! I used your first code and put it into keydown event. It works BUT only on first keyup. Please, check my site and see what I mean.
 
9:43 AM
I apologise for giving you such a headache, I seem to be very tired. Could you please check the current code?
 
come on, you want to help me so I can't be mad at you. So, what we have now. 1. When I'm on first slide arrows are white - good 2. When I click keydown and I am on second slide, arrows are red - good 3. When I again click keydown and I am on third slide, arrows are white - not good 4. When I click keyup arrows still are white 5. When I come back to first slide arrows are still white 6. When I click keydown arrows are red etc etc
and the code var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-cont‌​entSlider.swiper-b‌​ut‌​ton-disabled').lengt‌​h; if (sbw) { var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]'); arw.css({ 'font-size': '24px', 'color': 'red' }); } else { $('.sliderBtnWrapper [class*="vs_swiper-button"]').css({ 'font-size': '24px', 'color': 'white' }); }
 
I am working on it, I am really tired and have screwed up the logical conditions so many times it's sad.
 
I thought, maybe we should consider another solution. Maybe if slider:first-child have class active do something, If no do other?
something like this?
var sbw = $('.swiper-slide').hasClass('.swiper-slide-active').length;
if (sbw) {
var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]');
arw.css({ 'font-size': '24px', 'color': 'red' });
} else {
$('.sliderBtnWrapper [class*="vs_swiper-button"]').css({ 'font-size': '24px', 'color': 'white' });
}
 
What about this?

function() {
var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length; //is the "previous" button disabled?
var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]'); //get both buttons
if(!sbw) { //if the "previous" button is not disabled
if(arw.hasClass('vase_whiteC')) { arw.toggleClass('vase_whiteC'); }
arw.css({'font-size': '40px', 'color': 'red'});
} else { //if the "previous" button is disabled
if(!arw.hasClass('vase_whiteC')) { arw.toggleClass('vase_whiteC'); }
 
gonna try this
 
9:53 AM
Your code above follows similar logic, but it doesn't account for 'vase_whiteC', which has the #fff !important rule.
By the way, older versions of IE don't interpret 3-digit hex values properly, it's better to use #ffffff or white if you want to support IE users.
 
i deleted #fff !important rule ;)
damn, your code not working. This WP theme is so fuck*d up. I'm gonna try my solution now
 
Hmm
 
mine, not working too
ehh
 
Can you please remove all code that deals with those buttons' colour and font size? I would like to run a few tests on my end.
 
done
 
10:05 AM
I know the reason why. We append the event to onclick, when it should fire after the mouse key has been released.
 
so, maybe to be clear. I show you my current code that we deal with
jQuery(document).ready(function($) {

$('html').keydown(function(e) {
var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length;
var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]');
if (sbw) {
// arw.css({ 'font-size': '24px', 'color': 'red' });
} else {
// arw.css({ 'font-size': '24px', 'color': 'white' });
}
console.log(sbw);

var Key = e.keyCode;

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

// up!
if (Key == 38) {
$(".umicon-vase_arrowPrev").parent().trigger("click");
and of course I need to add all events (scroll, click etc) at the end
 
Thank you.

Interestingly enough, I've changed click to mouseup on my end, and it still works the way it worked before. I always get lost in those, for some reason.
Do you have the code that disables/enables the arrows? I'm feeling really dumb at the moment.
 
I think it's in theme files that I use. I can send you whole theme folder with js files.
 
I can find it through the source code then, but thank you.
I'm surprised something that trivial is taking me so long.
 
i try to solve this for 3 days :D
and I'm newbie in JS so.. :D
 
10:24 AM
I'll go have something to eat and come back in 30-45 minutes. This is the code I'm working with at the moment, but I can't test it, as the buttons are broken at the moment:

var arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]'); //get both buttons
arw.on('click', function() {
var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length; //is the "previous" button disabled?
if(!sbw) { //if the "previous" button is not disabled
//arw.css({'font-size': '40px', 'color': 'red'});
 
Enjoy your meal!
i'll be waiting
 
Thank you. Have you touched the code at all? On my end, the up arrow is enabled on the first slide, and the buttons don't work at all.
 
I don't change anything. Buttons works for me. What do you mean "don't work"?
I put your code on site. You can check it
 
10:59 AM
Thank you. I've given it some thought, and I realise now that my initial logic is flawed. I'd like to remove my answer from your thread and work out a different solution with you if you don't mind.
 
of course
 
These are the options that I see:
1) Have a timer run on page load/scroll that is going to run every second or so to check the state of the buttons. This is not an elegant solution, but it can work. Alternatively, the same function could be fired 1 second after the click/button/scroll event, but that won't be bulletproof (what if the buttons don't change classes in time? it's probably not going to happen, but it can happen nevertheless).
2) Go with the other guy's idea of using scrollTop, but this could be a real headache, because I am not a 100% sure how the theme handles scrolling.
The problem with my initial approach is that the click event checks the state of buttons BEFORE they are clicked and then fires the function AFTER they are clicked.
There is another approach in addition to the previous 2, but it won't work with mouse scrolling.
 
what about my previous solution? Check if first slide have active class? If first slide have active class all buttons are white, if first slide dont have active class buttons are red
 
Problem is, it's going to check the visibility of that slide BEFORE the button is clicked. I'll take a look if there is an event that happens after a click, but mouseup was effectively the same in handling the elements. I know I've banged my head on this problem in the past, and I think I managed to find a solution.
This will leave the buttons white for the first two slides and turn them red on the third, because only on slide #2 will #1 finally not displayed.
 
hmm, I understand
so, we can try to implement your first idea (timer run etc)
 
11:14 AM
This is what happens at the moment:
1) User clicks button
2) Function checks if up button is disabled BEFORE the user clicked it
3) A command is run based on if statement result
So the function is always 1 step behind the actual state of the page, which is why I am saying my initial logic was bad.
 
ok, so what you suggest. We're gonna try first option?
 
First option is the best bet unless I think of a better way to handle events. Last time I had a similar problem I found a way out. Depends on how much time you would like to invest into it. If you are expected to finish this project within the next hour, we should definitely go with option 1 :)
 
lets try option 1 ;)
 
11:33 AM
Would you like to run a timer when the page loads or have the colours and sizes changed after the click/scroll events? The latter option is reasonably safe.
I would like to try raising a custom event before we use timeout if I may.
 
after click/scroll events. And please, change only colours. Font sizes were only for example.
yes, please
 
11:48 AM
I made it work for the buttons, currently trying to fire the function if the user uses a mouse wheel
 
great
and please remember about keyboard (up & down arrows)
 
Your existing code triggers the onclick event when up and down keys are pressed
 
so it will be work right?
 
Yes.
That's why I said I only need to solve the mouse wheel mystery now :D
What is the name of the thing that's responsible for changing slides?
 
sweet
what do you mean?
 
11:55 AM
What is the name of the addon/library that is responsible for the divs being changed on the page?
 
wheew, honestly I don't know but try to check "vase_sliders.js" in wp_content/themes/vase/assets/js
yup, this is this file
 
Thank you
 
12:11 PM
I am not sure if this will work on mobile devices.

$(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);
}
 
I disabled arrows on mobile so all I need is pc resolution
 
In that case, the above code will work.
 
sweet jesus! thank you so so much
excelent!
 
I would like you to check it and tell me whether you want me to submit it as an answer or if you'd like to look for a better alternative.
You can also submit the answer yourself, as I've wasted enough of your time :)
 
please, submit this as an answer
damn bro. Thank you so much
 
12:18 PM
Those javascript events keep getting me confused all the time, I am very glad I was able to help you.
 
have a nice day! thank's again
 
You too!
 

last day (14 days later) »