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;
});
});
Related
I have two modals, one for registration, one for login. Within each modal I have a link to the other modal like this:
Modal Register
<span id="btn-open-login"><a id="btn-open-login-link">Back to Login</a></span>
Modal Login
<span id="btn-open-register"><a id="btn-open-register-link">Register here!</a></span>
To close and open the modal without body scroll I use this peace of js:
js
$('#btn-open-register').on( 'click', '#btn-open-register-link', function () {
$("#modalLogin").modal("hide");
$("#modalLogin").on("hidden.bs.modal",function(){
$("#modalRegister").modal("show");
});
});
$('#btn-open-login').on( 'click', '#btn-open-login-link', function () {
$("#modalRegister").modal("hide");
$("#modalRegister").on("hidden.bs.modal",function(){
$("#modalLogin").modal("show");
});
});
The modal Login opens first as default.
It works fine for the first round. But when the Login modal is opened for a second time, I can't close the modal anymore. It just keeps switching.
What am I missing?
Here a fiddle: https://jsfiddle.net/tk1rbys0/
You can use modal('toggle') instead of "show" and "hide".
Also, you don't need to listen to the hidden.bs.modal. The way you've structured your code, it simply means when you press a modal button, it closes the current modal, when its 'close' event fires, the other modal is shown. You get stuck in a loop, which is your current situation.
Try replacing your code with this:
let modalLogin = $('#modalLogin'),
modalRegister = $('#modalRegister');
$('#btn-open-register').on('click', '#btn-open-register-link', function () {
modalLogin.modal('toggle');
modalRegister.modal('toggle');
});
$('#btn-open-login').on('click', '#btn-open-login-link', function () {
modalRegister.modal('toggle');
modalLogin.modal('toggle');
});
Hope this helps.
Update:
Switch the modals in reversed order, that way you will always have one visible, which will prevent the scrollbar from showing:
$('#btn-open-register').on('click', '#btn-open-register-link', function () {
modalRegister.modal('toggle');
modalLogin.modal('toggle');
});
$('#btn-open-login').on('click', '#btn-open-login-link', function () {
modalLogin.modal('toggle');
modalRegister.modal('toggle');
});
Update 2:
Taking the scrollbar into account, you can update your code to remove the event listener, once the other modal has been shown.
$('#btn-open-register').on( 'click', '#btn-open-register-link', function () {
$("#modalLogin").modal("hide");
$("#modalLogin").on("hidden.bs.modal",function(){
$("#modalRegister").modal("show");
$("#modalLogin").off("hidden.bs.modal"); // allow closing
});
});
$('#btn-open-login').on( 'click', '#btn-open-login-link', function () {
$("#modalRegister").modal("hide");
$("#modalRegister").on("hidden.bs.modal",function(){
$("#modalLogin").modal("show");
$("#modalRegister").off("hidden.bs.modal"); // allow closing
});
});
This should allow you to close an opened modal without showing the other one.
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 know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle
I'm trying to achieve something similar to the bootstrap button drop downs (http://twitter.github.io/bootstrap/components.html#buttonDropdowns) but need something lightweight. Basic functionality is more or less this:
On clicking the link, corresponding dropdown div opens (works)
On clicking another link, the previous dropdown closes as well as the css class is removed (works)
On clicking on the link of the opened dropdown, close the dropdown (does not work (closes and reopens))
On clicking anywhere in the body (so outside the link and dropdown), close the dropdown (does not work)
What should be the logic behind this?
Demo: http://jsfiddle.net/fU2BZ/
Does the code below make sense?
$(document).click( function(){
$('.dropdownbox').hide(0);
$('.dropdown').removeClass('active');
});
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
Made some changes to your code, added some if else logic, seems to work.
fiddle: http://jsfiddle.net/fU2BZ/1/
Code:
$('.dropdown').click( function(event){
event.stopPropagation();
if ($(this).hasClass("active")) {
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
} else {
$('.dropdownbox').hide();
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
}
});
You were pretty close. I'd store a flag if it was visible (so that you don't double-up on the same code)
$('.dropdown').click( function(event){
event.stopPropagation();
var active = false;
if ( $(this).hasClass('active') )
active = true;
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
if ( ! active )
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
jsFiddle: http://jsfiddle.net/fU2BZ/4/
Simple code to resolve your third issue:
$('.dropdown').click(function (event) {
event.stopPropagation();
$('.dropdown').removeClass('active').not(this).find('.dropdownbox').hide();
$(this).toggleClass('active').find('.dropdownbox').slideToggle(200);
});
To resolve your last issue, do this:
$('.dropdownbox').click(function (event) {
event.stopPropagation();
});
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;
});