I have situation like this:
<body class="site pace-done">
<div class="container fade-in sppb-animated">
bla bla bla
</div>
</body>
What I want to do, is to add "fade-in sppb-animated" classes to div after "pace-done" class appear in body class. As long as "pace-done" class does not show in body class, "fade-in sppb-animated" should be removed. How to this is JS/Jquery?
I will be gratefull for any help with that.
I assume you are putting the class on body based on some logic present on server (else this is useless and rather you should use css selectors) .
so you can do some like i have done in this example https://jsbin.com/fidolexaja/edit?html,js,console,output
You can use $(window).load() event which fires after whole content is loaded.
$(window).load(function() {
$('.container').addClass('fade-in sppb-animated');
});
create a function that will add the class
$(document).on('addClass',function(){
// add class
}
);
add a function that will remove the class
$(document).on('removeClass',function(){
// remove class
}
);
Now, you can throw a event to tell when to add/remove class
$(document).trigger('addClass'); // to addClass
$(document).trigger('removeClass'); // to removeClass
Based on what you asked I made a script that will check if the body has an update to the class, if body has the class pace-done, it will update container and add the class fade-in. this uses setinterval and checks every 1 second
$(document).ready(function(){
$('.add').click(function(){
$('body').addClass('pace-done');
});
$('.remove').click(function(){
$('body').removeClass('pace-done');
});
setInterval(function(){
if ($("body").hasClass("pace-done")) {
$('.container').addClass('fade-in');
}else{
$('.container').removeClass('fade-in');
}
},1000);
});
http://codepen.io/ZetCoby/pen/mVXJQK
also I suggest that you update the container div at the same time with the body, do you have some sort of js that does something to the body? or are you using some external plugins that modify the body?
Related
I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.
use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO
Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});
If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/
I'm trying to write a javascript/jquery function that looks inside a div with a specific ID and removes a specific class from any child div(s) with a specific class.
E.g. the function should remove the class removeme from any divs inside div id="foo":
<div id="foo" onClick="openGame('foo')">
<div class="bar removeme"></div>
</div>
My attempt at writing this function:
function openGame(divid) {
var container = document.getElementById(divid);
var responses = container.getElementsByClassName("bar");
while (responses[0]) {
responses[0].removeClass('removeme');
};
}
Please note I'm a super beginner in JS and not super familiar with while loops :/
If you want to use jQuery to achieve this.
$(document).ready(function() {
$('div#foo').click(function() {
$(this).find('.removeme').removeClass('removeme');
});
});
This creates a click event on your element with the id "foo" that will find every elements inside of it and remove the class "removeme" from it.
I would use JQuery for this job:
$("#foo").find("div").removeClass("removeme");
This will find all children of #foo and remove the class .removeme.
I have a #myDiv And i want, when page load, ad class to #myDiv
E.G. Page load, #myDiv.class
I use this code but it's not working:
$('#sky').addClass(‘animate-in’);
$(document).ready(function(){ is called whn the doucument is ready.
and your addClass .. use single or double quotes to enclose the class ( not ‘ )..
try this...
$(document).ready(function(){
$('#sky').addClass('animate-in');
});
UPDATED
another div
<div id="anotherdiv"></div>
call the click function and the jquery selector to which u want to change the class
$('#anotherdiv').click(function(){
$('#sky').addClass('animate-in'); //or any other new class
});
go thorugh the selector jquery documentation..
http://api.jquery.com/category/selectors/
You need to use single or double quote to enclose your class.
Change
$('#sky').addClass(‘animate-in’);
To
$('#sky').addClass('animate-in');
or
$('#sky').addClass("animate-in");
you can do it like this
$(function () {
$('#sky').addClass('animate-in');
});
OR
$(function () {
$('#sky').addClass("animate-in");
});
use this code
<body onload='$("sky").addClass("animate-in")' >
Please check that already any classes are available in $("#sky") and if u want to use only 'animate-in',
Can try this,
$("#sky").attr('class','');
$("#sky").addClass('animate-in');
so that we can come to know that, already existing things are cleared and adding a new one
I have the div which is generated when page loads as below.
<div class="redactor_ redactor_editor"></div>
How can I add a class .example onto it via jquery like below?
<div class="redactor_ redactor_editor example"></div>
Thank you very much!
Try addClass this,
$('.redactor_').addClass('example');
just select element using any selector
$(selector).addClass('example');
demo
you can add class to element by using the .addClass()
syntex
.addClass( className )
className One or more class names to be added to the class attribute of each matched element.
so now this is you want
$('.redactor_ redactor_editor').addClass('example');
try this :
<pre>
$(window).load(function () {
$('.redactor_ redactor_editor').addClass('example');
});
</pre>
reference :
addClass
You can set the class regardless of what it was by using .attr() like this,
If the html is like this,
<div class="redactor_ redactor_editor"></div>
then the selector will be like the following,
$(document).ready(function() {
$('.redactor_redactor_editor').attr('class', 'redactor_redactor_editor example');
});
Since your div tag's class name has a space after the underscore sign(i.e. redactor_ ) the following way must be applied to select the element.(<div class="redactor_ redactor_editor"></div>)
$(document).ready(function() {
$("div[class='redactor_ redactor_editor']").attr('class', 'redactor_ redactor_editor example');
});
If you are looking for adding a new css class to an element that already has a class then-
DEMO
HTML-
<div class="one">example</div>
CSS-
.one{color:red;}
.two{color:green}
jQuery-
$(function(){
$('.one').addClass('two');
});
If you are looking for removing the old css class and add a new class-
DEMO
jQuery-
$(function() {
$('.one').removeClass('one').addClass('two');
});
I have a anchor tag and would like to add a class to it in my document ready function. How do I do that?
Thanks,
Sachin
$(function() {
/* domReady */
$('a').addClass('yourclass');
});
of course if your link has an id use a more specific selector like
$('#yourlink').addClass('yourclass');
$(document).ready(function() {
$('#id1_of_a, #id2_of_a, #id3_of_a').addClass('myClass');
});
$(function() {
$('a:first').addClass('yourclass'); // suppose add class to first <a>
});
or
$('a:eq(1)').addClass('yourclass'); // suppose add class to second <a> and so on
or
$('a#some').addClass('yourclass'); // suppose add class to <a> have id 'some'