I have a calendar in my page which have a more info button.
That button opens when clicked upon but do not close.
How can i close it?
Button:
$('a.cmoreinf').live('click', function() {
$('.ccontent').each(function() {
$(this).css('display','none');
});
$(this).closest('.calsingleentry').find('.ccontent').css('display','block');
return false;
});
Calendar Page
I don't have all the information needed to really answer this question but I believe you're wanting to have a modal appear on the first click, disappear on the second, appear on the third etc... basically toggling the display property. If so...
$('a.cmoreinf').on('click', function(e){
e.stopPropagation();
$('.ccontent').hide();
$(this).closest('.calsingleentry').find('.ccontent').toggle();
});
jQuery toggle()
The class ccontent is inside the div calsingleentry.
Use this:
$('a.cmoreinf').live('click', function() {
$('calsingleentry').find('.ccontent').each(function() {
$(this).css('display','none');
});
$(this).closest('.calsingleentry').find('.ccontent').css('display','block');
return false;
});
Related
I have a page with several popovers that are acting as additional information for products.
When functioning as intended a user should be able to click on a popover, and when they click on another popover the previous popover closes. This functionality already exists in my current code, however, when a user does this the previous popover's button does not have its toggle state reset. This means when the user clicks on the second popover and tries clicking on the original one they have to click twice (once to set the toggle back to original state, and once to reopen it).
I would like to know how to reset the toggle state of all other popovers when a new popover is opened.
You can see my current working code here:
http://codepen.io/kcarskadon/pen/BLJdkJ?editors=1010
Here is the current jquery I am using:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).hide()
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
Thanks for the help!
You're hiding the item, not using the popover hide function, try it like this:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).popover('hide');
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
I have a button which creates a pulldown in which you can select several categories.
Now i want this to close automatically when i click outside the pulldown.
Something like a lightbox or modal popup which closes if you click anywhere else on the page.
Now i have to click the button again to close it. If i dont and go elsewhere on the page, the dropdown stays visible (until i click it)
This is the code of the button:
$(function(){
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Is this possible?
thanks
Using jquery this is the code I used for a similar case scenario sometime ago:
$(document).click(function(event) {
if(!$(event.target).closest('.pulldown').length) {
if($('.pulldown').is(":visible")) {
$('.pulldown').slideUp()
}
}
})
You can read more about this in the original post How to detect a click outside an element? submitted by Art.
I'm not exactly sure of the elements you want to hide as you don't have a demo, so I cannot provide a fully working code, however you should do something like this:
$("body").click(function(event) {
if (event.target.id != "browse-btn") {
// Do something when there's a click outside of #browse-btn
// and the element you want to hide is currently visible
}
});
You can attach a click event to all chidren of the body tag that removes that active class, but you would want to make sure to unbind that event so it doesn't run every time a click takes place that doesn't have some sort of prevent default on it. Something like this:
$(function(){
var hidePulldown = function(){
$('#browse-btn').removeClass('active');
$('body *').unbind("click", hidePulldown);
}
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else {
$(this).find('span').html('▼');
$(document).on('click', 'body *', hidePulldown);
}
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Also, the
$(document).on('click', element, function(){function body})
is the preferred way to attach click events i believe: $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
This is what worked flawlessly for me after reading some of the answers here:
$(document).click(function(event) {
if(!$(event.target).closest('#menucontainer').length &&
!$(event.target).is('#menucontainer')) {
if($('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
}
})
Thanks for pointing me in the right way!
What I'm trying to achieve is toggling the sidemenu on click anywhere in the body except inside sidemenu div itself. I currently can toggle the sidemenu from its toggle link (comment out line 13-14 in js fiddle) but not by clicking anywhere on body. This is the concerned code:
$('body').bind('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
$('.sidemenu').removeClass('is-visible');
$('body').removeClass('sidemenu-open');
}
});
JSFIDDLE
I know I can add a wrapper for the content but I don't have much flexibility in the HTML structure.
There are two problems. First, when you click on the link, the click is bubbling out to the body. So the menu toggles open, then it toggles closed again, so nothing happens. Use event.stopPropagation() to prevent that.
Second, when the side menu is closed, <body> is just the one line containing the link. If you want to be able to click anywhere in the window, use $(document) rather than $('body').
$(function () {
$('.sidemenu-toggle').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('.sidemenu').toggleClass('is-visible');
$('body.sidemenu-enabled').toggleClass('sidemenu-open');
$('.sidemenu').toggleClass('sidemenu-open');
});
});
$(document).on('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
$('.sidemenu').removeClass('is-visible');
$('body').removeClass('sidemenu-open');
}
});
DEMO
Your click on the side menu is propagating down to the body and activating that handler as well - preventDefault isn't what you're after, you need to return false as well. Try this click handler instead.
$(function () {
$('.sidemenu-toggle').on('click', function (event) {
$('.sidemenu').toggleClass('is-visible');
$('body.sidemenu-enabled').toggleClass('sidemenu-open');
$('.sidemenu').toggleClass('sidemenu-open');
return false;
});
});
You can get the target element in click event by which you can have further conditions.
$('body').click(function(evt){
if(evt.target.id == "your_sidemenu_id"){
//do nothing
}
else{
//do the toggle here as this will be implemented whenever any element is clicked other than your sidemenu
}
});
I have an image gallery. clicking on any image opens a modal window with the clicked in image.
I want to hide the modal window. i know how to do it by putting a close button. But i don't want to add any close button. what i am trying to do is whenever a user click anywhere other then following div gallery-image gallery-control-previous gallery-control-next the modal window should get hidden.
can anyone suggest me how to achieve this.
Here is my jsFiddle
Demo
Hide on clicking other than navigation keys
$('.gallery-overlay').click(function(event){
if($(event.target).hasClass('gallery-control') ==false){
$(this).hide();
}
});
Hide on clicking other than image and navigation keys
$('.gallery-overlay').click(function(event){
if($(event.target).hasClass('gallery-control') ==false && $(event.target).hasClass('gallery-image') == false){
$(this).hide();
}
});
you can use fadeout('slow') instead of hide for giving good effects
Here is the
jsFiddle..
add this to end of your jquery code.
$(".gallery-overlay").click(function(e) {
if($(e.target).hasClass("gallery-image") || $(e.target).hasClass("gallery-control-next") || $(e.target) .hasClass("gallery-control-previous")){/**/}
else {$(".gallery-overlay").fadeOut("2000");
}
});
e.target gives the actual clicked area, within .gallery-overlay. $(this) doesn't work.
You can slow down the rate of fading of modal window by increasing time. Here it is 2000, i.e.2 seconds.
Just add the following to your code:
$('.gallery-overlay').click(function() {
$(this).fadeOut('slow');
});
$('.gallery-image').click(function() {
return false;
});
You will also need to add return false at the end of your click handlers for .gallery-control-previous, .gallery-control-next and .gallery-image so that the event doesn't propagate to .gallery-overlay.
Updated fiddle.
Simply add a click event to fadeOut() the .gallery-overlay onclick.
View the JSFiddle for an example
Then for your .gallery-captionbox and .gallery-image, add a click event and return false on them.
// Hide the gallery on click
$('.gallery-overlay').click(function(){
$(this).fadeOut();
});
// Return false on click of the caption box or the image itself
$('.gallery-captionbox, .gallery-image').click(function(){
return false;
});
// All your other code below
View the JSFiddle
Try,
$(document).click(function(e) {
if( e.target.id != 'yourDivId') {
$("#yourDivId").hide();
}
});
I have this js code, which display and hide some content on a page after click on a button. I've added second script (slickbox2), which do the same with another content by clicking on 2nd button. The problem I need to resolve is when 1st content is displayed and I click on 2nd button, I want to hide the 1st content. Thank you!
jQuery(document).ready(function() {
//hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
jQuery('#slickbox2').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
return false;
});
});
Changed a few points.
$(document).ready(function(){
$('[id*=slickbox]').hide(); //hide your slickboxs
$('#slick-toggle').click(function(){
$('#slickbox').show();
$('#slickbox2').hide();
});
$('#slick-toggle2').click(function(){
$('#slickbox').hide();
$('#slickbox2').show();
});
});
BTW You can use $ in place of jQuery in all of your code:
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
$('#slickbox1').toggle(400);
return false;
});
First of all you need to give class to all slickboxes e.g. slickbox then your Javascript would be like
<script type="text/javascript">
jQuery(document).ready(function() {
$('.slickbox').hide(); //hides all elements with class slickbox
$('.slickbox').click(function(){
$('.slickbox').hide();
$(this).toggle(400);
})
});
</script>
You can use hide() function to always hide the first content when clicking on the second button
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox').hide(400);
jQuery('#slickbox2').toggle(400);
return false;
});
Don't use toggle or the content will appear if it was hidden