I'm having a problem when I open a nicEdit instance inside a Bootstrap popup.
I can edit my text just fine, the only thing that isn't working properly is the edit HTML popup. The HTML shows up fine on the textarea but I can't click or edit it. The other buttons on that popup (close and submit) work fine, so the only problem is the textarea.
I've tried setting a higher z-index for the textarea, but that didn't help.
Anyone had this problem?
EDIT: Sorry, here is the fiddle http://jsfiddle.net/MXkY3/1/
The HTML button is not visible because the image file isn't included, but it's the only button available.
I'm initializing the editor normally:
$(document).ready(function () {
new nicEditor({
buttonList: ['xhtml']
}).panelInstance('new_page_content18');
});
And the CSS for the popup is the Bootstrap standard. But you can see that the popup generated after the HTML click isn't editable.
EDIT2: The problem isn't with showing the HTML popup, the problem is editing the HTML inside the textarea of that popup. I can't even select text.
You have to create a new event in the modal and validate html NicEdit.
//...
$('.div-element-modal').on('hide.bs.modal', function (e) {
validarNicEditorEnModalOff();
});
$('.div-element-modal').on('shown.bs.modal', function (e) {
validarNicEditorEnModal();
});
$('.div-element-modal').modal('show');
//...
function validarNicEditorEnModalOff() {
$(".nicEdit-selectControl").each(function() {
$(this).unbind("click");
});
$(".nicEdit-selectTxt").each(function() {
$(this).unbind("click");
});
$(".nicEdit-pane").each(function() {
$(this).parent().css("position", "absolute");
});
}
function validarNicEditorEnModal() {
$(".nicEdit-selectControl").each(function() {
$(this).unbind("click");
});
$(".nicEdit-selectTxt").each(function() {
$(this).unbind("click");
});
$(".nicEdit-selectControl").each(function() {
$(this).click(function() {
setTimeout(function() {
$(".nicEdit-pane").parent().css("position", "fixed");
}, 200);
return true;
});
});
$(".nicEdit-selectTxt").each(function() {
$(this).click(function() {
setTimeout(function() {
$(".nicEdit-pane").parent().css("position", "fixed");
}, 200);
return true;
});
});
}
Regards
Related
On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});
Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.
Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});
This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.
This only works once then I refresh the page.
Any help in this regard will be appreciated
jQuery code
$(document).ready(function()
{
$(document).on('click', function()
{
if($('body').hasClass('animate'))
{
$('body.animate').on('click', function()
{
$(this).removeClass('animate');
});
}
else
{
$('.fa-bars').on('click', function()
{
$('body').addClass('animate');
});
}
});
});
I think he want to close menu when click on body only. This code may help:
$(document).ready(function () {
$('.fa-bars').on('click', function (evt) {
$('body').addClass('animate');
evt.stopPropagation();
});
$('body').on('click', function () {
if ($('body').hasClass('animate')) {
$('body').removeClass('animate');
}
});
});
Click on fb-bars to open menu
Click on body to close menu if already opened
This question already has answers here:
How do I prevent my dropdown from closing when clicking inside it?
(3 answers)
Closed 4 years ago.
My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?
JSFiddle
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/
I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.
The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function () {
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
'hide.bs.dropdown': function (event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
You can disable the dropdown functionality temporarily. This is a workaround.
Example with input field inside the drop-down "menu":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle', 'off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
$('#yourDropdownID').attr('data-toggle', 'dropdown');
});
This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.
Not close in click out side menu
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is('a.dropdown-toggle')) {
closeble = false;
}
});
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
'hide.bs.dropdown': function () {
return closeble;
}
});
});
I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});
This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.
You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})
jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}
I have simple question, the bootstrap tooltip works on particular selector[tag] on hover[mouseover] as default i.e you need to hover on the tag to activate the tooltip or make it appear. I want to make it appear in an input tag when i left the tag or when cursor leaves that input tag automatically, not on hover[mouseover]...
The question at hand is by default the tooltip works on following
('selector').tooltip('show');
Is there anyway to make it according to my specifications above
Something like this
$('input').tooltip({
trigger: 'manual'
}).on({
blur: function() {
$(this).tooltip('show');
},
focus: function() {
$(this).tooltip('hide');
}
});
Example here - http://jsfiddle.net/UPRbm/
Try this:
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'manual'});
$('#example').blur(function() {
$('#example').tooltip("show");
setTimeout("$('#example').tooltip('hide');", 1000);
});
});
}
}