CSS animation add class and remove class using Jquery - javascript

I have one question about add and remove class using css animation.
I have created this DEMO from codepen.io
In this demo you can see there is six round div. Also there is one link (Click here).
If you click to Click here button then you can see the CSS animation. So i want to add a jquery code. Like first the six round div is display:none; when you click Click here button then six round div open with animation but only one time. after then when you click again Click here button then six round div automatically remove with css animation.
Anyone can help me here ?

Check to see if the added class is present and remove/do animation if it is. Check out hasClass();
Edit: Add something similar to this in your handler:
var circle = $('.circle');
if (circle.hasClass('bounceInUp')) {
circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
$('.circle').addClass('animated bounceOutDown');
circle.removeClass('bounceOutDown').addClass('bounceInUp');
}
codepen

$(document).ready(function() {
$('.wrap').css('display', 'none');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').css('display', 'block');
$('.circle').addClass('animated bounceInUp');
$(this).parent('.note a').removeClass('.circle bounceInUp');
$(".note a").off('click'); //remove click handler.
//Adding the new click handler
$(".note a").click(function(e) {
e.preventDefault();
$('.circle').addClass('animated bounceOutDown');
$(this).parent('.note a').removeClass('.circle animated bounceOutDown');
$(".note a").off('click'); //remove click handler again.
});
});
});
Add a second click handler to the button

First of all you need to do to delete the following line within the .circle
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
Then you can use Mouser's and sareed's code:
$(document).ready(function() {
var circle = $('.circle');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').css('display', 'block');
if (circle.hasClass('bounceInUp')) {
circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else
{
$('.circle').addClass('animated bounceOutDown');
circle.removeClass('bounceOutDown').addClass('bounceInUp');
}
});
});
I hope this will help you.

Related

bind and unbind along with toggle

I need to show a div .overlay to a user on click and the user must not be able to scroll or move from that page unless he clicks on it again and closes it.
So far i have tried with the below code and it works
$('#clicker').click(function() {
$(".overlay").toggle();
$('html').css('overflow', 'hidden');
$('body').bind('touchmove', function(e) {
e.preventDefault();
});
});
but the problem is when the user clicks again the div disappears but the scroll is missing.
i need to add the below code so it works...
$('html').css('overflow', 'scroll');
$('body').unbind('touchmove');
can someone help me on how unbind and add the above js code on the second click or toggled?
You could test the visibility of the overlay and execute the appropriate code:
$('#clicker').click(function() {
if ($(".overlay").toggle().is(':visible') {
$('html').css('overflow', 'hidden');
$('body').bind('touchmove', function(e) {
e.preventDefault();
});
} else {
$('html').css('overflow', 'scroll');
$('body').unbind('touchmove');
}
});
If you add a conditional into the touchmove function, you can check if the div is shown, and decide like that:
$('body').bind('touchmove', function(e) {
if($(".overlay:visible").length) {
e.preventDefault();
}
});

how to close notification when trigger clicked twice or outside element in jquery

I have a notification widget that will appear when I click the trigger and disappear when I click the trigger twice or click elsewhere in outside element.
How to do that?
$('.swt').click(function(){
$('.swt').removeClass('active');
$('.ctx').removeClass('ctx-active');
$(this).addClass('active');
});
var ccd = 1;
$('#add').click(function(){
$('#ad').addClass('ctx-active');
});
$('#msg').click(function(){
$('#ms').addClass('ctx-active');
});
$('#notif').click(function(){
$('#no').addClass('ctx-active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
demo code
Just change the removeClass and addClass with toggleClass. Here's the Documentation on toggleClass.
Here's a fixed JSFiddle.
For 'close when click outside', you will have to add a transparent div with full width and height behind #tooltip, and add a click eventListener.
You can use dblclick for double-click event handler and inside the event handler you can add checking like this one:
$(document).dblclick(function(e) {
if (e.target.id != "show" && !$(e.target).parents("#show").size()) {
//remove class
}
});
For the implementation you can see here : JSFiddle
Thanks for answers.
Finally i find the result for all the problems.
i just use sibling() and toggleclass() to fix the problems.
this is the update demo.
demo code
$('#add').click(function(){
$('#ms').removeClass('ctx-active');
$('#no').removeClass('ctx-active');
$('#ad').toggleClass('ctx-active');
$('#add').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#msg').click(function(){
$('#no').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#ms').toggleClass('ctx-active');
$('#msg').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#notif').click(function(){
$('#ms').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#no').toggleClass('ctx-active');
$('#notif').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
$('#ss').click(function(){
$('.ctx').removeClass('ctx-active');
$('.swt').removeClass('active');
});`

Jquery hidden not working with css animation

I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);

Slide Effects for Tabs Part 2

Ok so my original question got answered and now my slide effect only happens when I click in anywhere in my div region..here is the code:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs").click(function() {
$(this).effect( "slide", "medium" );
});
});
Now I'm wondering what if somebody wants to copy text from one of my tab regions? Every single time they try to highlight, the tab will slide away. How do I make it so that the tab region only slides when the actualy tab ul is clicked?
Use combination of mousedown and mouseup:
Demo Fiddle
var down=0;
$(document).ready(function(){
$("#tabs").mousedown(function(event){
down=event.clientX+"||"+event.clientY;
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
Updated code which prevent slidedown on right-click copy text:
Demo Fiddle 2
var down="||";
$(document).ready(function(){
$("#tabs").mousedown(function(event){
switch(event.which){
case 1:/*Left mouse button pressed*/
down=event.clientX+"||"+event.clientY;
break;
default:/*middle or right mouse button pressed*/
down="||";
}
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
You can use the event capturing option on click method. By using that, you can get the element on which the mouse is clicked. And then you can use the target object as below,
$('#tabs').click(function(e){
if(e.target.nodeName == 'P') {
e.stopPropagation();
return;
}
$(this).effect( "slide", "medium" );
});
Hope it will help.

On-click adding and removing background color of a table data(td)

i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.
jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.
You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });

Categories