EDIT: Keep in mind this answer was asked before Bootstrap 2 came out and therefore is relative to the first release
I am trying to dynamically add and show Bootstrap modal windows with AJAX content, but after looking at the documentation for a good hour and a half I dont understand what classes or attributes I need to add to my modal div so they work with the modal API.
Right now I have something like this:
var $modalWindow = $('<div />', {
class: 'modal fade static',
style: "display: none;",
text: "Test"
});
$('body').append($modalWindow);
$modalWindow.modal('show');
And it doesnt work... Maybe I am being dense, but I cannot find any info on the docs about how to setup my modal window before calling the show method.
Edit: Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
EDIT: Before downvoting this answer, consider this was before bootstrap 2, and as another commenter said he had the exact same issue and also solved it by adding tipsy and popover.
Boostrap 2 is way better than its first incarnation, BTW
Related
I have site navigation in Component A (Navigation).
I have a working bootstrap modal in component B (BootstrapModal).
Component A is referenced in index.html to display navigation.
What I'm trying to accomplished is a way to invoke modal window from Component B when a user clicks on a nav item containing “example” CSS class.
So will need conditional statement to invoke the modal when the CSS class is present.
Note that this is using bootstrap modal and am not able to add data-target="#myModal" to component A.
This is a response to Matt's comment in his answer:
Note: I know you said "Vanilla javascript", but the fact that you are
using Bootstrap seems to indicate that you are not using pure "Vanilla
Javascript". Just that you need a programmatic way of opening the
modal.
I am posting it as an answer since I currently have less then 50 rep and can't post comments.
Also, this may not have been relevant back when Matt wrote his answer, but it is now, so here it is:
Bootstrap 5 is dropping jQuery so any new code which uses or aims to use Bootstrap 5 will need a different answer than Matt's answer to this question. Again, this is not an answer, I didn't find one. Just want to raise the awareness. Currently, this makes upgrading to Bootstrap 5 a bit harder.
jQuery(document).ready(function() {
jQuery('a.className').on('click', function(e) {
e.preventDefault();
jQuery('#myModal').modal('show');
});
});
Just use bootstrap's api on the click event of the item you want to target with an if statement based on the hasClass function in jQuery:
$('#myTarget').on('click', function(e) {
if ('#myElement').hasClass('example') {
$('#myModal').modal('show');
}
});
Note: I know you said "Vanilla javascript", but the fact that you are using Bootstrap seems to indicate that you are not using pure "Vanilla Javascript". Just that you need a programmatic way of opening the modal.
First of all, I'm sorry if this is already asked. I couldn't find a answer.
I have a HTML5 template bought at themeforest and a jQuery carousel. I am not very similar with JavaScript or JQuery.
When I wanted to implement the carousel like it said in the description the JQuery/Javascript didn't work.
I found out that it could be the version of JQuery. The template(cleanstart) uses version 1.11.2 and the carousel uses 1.44.4. When I changed the carousel to that version it didn't work. When I changed the template version to 1.44.4, it didn't work either.
Then I've put the text from the carousel.js in a script tag in the HTML, and that seemed to work but then the templates jQuery didn't work...
Do you have any idea what the problem can be? Maybe a variable with the same name? I really don't know how to solve it.
Help is much appreciated!
With just this Information, It's pretty hard to help you. It could be a problem with your Implementation, a compatibility Issue or many things else.
Do you have a public page where the template and the carousel are implemented? Does the console window give you any error (if you don't have it yet, I recomend you to get Firefox and the addons Firebug and Webdeveloper Toolbar).
I have found my problem. it was a scroll section that causes the other jquery to stop. When I removed that part of the code, nothing bad with the carousel happened and the other parts worked fine!
Two really good bits of UI for Bootstrap 3.
Firstly, to validate field forms, the validation found here - http://bootstrapvalidator.com/
Secondly, the default style of the select element isn't great, I've used various methods in the past to style the select, however, usually come across browser render issues - this plugin works great with bootstrap - http://silviomoreto.github.io/bootstrap-select/
So I was quite happy with the above... until I tried using them together. The validation won't work (green tick fails to appear) when using the selectpicker to style the select.
Can these work in sync, if so, how!?
Have you had a look at the documentation for the Bootstrap validator? It mentions the Bootstrap Select plugin:
http://formvalidation.io/examples/bootstrap-select/
It seems to suggest they work together. If you're still having problems, it might be worth posting your code or a Bootply.
Edit: Sorry, I've just realised how old this post is (I found it on the newest questions bit, so didn't check), so I imagine it wasn't in the documentation then! I'll leave my answer anyway, just in case anyone stumbles across it asking the same question.
There is a good kind of a range-slider control http://makescreen.ru/i/50c4af7ae3a9058a7f551d398ccecf.jpg
I'd like to use something similar for my project. But I didn't find anything. It would be better if this control exists for twitter bootstrap. If it doesn't, anything similar would be ok.
Your ideas?
I know this question is a couple of months old and already has an accepted answer, but I just came across this as well:
http://www.eyecon.ro/bootstrap-slider/
and it seems relevant to the discussion.
I recommend using jQuery UI (linked version specifically for twitter bootstrap) - they have everything you could ever need for javascript UI elements.
Right now I am usingjQuery UI Tab but it has a conflict in Drupal's fieldset accordion so I am thinking of using a lightweight javascript tab with a good design like rounded corners that is a javascript framework independent.
What javascript tabs are you using? Or do you know any javascript tabs that is working in drupal and doe's not break the fieldset accordion?
Here are the Javascript tabs I found so far:
- Coda-Slider
- dhtmlxTabbar
Thanks in advance.
Cheers,
Mark
I am using the same jQuery UI Tab and is one of the best. Perhaps it will be a good idea to post the problem and to try fixing the problem. It may or not be related with the plugin and it could happen as well that the problem will not be solved by changing the tab plugin.
I have used jQuery UI Tabs and jQuery Tools Tabs without any problems. Both are fairly lightweight and very usable.
I think that if it interferes with other parts of your site you should make sure that the selectors that you use are specific enough i.e. give the html elements you want to transform into tabs an id and then set your CSS and Javascript to only change that id.
It might be worth noting that currently jQuery Tools Tabs uses fixed tab widths and cannot grow arbitrarily long like jQuery UI Tabs.
I hope this helps.
Hope this helps. I was able to fix the fieldset issue with drupal 5 by using a variant of the patch in the link below. Basically, after installing jQuery Update, I had to go to /misc/collapse.js and change line 76 from:
.css({height: 'auto', display: 'inline'});
to
.css({height: 'auto', display: 'none'});
And that did the trick for me. Hope it helps you!
Source: http://drupal.org/node/156221
You can checkout dhtmlxTabbar.