I have created this DEMO
As you can see there is a Show Div link. If you click the link then my jquery code making this:
$(document).ready(function() {
$('.click').click(function (e) {
e.preventDefault();
$('.popup').animate({'opacity':'.50'}, 300, 'linear');
$('.popup').css('display', 'block');
$(this).parent().next('.openingdiv').toggleClass('height');
$(this).toggleClass('zindex');
})
});
So when you click the Show Div link then you can see there is a close link in the .openingdiv. I want to add when the close button is clicked then .popup and .openingdiv closing.
You can add this click event on your code:
$('.closediv a').click(function (e) {
e.preventDefault();
$('.popup').animate({'opacity':'0'}, 300, 'linear');
$('.popup').css('display', 'none');
$(this).parents('.openingdiv').toggleClass('height');
})
If you want .opening div close before .popup div then you should wait 1s as .opening div transition and then execute the code for .popup. You can use a setTimeout. Try:
$('.closediv a').click(function (e) {
e.preventDefault();
$(this).parents('.openingdiv').toggleClass('height');
setTimeout(function(){
$('.popup').animate({'opacity':'0'}, 300, 'linear');
$('.popup').css('display', 'none');
}, 1000);
})
DEMO
You can add click handler for close button as shown below and there you need to remove height class
$('.closediv a').click(function(e){
e.preventDefault();
$('.popup').animate({'opacity':'1'}, 300, 'linear');
$('.popup').css('display', 'none');
$(this).closest('.openingdiv').removeClass('height');
});
DEMO
Related
This drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});
Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});
I have a little function that makes my headerbar class fixed after i click on the menu button.
It works but when i click on the button again the headerbar stays fixed.
Here is my javascript:
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
This code makes the headerbar class fixed:
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
So basically I want it to change back to normal when I click the button again.
Try this:
JavaScript
$(function () {
$('.menuBtn').click(function (e) {
e.preventDefault();
$(this).toggleClass('is-active').toggleClass('fixed-position');
$('.headerBarm').toggleClass('fixed-position');
$('nav').slideToggle();
});
});
CSS
.fixed-position {
position: fixed;
}
This is my jsfiddle : https://jsfiddle.net/2ajo5jdx/
If you click on link-b a div fade-in,now if you click on link-c another div fadeIn too.I don't want more than one div at the same time.I want to disable click on link-c if link-b has been clicked already.
Is there a simple way?Thank you.
$('.b').on("click", function(e) {
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.c').on("click", function(e) {
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.c-div').addClass('active');
$('.c-div').fadeIn(400);
});
});
To add almost nothing to your code, you could use a flag, set it to true on each click in a link and to false on close
var some_link_opened = false;
$('.b').on("click", function(e) {
if (some_link_opened) return;
some_link_opened = true;
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.x').on("click", function(e) {
some_link_opened = false;
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('this').removeClass('active');
$('.a-div').fadeIn(400);
});
});
I'm not sure if that what you mean, but if you want to show just one div every time you can use the following solutio based on active class.
Hope this helps.
$('.b').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('.active').removeClass('active');
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.c').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('.active').removeClass('active');
$('.c-div').addClass('active');
$('.c-div').fadeIn(400);
});
});
$('.x').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('this').removeClass('active');
$('.a-div').fadeIn(400);
});
});
.b-div,.c-div{
display:none;
}
.x {
color:red;
}
.b,.c,.x{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="b">link-b</a>
<a class="c">link-c</a>
<a class="x">x</a>
<div class="a-div active">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="b-div">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="c-div">ccccccccccccccccccccccccccc</div>
Right now I've got a toggle that when you click it opens every toggle that is named 'content'. How can I make it so that the toggles are opened individually?
Fiddle: http://jsfiddle.net/4N6xj/embedded/result/
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$content.slideToggle(200);
});
});
Target the next() .content element from the clicked .toggle
$(document).ready(function(){
$(".content").hide();
$(".toggle").on("click", function(e){
$(this).next('.content').slideToggle(200);
});
});
FIDDLE
So I found this fiddle here: http://jsfiddle.net/8qPvp/4/
I thought I'd use it just for personal education purposes.
I'm really new with JS, and I noticed that the opened parent does not go back on click, like it opens. How could this be fixed?
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});
What about this:
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
$(document).click(function()
{
$('li > ul:visible').hide();
})
$('.menu li').click(function(e)
{
e.stopPropagation();
})
So by default i make whenever there is clicked ANYWHERE in the document, your visible menu will be hidden. However you don't want this to happen when you open a new menu(would be; made visible and made hiden directly). So i make a exception that catch when you want to open a new menu and i'll cancel the document click event.I use event.stopPropagation() to cancel a event.
jsFiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
}).mouseleave(function(){
$(this).children("ul").hide();
});
});
Check this fiddle http://jsfiddle.net/Aveendra/8qPvp/18/