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/
Related
The jQuery hasClass() isn't working as it should. When I click on text it should give it a class (and it does), but it doesn't check if it has that class?
There is my code!
$(document).ready(function() {
$('#example').on('click', function() {
$(this).addClass("redText");
});
if ( $('#example').hasClass("redText") ) {
$('#example').addClass("bigText");
}
});
.redText{
color: red;
}
.bigText{
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Hey</div>
You're only adding the redText class when you click the div. When the if runs that class has not yet been added.
You need to either move the if into your click function, or remove the click function entirely.
I think you might want to do this, but I'm not completely sure;
$(document).ready(function() {
$('#example').on('click', function() {
if ( $('#example').hasClass("redText") ) {
$('#example').addClass("bigText");
}
else{
$(this).addClass("redText");
}
});
This is a total guess, can you please try to explain what it is that you are trying to achieve in more detail.
Your doing your if test only once when the page loads. You'd want to do that test when the element gets clicked and to show that, I've changed addClass to toggleClass so you can keep clicking.
$(document).ready(function() {
$('#example').on('click', function() {
$(this).toggleClass("redText");
if ( $('#example').hasClass("redText") ) {
$('#example').addClass("bigText");
}
});
});
.redText{
color: red;
}
.bigText{
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Hey</div>
What you are trying to do can be achieved in a single statement like below:
$('#example').on('click', function() {
$(this).addClass("redText bigText");
});
The reason why your code is not working is because: Upon document load, first click listener gets registered. After which if() statement executes which does a lookup on all the redText class elements and finds none, and thus no bigText class gets added. Its not a LIVE listener that you are trying to achieve.
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');
}
}
});
I have a div that contains an image :
<div class="HD">
<img class="image1"src="img/myimage.png">
</div>
the CSS applied to it is :
.HD img {
position:absolute;
top:570px;
left:1120px;
width:30px;
height:90px;
cursor:pointer
}
I want to apply a click function to the image inside the div. However, when I give an image id or class and use that to create the function the javascript does not fire. When the div does not have an image and I use the class the javascript works as expected.
Below is the Javascript function :
$(".HD").click(function () {
if($('.UpperDiv').attr('data-visible') == "hidden") {
$('.UpperDiv').attr('data-visible', 'visible');
$('.UpperDiv').animate({
opacity:1
// top:'250px'
});
} else {
$('.UpperDiv').attr('data-visible','hidden');
$('.UpperDiv').animate({
opacity:0
// top:'250px'
});
}
});
What could be the reason ? What is wrong with my code ?
How can I fire the javascript, when the user clicks on a div that contains an image?
For reference, this is the website I am trying to make, and the original working version.
Can't you just use .toggle?
$(".HD").toggle(400);
Or .fadeToggle?
$(".HD").fadeToggle();
Try :
$(".HD").on({
click : function(){
if($('.UpperDiv').attr('data-visible')=="hidden")
{
$('.UpperDiv').attr('data-visible','visible');
$('.UpperDiv').animate({
opacity:1
// top:'250px'
});
}else{
$('.UpperDiv').attr('data-visible','hidden');
$('.UpperDiv').animate({
opacity:0
// top:'250px'
});
}
}
}, 'img');
$(".HD > img").click(function () { });
Use this and try.
I want to fold down the div onclick event and on another click want to fold up the div
my jquery is following
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").show("fold", {}, 500);
}
else {
$(".reply").hide("fold", {}, 500);
}
});
and the div I want to fold is having display:none at the initial point
In My reply tag
< div class="reply" style="display:none; " > at the initial reply is not shown
so when I click then div is fold down but on other div it is not fold up
Please help me
$(".fold_reply").click(function() {
$(".reply").toggle(500)
}
Toggle will show or hide the element depending on its current state, eliminating your if block.
Check this fiddle out for an example:
http://jsfiddle.net/z9rGz/3/
yes #levib answer is short and correct one to use. Another alternative is that you can use slideUp() and slideDown() functions.
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").slideDown("slow");
}
else {
$(".reply").slideUp("fast");
}
});
You should use the jquery .toggle or jquery UI .toggle method which does just that.
But the error in your logic is the $('.reply').css('display', 'none'). This sets the display to none. It does not check if it is none...
If you had to use that code you should change it to
if ( $('.reply').css('display') === 'none') )
Use the jQueryUI version of toggle() since you seem to be using a jQuery UI effect
.toggle( effect [, options ] [, duration ] [, complete ] )
Reference: http://api.jqueryui.com/toggle/
$(".fold_reply").click(function() {
$(".reply").toggle("fold", 500);
})
$(".fold_reply").click(function() {
var style=$('.reply').css('display');
if (style=='none') {
$(".reply").show(500);
}
else {
$(".reply").hide(500);
}
});
<input type="button" class='fold_reply' value="button">
<div class='reply'>
text<br/>text<br/>text<br/>text<br/>text
</div>
Working Demo
I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.
It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});
You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/