Develop Reference

Change element css when div has specific class

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

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

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.

How to bind function to window width?

How can I bind this function to the window width?
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 0) {
jQuery('.navbar-header').slideUp("slow");
} else {
jQuery('.navbar-header').slideDown("slow");
}
});

From your add explain, you can change responsive change your render based on the width of window.So, the only way to do this, is to change the handler.
jQuery(window).scroll(function() {
if (jQuery(document).width() < = 992) {
if (jQuery(this).scrollTop() > 0)
{
jQuery('.navbar-header').slideUp("slow");
}
else
{
jQuery('.navbar-header').slideDown("slow");
}
}
});
By this way, If you change the browser width, will change the show of scroll.

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!

From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};

var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.

The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

I need some javascript condition like media query

I want to add some condition in jquery like media queries in CSS, anyone can help me with this? I try the code below but is not working:
jQuery(document).ready(function(){
if (jQuery(window).width() >= 320) && (jQuery(window).width() <= 479) {
}
if (jQuery(window).width() >= 480) && (jQuery(window).width() <= 567) {
}
});

You have parentheses around your individual conditions, but not around the if conditions as a whole.
Try this:
jQuery(document).ready(function(){
alert("Running");
alert(jQuery(window).width());
if ((jQuery(window).width() >= 320) && (jQuery(window).width() <= 479)) {
alert('Small screen');
} else
if ((jQuery(window).width() >= 480) && (jQuery(window).width() <= 567)) {
alert('Large screen');
} else {
alert("Biggest screen");
}
});
Note the extra parentheses after if and before {

You actually don't need mediaqueries in JS to do your task the right way. First of all: how to work with media queries in JS. You can use matchMedia. Here is a brief documentation.
Here is a simple example:
var smallMatcher = matchMedia('(max-width: 480px)');
var biggerMatcher = matchMedia('(max-width: 1024px)');
var run = function(){
if(smallMatcher.matches) {
//run code for small
} else if(biggerMatcher.matches){
//run code for bigger
} else {
//run code for else
}
};
//now run it
run();
//in case you need to dynamically change on resize
//use addListener
smallMatcher.addListener(run);
biggerMatcher.addListener(run);
But as said, you don't need this. What you actually need to do is simple separation of concerns. Don't mix your behavior with your CSS. Simply add focus/blur or focusin/focusout events, the add or remove a class and do everything else in CSS.
This should result in clean and simple code, here is an example:
$('#searchbox')
.on('focus', function(){
$(this).closest('form').addClass('focused-field');
})
.on('blur', function(){
$(this).closest('form').removeClass('focused-field');
})
;
Everything else can and should be handled in CSS.
And In case you need the modify the style for the input button also if the button itself is focused and not only the search input you can see the following fiddle.

Add Hover CSS to table cells processed in javascript

I'm currently using the below code to colour the cells based on their value:
cell.each(function() {
var cell_value = $(this).html();
if (cell_value == 0){
$(this).css({'background' : '#DF0101'});
} else if ((cell_value >= 1) && (cell_value <=10)) {
$(this).css({'background' : '#FF7C00'});
} else if (cell_value >= 8) {
$(this).css({'background' : '#04B404'});
}
});
I've also added the CSS to the stylesheet:
td:hover{
background-color:#CA2161;}
So how can I make it so that on hover the cells processed in the javascript will change colour? At the minute they won't change at all, they just stay as the colour processed above^^^

Just try to bind an hover function to the "tds" of your table like this
$('td').hover(function(){
$(this).css('background-color', '#CA2161');
});
and if you want to remove the colour on mouse out you can try this
$( "td" ).hover(
function() {
$(this).css('background-color', '#CA2161');
}, function() {
$(this).css('background-color', '');
}
);

EDIT: Turns out you want the colors to leave instead of show when you hover. Simple change.
Okay first of all, you should separate these out into CSS classes:
.ZeroValue {
background:'#DF0101';
}
.ValueBetween1And10 {
background:'#FF7C00';
}
.ValueOver8 {
background:'#04B404';
}
.ValueTransparent {
background:transparent !important;
}
Add the above classes on $(document).ready() based on their values:
if(cell_value === 0){
cell.addCLass('ZeroValue');
} else if((cell_value >= 1) && (cell_value <= 10)){
cell.addClass('ValueBetween1And10');
} else if(cell_value >= 8){
cell.addClass('ValueOver8');
}
Then just dynamically add the transparent class when you hover, removing it when you leave:
cell.on({
mouseenter:function(){
$(this).addClass('ValueTransparent');
},
mouseleave:function(){
$(this).removeClass('ValueTransparent');
}
});
Or if there was a unique color to each item and you wanted to temporarily remove that, you would just create a function:
function classByValue(cell,cell_value){
if(cell_value === 0){
cell.addCLass('ZeroValue');
} else if((cell_value >= 1) && (cell_value <= 10)){
cell.addClass('ValueBetween1And10');
} else if(cell_value >= 8){
cell.addClass('ValueOver8');
}
}
This will clear any of the classes when the mouse enters, and then re-add the class based on cell_value when mouse enters. Then dynamically apply on load and when mouseleave. The $(document).ready():
cell.each(function(){
classByValue(this,this.val());
});
And the hover:
cell.on({
mouseenter:function(){
$(this).removeClass('ZeroValue ValueBetween1And10 ValueOver8');
},
mouseleave:function(){
classByValue($(this),$(this).val());
}
});
There you have it, multiple ways to accomplish your goal. You might need to modify $(this).val() to appropriately reflect the value of that specific cell, but without your HTML I can't really determine that.
As a side, that last option with >= 8 should probably be reconsidered, because a value of 8 or 9 will never fire it.