I have a web app that uses bootstrap and toastr.
I recently upgraded the bootstrap library from bootstrap4 to bootstrap5.
I then found out that toastr options do not work properly.
For example the toastr.options timeOut, extendedTimeOut don't respond to their new values.
The toast is raised for a short duration, regardles the values that I set for toastr.options.timeout.
The call to the toastr is:
let toastrSettings = {
timeOut: 5000,
extendedTimeOut: 5000
};
toastr.error('Some message', 'Some Title', toastrSettings);
Could it be that toastr (toastr/2.1.4/toastr.min.js) does not work with bootstrap 5?
Alternatively I see bootstrap toasts and alerts.
But there it looks like the toast is set into the DOM.
If toastr does not work with bootstrap 5, I'm looking or a library that provides the option to set dynamically the title and content, similarly to toastr.
Thanks
I mistakenly thought that adding bootstrap 5.x.x caused the problem.
But the root cause was that a bit later in the code after raising the toast I had:
toastr.clear();
which caused the toast to disappear regardless of the extended timeout.
So my conclusion is that bootstrap 5.x.x and toastr can coexist.
Related
I have integrated Kommunicate service into my website and added a Dialogflow chatbot into it.
I have added the kommunicate widget successfuly and it worked well with the configurations as shown below:
var kommunicateSettings = {
"appId":"APP-ID",
"conversationTitle":"SAMPLE",
};
But when I add the following settings, the widget asks to enter the name and email and when I submit it, the widget disappears with a transparent box with a shadow:
var kommunicateSettings = {
"appId":"APP-ID",
"conversationTitle":"SAMPLE",
"askUserDetails":['name', 'email'],
"emojilibrary":true,
"locShare":true
};
It does not show the chat widget now, what to do?
The issue was related to askUserDetails parameter. When askUserDetails parameter was passed, it was loading some firefox incompatible CSS which was causing this behavior.
Now, this issue is fixed and not reproducible in the latest version of Kommuncate chat SDK.
PS: I work for Kommunicate
I am using the latest fancybox 3 library. I am trying to show a loading icon. I have gone through the docs(https://fancyapps.com/fancybox/3/docs/) but it didn't help me much. I see a couple of methods like showLoading() and hideLoading() but its throwing errors in the browser console like they are not functions.
With the old fancybox lib i.e. fancybox 1 I was able to do it by directly calling the functions. Could someone please help me with the latest library ?
To show the loading animation programmatically, you need to do it in the active instance of FancyBox:
// Get the opened instance of fancybox
var instance = $.fancybox.getInstance();
or if you open ir programmatically:
// Get the initialized fancybox
var instance = $.fancybox.open({
// Your content and options
});
Then you could show or hide the loading animation for the instance like so:
instance.showLoading( slide );
instance.hideLoading( slide );
The loading animation must be shown/hidden on a specific slide.
To customize the loading animation, you can override the default loading template. Then the css is up to you:
// Changes the loading animation when opening a new instance
$.fancybox.open({
// Loading indicator template
spinnerTpl: '<div class="your-animation"></div>'
});
// Overrides the default template for all instances
$.fancybox.defaults.spinnerTpl: '<div class="your-animation"></div>';
You can find our more about FancyBox options and api methods here.
Hope it helps.
I want to show a bootstrap modal immediately after user close another. So I use the following code trying to do this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
});
Everything happens normally. First modal closes and next modal appears.
However, the class="modal-open" should be in body element to scroll works properly, what is not happening. After second modal is shown, that class disappears from body.
Am I doing something wrong?
Am I doing something wrong?
I don't think so. The large number of issues on this topic suggests that this was either not well-designed, or not designed to support this. Relevant bugs would be
Multiple modals fix #5022, Multiple modals #11872 and
.modal-open is not applied to body when "switching" to another modal #11865 where it is explicitly said by #mdo:
Yup, we won't be supporting multiple modals.
So what to do about it?
A small timeout should definitely help:
currentModal.modal('hide').on('hidden.bs.modal', function (){
setTimeout(function() {
nextModal.modal('show');
}, 100);
});
Without seeing this in action, my guess is that there is some kind of callback handler that removes the class "modal-open". You can try manually adding it like this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
body.addClass('modal-open');
});
But instead of overriding Bootstrap, have you looked into data-dismiss and data-target?
I am using "needim noty" jquery notification plugin, I am trying to close the notification only programatically, I saw option closable to stop closing notification. but when I am trying notification closing with click?
any ideas to stop closing with click and do it programmatically?
"noty plugin"
Refers "closable"
My Issue
I needed something like this in the past and this is what I did:
To stop closing with click, hover and close button I changed the template and closeWith plugin options:
$.noty.defaults.closeWith = ["button"];
$.noty.defaults.template = '<div class="noty_message"><span class="noty_text"></span></div>';
This way noty will make all notifications close only when clicking on the template close button but since I removed it from the template it is not possible.
Note that you don't need to make this the default noty behavior. You can use it only in some cases by using this options only when you need.
To close it programmatically I used $.noty.close(id) and $.noty.closeAll() functions.
To use the first one you need the notification ID that is generated when it is created.
You can get it this way and store it to use when you need to close a specific notification.
$n = noty({text: 'noty - a jquery notification library!'});
var noty_id = $n.options.id;
See this working demo for a better understanding
Edit:
To set this on the fly for only some notifications you need to pass the options like this:
var $n = noty({
text: 'I have a special behaviour',
template: '<div class="noty_message"><span class="noty_text"></span></div>',
closeWith: ["button"]
});
See this working demo for a better understanding
Is it possible to style default JS alerts using Twitter Bootstrap? For example:
alert("You can select maximum 8 files at once.");
You can't style normal alert windows. Their look and feel is controlled by the OS. The best you can do is shadow the real alert function with one of your own. For example, you could override alert with a function that writes the message to console instead:
alert = function(msg) {
console.log(msg);
};
alert("Hello");
In your custom alert method you could open one of Bootstrap's modal windows with the message.
Here's a working example of the above code.