I've made a website using pagepiling.js, this script adds the class 'active' on the section which is in the viewport. Now I want add a class on my body when my section1 is active like this:
$(document).ready(function() {
if ($('#section1').hasClass("active") === true) {
$('body').toggleClass("one");
}
});
It is working well (the class is added on the body) but when I scroll my section1 does not have the class active because I am now on section2, the class on the body is not removed. How can I fix it? I also tried:
$(document).ready(function() {
if ($('#section1').hasClass('active')) {
$('body').addClass('one');
}
else {
$('body').removeClass('one');
}
});
But it is not working.
You have to put your condition inside scroll event because you should check every time the user scroll :
$('body').on('scroll', function() {
if ( $('#section1').hasClass("active") ){
$('body').toggleClass("one");
}
});
Hope this helps.
Now I want add a class on my body when my section1 is active
You actually don't need to.
PagePiling.js adds a class to the body element for you with the form pp-viewing-page2. You can check it in your DOM inspector in the demo page.
But if you still want to add a class, just use the callbacks the plugin provides, like this:
$('#pagepiling').pagepiling({
afterLoad: function(anchorLink, index){
if(index == 1){
$('body').addClass('one');
}else{
$('body').removeClass('one');
}
}
});
Related
I've got this function that adds a class to a sibling element inside the main parent.
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('div[data-answer="1"]').addClass('test-class');
} else {
}
});
When this executes, it adds a class to any div that has this attribute because the same code appears several times on the page:
[data-answer="1"]
I was wondering if it was possible to add the class only to its sibling div with that data attribute, without adding a class to all of them on the page? If that makes any sense at all? I'm new to javascript so please bear with me.
Use siblings() function of jquery
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('#Correct').siblings('div[data-answer="1"]').addClass('test-class');
} else {
}
});
Use .find() and .first() to get the first matching element only.
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('#Correct').find('div[data-answer="1"]').first().addClass('test-class');
} else {
}
});
Hy guys, I would like to know how remove css styles after click event,
In fact at the first click I add css and remove some other things but I would like at the second click get the same css code at the beginning.
$('#show').click(function (){
$('.sub-menu').css('width', '185px');
$('.sub-menu').css('-webkit-transform', 'none');
$('.sub-menu').css('transform', 'none');
// and second click
$('.sub-menu').css('width', '');
$('.sub-menu').css('-webkit-transform', 'scale(0)');
$('.sub-menu').css('transform', 'scale(0)');
})
I don't want use toggleclass method cuz I don't want touch the css file.
Thanks.
A very simple option is to keep some kind of boolean marker.
var applied = false;
$('#show').click(function() {
if (!applied) {
$('.sub-menu').css('width', '185px');
$('.sub-menu').css('-webkit-transform', 'none');
$('.sub-menu').css('transform', 'none');
applied = true;
} else { // and second click
$('.sub-menu').css('width', '');
$('.sub-menu').css('-webkit-transform', 'scale(0)');
$('.sub-menu').css('transform', 'scale(0)');
applied = false;
}
})
You mentioned that you don't want to touch the css file. How about you create a css rule using jQuery and append it to the head tag.
var rule = $('<style>.myclass{width:185px; -webkit-transform:none; transform:none;}</style>');
$('html > head').append(rule);
$('#show').on('click',function(){
$('.sub-menu').toggleClass('myclass');
});
I'm trying to make my links slide down over the page when the mobile nav is clicked and the content to disappear so only the links are shown. I have got this basically working but the .displayNone class will not remove when I click the mobilenav again and I'm a bit dumfounded as to why.
$(document).ready(function() {
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('.displayNone');
if(status){ $('.wrapper').removeClass('.displayNone'); }
else { $('.wrapper').addClass('displayNone'); }
});
});
Bit of newbie to all this. Anything obvious that anyone can see wrong with this?
Use toggleClass(),
$('.wrapper').toggleClass('displayNone');
And, jQuery's xxxClass() functions expect the name of the class, not the selector, so leave off the . class selector.
When adding/removing classes, just use displayNone, not .displayNone (note the dot!).
Also there's a toggleClass() function which saves you from doing the status thing, which means you just need to do
$('.wrapper').toggleClass('displayNone');
your are doing bit wrong
var status = $('.wrapper').hasClass('.displayNone');
when you use hasClass, addClass or removeClass then you don't need to have '.' dot before class name.
so correct way is
var status = $('.wrapper').hasClass('displayNone');
your code after correction
$(document).ready(function() {
$('#hamburger').on('click', function() {
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('displayNone');
if (status) {
$('.wrapper').removeClass('displayNone');
} else {
$('.wrapper').addClass('displayNone');
}
});
});
You can use :
$('.wrapper').toggleClass("displayNone");
Final code :
$(document).ready(function(){
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
$('.wrapper').toggleClass("displayNone");
})
})
I'm trying to append a class to a div when its click and remove when its clicked a second time I currently have this has my script -
$(".project").click(function(){
if ($(".project-expand", this).is(':visible')) {
$(".project-expand",this).hide(1000);
$('.project').delay(1000).queue(function(){
$(".project").removeClass('item-dropped').clearQueue();
});
} else if ($(".project-expand", this).is(':hidden')) {
$(".project-expand").hide(1000);
$(".project-expand",this).show(1000);
$(".project").addClass('item-dropped');
}
});
But this adds the "item-dropped" class to all of my divs that have a class "project" when I change the code to -
$(".project", this).addClass('item-dropped');
It doesn't do anything, where am I going wrong here?
Instead of using the class selector $('.project') you could simply use the target of the click event ($(this)):
$(".project").click(function () {
var project = $(this);
var projectExpand = $(".project-expand", this);
if (projectExpand.is(':visible')) {
projectExpand.hide(1000);
project.delay(1000).queue(function () {
project.removeClass('item-dropped').clearQueue();
});
} else if (projectExpand.is(':hidden')) {
$(".project-expand").hide(1000);
projectExpand.show(1000);
project.addClass('item-dropped');
}
});
Additional Info :
The reason what you were trying to do didn't work originally is because $('.project', this) looks for elements with class project inside the current element (i.e. looking for a project inside a project)
You have to use $(this) to add class on the clicked item:
$(".project").click(function(){
if ($(".project-expand", this).is(':visible')) {
$(".project-expand",this).hide(1000);
$(this).delay(1000).queue(function(){
$(this).removeClass('item-dropped').clearQueue(); // Here
});
} else if ($(".project-expand", this).is(':hidden')) {
$(".project-expand").hide(1000);
$(".project-expand",this).show(1000);
$(this).addClass('item-dropped'); // Here
}
});
you have to use :
$(this).addClass('item-dropped');
concept fiddle
This is what I want it to do...
When div called 'bd' is clicked > check if the div with id of 'ump' has a class of 'active' >
if it does, get div with class of 'brandDump' and slide it up slowly, hide it, and remove the class of 'active' > else, take the div with class 'brandDump' and slide it down, show it, and add class of 'active'
Nothing is happening when I click div.bd. What am I doing wrong?
Fiddle link and code below.
http://jsfiddle.net/K2V8f/36/
<div class="bd">cool</div>
<div class="brandDump" id="ump">works</div>
<div>shape</div>
.brandDump {
background-color:#fff;
width:100px;
display:none;
}
.bd {
width:100px;
height:100px;
background-color:#000;
}
$(".bd").click(function () {
if ("#ump".hasClass("active")) {
$(".brandDump").slideUp("slow");
$(".brandDump").hide();
$(".brandDump").removeClass("active");
} else {
$(".brandDump").slideDown("slow");
$(".brandDump").show();
$(".brandDump").addClass("active");
}
});
Updated fiddle
You need to use callbacks when the slideUp finishes.
$(".bd").click(function () {
if ($("#ump").hasClass("active")) {
$(".brandDump").slideUp("slow", function () {
$(".brandDump").removeClass("active");
});
} else {
$(".brandDump").slideDown("slow", function () {
$(".brandDump").addClass("active");
});
}
});
Also there was an error with ("#ump")... should have been $("#ump")
The problem is that you had:
"#ump".hasClass(...
...when you should've had:
$("#ump").hasClass(...
But note also that the .slideUp() and .slideDown() methods hide and show your element(s) so you don't need to call .hide() and .show() as well. Also it is more efficient to chain jQuery methods together if you want them to operate on the same element:
$(".bd").click(function () {
if ($("#ump").hasClass("active")) {
$(".brandDump").slideUp("slow")
.removeClass("active");
} else {
$(".brandDump").slideDown("slow")
.addClass("active");
}
});
Demo: http://jsfiddle.net/K2V8f/50/
"check if the div with id of 'ump' has a class of 'active' > if it does, get div with class of 'brandDump' and slide it up slowly"
The div with id ump is the same div as the one with class brandDump. I'm not sure why you're talking about them as if they're two different divs when in fact your code seems to then use the #ump and .brandDump selectors interchangeably to select the one div, but if you treat them as one more consistently you can cut your function down to one line:
$(".bd").click(function () {
$(".brandDump").slideToggle("slow").toggleClass("active");
});
Demo: http://jsfiddle.net/K2V8f/51/