I've got the functionality that allows you to open and close the hidden dropdown that you can see in the link but I want to also be able to close the already open dropdown if you click the same image again.
At the moment I can only close the ones on the outside of the clicked element.
Main fragment of code (wired up on ready), complete working sample - JsFiddle:
function close() {
$('.slide').removeClass("active");
$('.slide').css("padding-bottom", 0 + "px");
}
function open() {
$(this).addClass("active");
$(this).css("padding-bottom", height);
}
$('.slide').on('touchstart click', function() {
close();
if ( $(this).hasClass("active") ) {
close();
}
if ( !$(this).hasClass("active") ) {
$(this).addClass("active");
$(this).css("padding-bottom", height);
}
});
HTML:
<div class="slide"> title
<div class="js-slide">content of slide hidden via CSS when
"active" class is not present</div>
</div>
This change to your code seems to achieve the desired effect:
$('.slide').on('touchstart click', function() {
if ( $(this).hasClass("active") ) {
close();
} else {
close();
$(this).addClass("active");
$(this).css("padding-bottom", height);
}
});
Because your close() function removes the active class from the element, you need to have it in a place where it won't mess with the conditions your checking around the active class. Moving it inside the if blocks is an easy and quick change to fix the issue. Some people might be bothered by the way close() is repeated in both blocks. If you're one of those people, refactor appropriately. Just don't do the obvious-seeming move close() outside the if/then because that will cause this issue to re-appear.
Fiddle: https://jsfiddle.net/960cm7ux/1/
Related
Here's my function,
$(document).ready(function () {
$('.a').click(function () {
var here = $(this).next('.b');
if (here.is(":visible")) {
here.hide();
} else {
here.show();
}
return false;
});
});
So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.
How can I close tab just by clicking somewhere on webpage also by on the button?
I end up searching for this on almost every project, so I made this plugin:
jQuery.fn.clickOutside = function(callback){
var $me = this;
$(document).mouseup(function(e) {
if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
callback.apply($me);
}
});
};
It takes a callback function and passes your original selector, so you can do this:
$('[selector]').clickOutside(function(){
$(this).removeClass('active'); // or `$(this).hide()`, if you must
});
Nice, chainable, elegant code.
On document click, the closest helps to check whether the tab has been clicked or not:
$(document).click(function (e) {
if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
$('.b').hide();
}
});
You want to check for a click on the body :
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
menu would be the id of the menu.
If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.
Check this implementation
jQuery(document).ready(function() {
$(document).on('click','body, #btn',function(ev){
ev.stopPropagation()
if(ev.target.id== "btn"){
if($('#modal').is(':visible')) {
$('#modal').fadeOut();
} else{
$('#modal').fadeIn();
}
} else {
$('#modal').fadeOut();
}
});
});
html, body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
Click Me!
</button>
<div id="modal" style="background-color:red;display:none;">
BLA BLA BLA
</div>
To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -
$('body').click(function(e) {
if ( 0 === $(e.target).parents('#container-id').length ) {
/// clicked outside -> do action
}
})
you have to add a click listener to the parent element, like here:
$('.parent-div').click(function() {
//Hide the menus if visible
});
Also because click events bubbled up from child to the parent,
you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:
//disable click event on child element
$('.child-div').click(function(event){
event.stopPropagation();
});
I'm fairly new to JS and I can't quite figure out how to get this to work. Any help is very much appreciated! So I have a hamburger button that, when clicked, simultaneously toggles the animation of a slide-in panel and hamburger animation by adding a class to the panel and button. I have successfully added a click event to close the panel if user clicks anywhere outside of the panel but I can't get the hamburger button to remove the added classes as well. I'd like the user to have both options (click button or click outside of panel).
HTML:
<ul class="nav nav--right">
<li class="v-button--slide-right" id="toggle-menu">
<button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
<span class="toggle"></span>
<span class="menu">menu</span>
</button>
</li>
</ul>
<nav id="menu--slide-right" class="nav menu--slide-right">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
</ul>
</nav><!-- end slide menu -->
JS:
jQuery(document).ready(function($) {
var openSidebar = function() {
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
}
var closeSidebar = function() {
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
}
$('.toggle-menu').click(function(event) {
event.stopPropagation();
openSidebar();
});
$(document).click(function(event) {
if (!$(event.target).closest('.menu--slide-right').length) {
closeSidebar();
}
});
});
And here's a JSFIDDLE to demo what I have so far
Very simple fix - add an "open" variable which changes to true when the sidebar opens, and evaluate this variable in your click event handler.
Add the variable:
var open = false;
Add the variable mutators to your open and close functions:
var openSidebar = function(){
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
open = true; //This is the new part!
}
Then toggle which function to call on button click - I achieve this with a ternary operator:
$('.toggle-menu').click( function(event) {
event.stopPropagation();
var toggle = open ? closeSidebar : openSidebar;
toggle();
});
Check the fiddle here
A quick and dirty way to fix this is to change your openSideBar function to use jQuery's toggleClass method, i.e.:
var openSidebar = function() {
$('.menu--slide-right').toggleClass('is-active');
$('.toggle-menu').toggleClass('is-active');
$('#toggle-menu').toggleClass('toggle-close');
}
This way when a user clicks on the button, it will toggle the class on/off, and you already have the code to turn it off when they click outside of the button.
Check it out here: https://jsfiddle.net/5ssccz2a/2/
jQuery .toggleClass(): http://api.jquery.com/toggleclass/
The simplest and most robust way would be to check if one of your classes are active on the button. So also no extra variables are needed. I would recommend, deciding on one class to control the others.
$('.toggle-menu').click(function(event) {
if ($('.toggle-menu').hasClass('is-active') {
closeSidebar();
}
else {
openSidebar();
}
event.stopPropagation();
});
Test for .is-active class before deciding whether to run closeSidebar() or openSidebar() when .toggleMenu is clicked.
$('.toggle-menu').click( function(event) {
event.stopPropagation();
if( $(this).is('.is-active') ) {
closeSidebar();
} else {
openSidebar();
}
});
DEMO
Or, using the ternary operator:
$('.toggle-menu').click( function(event) {
event.stopPropagation();
$(this).is('.is-active') ? closeSidebar() : openSidebar();
});
DEMO
I'm prototyping a web app dealing with lots of views that are off screen until activated by an element currently on screen. Example:
<div class='current' data-view='home'>
<a href='#' data-target='menu'>View Menu</a>
</div>
<div data-view='menu'>
<a href='#' data-target='home'>Go back home</a>
</div>
Right now I've got the jQuery rigged to find the matching value of "data-target" to "data-view". When it finds the match, it toggles the class "current" between the two views.
Anyways! I'm hoping someone could help me figure out a good way to apply my enter and exit animations to the toggled elements. Here's what I tried:
$('[data-target]').on('click', function () {
var parentView = $(this).parents('[data-view]'),
currentView = $('.current');
function finishedAnimation() {
currentView.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function() { currentView.removeClass(); });
};
if (parentView.data('view', 'home')) {
targetView.addClass('moveFromTop');
currentView.addClass('moveToBottom');
finishedAnimation();
}
else if (parentView.data('view', 'menu')) {
targetView.addClass('moveFromBottom');
currentView.addClass('moveToTop');
finishedAnimation();
}
$(this).parents('body').find('[data-view=' + $(this).data('target') + ']').addClass('current');
});
It works on the first click, but on the subsequent click to return home it fails to perform the animation correctly.
I've been digging around and switch cases look like a viable option (?). If anyone has guidance on a better approach it would be much appreciated.
Not exactly sure how your setup works, but I prefer to use an object ( as an interface ) for something like this:
function handleView( view ) {
views = {
home : function(){ /* Do stuff with view here */ },
menu : function(){}
}
views[view]()
}
$('[data-target]').on('click', function (e) {
e.preventDefault()
view = $(this).parent().data('view') /* This should return 'view name' */
handleView( view );
});
Remember that if you're adding a class that has a transition associated with it, you'll need to remove it too.
so targetView.addClass('moveFromTop'); needs targetView.removeClass('moveFromTop'); in order to properly toggle.
I'm currently using the following code to allow a user to show/hide a div on click.
When clicking anywhere outside of the div, it closes the div.
However, there is a link within the div which can open a lightbox. When a user goes to close that lightbox, it also closes the div that the link was contained. Is there anything I can add into the script to stop that from happening?
$(document).ready(function(){
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
var $div = $(this).next('.info-container');
$(".info-container").not($div).slideUp();
if ($div.is(":visible")) {
$div.slideUp()
} else {
$div.slideDown();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
});
<a class="dropdown-link" href="#"><div class="dropdown dropdown-processed">More info</div></a>
<div class="info-container" style="display: none;">Video preview: <a class="movie-link" href="videourl"></a></div>
I'm using Magnific Popup for the lightbox: http://dimsemenov.com/plugins/magnific-popup/
My JavaScript knowledge is pretty basic so any help is appreciated.
In the "click to close div function, you can check if the lightbox is on or not. A simple if ($("#lightbox").css("display") == "none") should be able to do the trick
EDIT: put this line after the $(document).ready line
var state = 0; // default state
$('.movie-link').click(function() { state = 1; }); // state = 1, lightbox on
in the source code, on line 384, insert this code
state = 2; //state = 2, lightbox close button clicked
the idea is not firing the "close div" function when the state is 1 (lightbox is on and clicking random stuffs inside, or outside the lightbox) or 2 (lightbox's close button got clicked), and return state to 0 when it was 2
so instead of the if I provided in the comment use this
if (state == 2) {
state = 0;
} else if (state == 0) {
//rest of the code
}
this is just something I put together and haven't tested yet, so I don't actually know if it works or not so just back up your js files just in case.
EDIT 2:
remove all the changes in edit 1 and use this on instead of the if (state == 2) {
if (e.target != $('.mfp-bg')[0] and e.target != $('.mfp-wrap')[0]) {
EDIT 3
var e_class = $(e.target).attr('class');
if (e_class != 'mfp-close' && e_class != 'mfp-container') {
working example: http://imgcrash.comeze.com/test.html
I'm not 100% without actually testing this out but you may be running into issues with $(document).click(...); since clicking anywhere on the document would trigger this event.
When you close the popup you're probably triggering this event and sliding up the info-container div.
It seems that you're looking for clicks on the divs with the class .dropdown. Why not use something like:
$('.dropdown').click(function(e) { ... });
Try this:
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
evt.stopPropagation(); //We stop the propagation of the event
//Changed it to slideToggle and added stop to prevent weird animation
//on multiple clicks
$(this).next('.info-container').stop().slideToggle()
});
$(document).click(function(e){
//Check if it has the class info-container
if (!$(e.target).hasClass("info-container")) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
Fiddle
I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you
Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.
I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});