I have a Laravel project, and I don't want to use bootstrap in it. can I import and use the popper.js plugin without using bootstrap?
When I try to do this, It just shows me the popover title.
It might be two possibilities.
1) Css wasn't affected.
2) Some javascript error.
I am sending a documentation link. Still, you are facing an error. Please send me code snippet.
Popper document link
Related
I am using Bootstrap 4, and trying to use bootstrap.js in order to show/hide a modal using Javascript. However, whenever I include bootstrap.js into my project the Bootstrap 4 dropdown list stops opening the list in order to select elements.
I tried not adding bootstrap.js and the dropdown lists start working normally, but by following this approach I have no way of opening a modal programmatically.
The order by which I load all the libraries is:
"node_modules/jquery/dist/jquery.js",
"node_modules/vue/dist/vue.js",
"node_modules/#svgdotjs/svg.js/dist/svg.js",
"node_modules/#svgdotjs/svg.draggable.js/dist/svg.draggable.js",
"wwwroot/site.js",
"node_modules/#aspnet/signalr/dist/browser/signalr.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
I expect to include bootstrap.js and allow both, dropdown lists and the command $("#myModal").modal("show") to work.
I found a workaround by not importing the whole bootstrap.js library but instead importing only util.js and modal.js (which both can be found inside bootstrap/js/dist). This way the problem was solved for now, however I don't understand what caused the problem in the first place.
Iam trying to create a accordion from the bootstrap website in React. Iam following this website https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
I copied their example code and it looks exactly just as the example on the website but the problem is when I click on the accordion nothing happends, it doesn't expand or close. Is there suppose to be a onClick function somewhere in the code that needs to be included?
you need to copy the JS as well as the css code from bootstrap lib.
i suggest to use code from my google search bellow, create a component and just adapt the css style to bootstrap
https://www.google.it/search?q=accordion+example+jsfiddle&oq=accordion+example+jsf&aqs=chrome.1.69i57j0l5.12453j0j1&sourceid=chrome&ie=UTF-8
actually is very easy to build it
Forgive me if I'm totally wrong here, as I am fairly new to web development- but I've used that accordion before and simply copying and pasting their code should do the trick, provided you have added the proper link tags from their "Getting Started" section in documentation set in your index.html (not just CSS but all of the JS links, too).
I hope this helps!!
I found that solution, to expand all accordion sections:
http://www.bootply.com/peFUdnwOpZ
I copied the code in Joomla.
Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.
But It is not working. Can Anybody help?
Background information:
I had to add bootstrap min.js, otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.
I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.
Nothing worked.
I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:
null is not an object (evaluating '$('.closeall').click')
So, it misses the link to the other javascript files. Maybe some can help?
I believe you may have forgot to add the following piece of code in your custom js file -
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
Hope this may work for you :-)
I am changing a website into a template for Joomla 3.4.3. I am using Bootstrap 3 components and they've been working great normaly, but when it is as a Joomla template they are not working properly. Navigation toggle works only sometimes, carousel is acting weird and some animations aren't working. Also in firefox I am getting this error whenever I click somewhere:
Empty string passed to getElementById()
and it's refering to this code in jQuery:
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] ); // Here the error occurs
I've read that it can be caused by having duplicate IDs in HTML, but I have checked and didn't find any.
I would really appreciate your help, I'm really frustrated by this. Thanks
I think the problem is that the heart of joomla currently works with version 2.3.2 Bootstrap
You need to load in the template, bootstrap version you want to use.
Create a directory called "js" in the template and one for the "css"
Then add this in the template, after placing files.
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');
To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
I hope I've been helpful. Sorry for my English.
I'm trying to implement bootstrap tooltips on my site - you'd think it would be easy enough, but something is not working correctly - the bootstrap tooltip is not functioning.
I'm calling all the right scripts, stylesheets and javascript - I believe. I'm following the example here: http://jsfiddle.net/TSZSL/171/ and I believe this javascript could be throwing me?
$('.example').tooltip();
Here's the page I'm referring to. I just get a regular tooltip with no bootstrap functionality.
The problem is your reference to boostrap's tooltip library. You can't link to it like that; it's not a CDN...
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>.
Use netdna's complete JS package or host the individual script yourself. See BootstrapCDN.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>