I use summernote on the bootstrap modal.But when click the dropdown item on the toolbar, the dropdown menu not show on the right place or even not exit the drop down DOM.I'll show you the picture below:
enter image description here
And I've search for a long time in summernote github issue list and stackoverflow.I try add "dialogsInBody: true", but not working.Anyone can help me about this problem.Thank you!
use $('.dropdown-toggle').dropdown();
Try this. Here work fine.
callbacks: {
onInit: function() {
//when inside a modal, re-link the dropdown
var thisNote = $(this);
if(thisNote.closest('.modal').length>0){
thisNote.next().find('.dropdown-toggle').dropdown();
}
}
}
Related
I am using primefaces documentViewer which is based on mozilla PDF.js: 2.11.338
https://www.primefaces.org/showcase-ext/views/documentViewer.jsf
and I want to customize the viewer to control which buttons to appear in the toolbar like rotate & print & download only.
I couldn't find any guides about that in primefaces website.
There is no JS Widget for Document Viewer however this can be accomplished easily with a JS function like this.
Note: Some buttons like presentationMode are special and need to be hidden a little differently.
pdfHideButtons : function() {
var pdfViewer = $("#YourDivId");
if (pdfViewer) {
$(pdfViewer.contents().find("#openFile")).hide();
$(pdfViewer.contents().find("#viewBookmark")).hide();
}
}
Then on your page add this code to basically hide the buttons after the page loads.
<script>
$(document).ready(function() {
setTimeout(function(){ pdfHideButtons(); }, 1000);
});
</script>
Im trying to do; show divs when click on check-box radio button. I made it with jquery but when you load page all my divs are visible. You have to click my first check-box radio button to make other divs invisible. or just click other check-box radio buttons.
I tried
#row2 {
display:none;
}
But when I added this to css, if you click first check-box radio button(which is related to div row2) div is not visible and and it is not working.
Any other solution for when you open page I just want to see only div (row2) which is checked. I dont want to see other divs when page load.
Thanks...
Demo Link: https://rexin-demo.netlify.app/main.html
Ps: Pics and button are not visible on jsfiddled cuz of assets. Better to look it via demo link.
https://jsfiddle.net/t4e13xvj/
Trigger the click by adding .filter(':checked').click() at the end of the input's click event .. Try it
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).val(); // use .val() instead of .attr('value')
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}).filter(':checked').click();
});
Also I prefer to use change instead of click for radio and checkbox inputs
$(document).ready(function(){
$('input[type="radio"]').on('change' ,function(){
if(this.checked){
var inputValue = $(this).val();
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}
}).filter(':checked').prop('checked' , true).change();
});
OR With only css you can use
.box:not(.product){
display : none;
}
I am building a simple front end site and I'm using Bootstrap for styling.
I have built a section using modals. The user clicks on a button to open the modal and then sees a centred modal.
What I would Like
I want to be able to allow the user to click a button at the bottom of the modal and be redirected to another part of the page and the modal close.
I have successfully been able to move the user to the new part of the page by using <a> tags, href and id's and also by using onclick="window.location.href='#middle'", and have also been able to dismiss the modal.
THE PROBLEM is when the user clicks the button on the modal, they are redirected to where I want them to go to and the modal closes BUT then instantaneously the window moves back to the original place where the modal button was pressed.
I want to stop the moving back to the place where the original modal was clicked and leave the user at the place they got to when they clicked the button.
I have tried using <a> tags instead of <button> and it has the same effect.
Here is a working example jsfiddle showing the problem.
https://jsfiddle.net/peamanschesthair/kdu5gno1/42/
Any ideas are greatly appreciated.
Use setTimeout to delay the location change, after the modal hide event. To determine the element that triggered the dismiss, check the document.activeElement...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
Demo: https://codeply.com/p/WW9aB8OeNx
Alternate option: Set a data flag in the modal hide event if the btnMove has been clicked, then chain the hidden event and check the data flag...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
this.data = 'move'
}
}).on('hidden.bs.modal', function (e) {
if (this.data === 'move') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
Hello guy's i have a problem for day's i have been trying. But nothing works. I want the same effect as this -> https://www.codeply.com/go/Ai786lQzd8/bootstrap-4-prevent-dropdown-close-click-outside.
I want the dropdown menu only to close when i click on the button. I copied the EXACT code to my own project and it closes when clicking outside? It shouldn't close like the codeply example. I don't understand how to fix this.
I tried changing the code with a click target id and then let the dropdown menu close when ID is clicked but that also doesn't work i am out of options to try. I hope someone can help me with this.
Here is my code
<li class='keep-open'>
<a id='dropdownMenuLogin' class='nav-link badge no-style-for-badge' data-toggle='dropdown' href='#'>Login</a>
<!-- Dropdown login begins here -->
<ul class='dropdown-menu dropdown-menu-login mt-1'>
<li class='p-3'>
<form method='POST' id='loginFormHeader'>
<!-- Login code should be here -->
</form>
</li>
</ul>
</li>
Here comes the jQuery code i tried it with:
$('IF NOT -> #dropdownMenuLogin').click(function() {
$('.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = false; },
"hide.bs.dropdown": function() { return this.closable; }
});
});
I want it closable false IF NOT clicked on #dropdownMenuLogin. So i want it only to close and open when i click on "the button" like codeply link in my case it is a <a> #dropdownMenuLogin
But the start of fixing this problem is why does it work in codeply and not in my own project i copied exactly everything to test it and it just closes when clicking on the outside.
Jquery version: 3.4.1
Bootstrap version: 4.0.0
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/