I have included two bootstrap links in my HTML page. This is causing issues with the accoridan I have included. The accordian once opened wont collapse when clicked again.
I have figured out that this is because of the two bootstrap links and the problem is solved when I remove one. Does anyone know why this is occurring and how to solve this?
The two bootstrap links are a local copy and a CDN copy. I use the CDN primarily and have a local backup incase the CDN is down.
Any help is appreciated.
Unfortunately, Bootstrap doesn't provide a specific variable for the fallback purpose. However, you can still achieve the CDN fallback behavior, you can test for one of the bootstrap plugins. For example, you can check for the modal plugin like below-
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>$.fn.modal || document.write('<script src="/js/bootstrap.min.js"><\x3C/script>')</script>
This will only load the local version of the bootstrap.min.js file if the CDN doesn't work.
Please note that this might fail in future if the modal plugin gets renamed or removed in future.
Related
For a project, I have to use a Modal (pop up) which I prefer to use Bootstrap for.
However the project (which was original built with their own custom code so no bootstrap), when I do add the bootstrap links (into the head the script, and css links etc) into it, it now changes the my own .container classes to Bootstrap their values...
How can I ignore those?
Go here
https://getbootstrap.com/docs/3.4/customize/
Remove everything except modal
then click Compile and Download
It's bootstrap 3.4 but I don't think modal component went through a lot of changes.
I'm using this version of bootstrap for a web application:
http://davidstutz.de/bootstrap-multiselect/
In the docs, it says the css required is bootstrap.min.css which I have. The problem, however, is that my application and some of its elements (datetimepicker, etc) require bootstrap.css. I cannot have both loaded at the same time without conflicts. Currently, without loading bootstrap.min.css my multiselect looks like this:
And When I select multiple they go outside the label.
Is there a way I can get around this issue? Can I link the min version specifically to the instance of multiselect?
I am trying to style the datatable just like twitter bootstrap and I came across twitter bootstrap jquery ui theme. After extracting, there were 4 files inside the css folder. These are
jquery.ui.1.9.2.ie.css
jquery.ui.1.10.0.ie.css
jquery-ui-1.9.2.custom.css
jquery-ui-1.10.0.custom.css
I want to know which files should be inlcuded and what is the significance of each file.
I also do find that while implementing jquery-ui-1.10.0.custom.css only file, the dialog boxes header is not properly aligned. Is dialog boxes not properly aligned in the default theme?
Include both the files & your alignment issue will be gone, i think 1.10.0. seems to be the latest version. So include
jquery.ui.1.10.0.ie.css
jquery-ui-1.10.0.custom.css
Also open these both files in an editor to view and understand the alignment and design.
I know it must be something easy, but I can't figure this out. Summernote works fine if it is in the first page element of a JQM document, but if the summernote is in an external popup or on other pages in a multipage web, they summernote initialized but the icons are spaced oddly--see the fiddle). I have tried comparing the how the css are applied, and it looks like the JQM theme is overwriting the bootstrap css, though I am not sure (adding !important to all the bootstrap and summernote css is not an option--besides it must be a initialization or loading issue). Anyone have an idea?
If you host the JQuery Mobile scripts locally then you could edit/delete the parts that are causing the problem. Or you could use find and replace to add the important tags: Find:; Replace:!important;
I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.