My site's table with a nav panel has stopped switching tables with the nav. I haven't done any updates recently but a visitor noticed and reported it. Any idea?
You can find the table at http://fatherandsonlending.com/#terms
That's because you didn't include the bootstrap js file in your page. Put
<script type="text/javascript"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
After your jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Related
So I am working on a website for a school project and am using bootstrap. I downloaded bootstrap js e css files so I could use locally, so even if I don't have internet connection bootstrap would still work.
Everything was working fine, no problem with bootstrap, until I used a carousel.For some reason, my carousel wouldn't work, only the first image would appear. It didn't matter what i changed, nothing would work.
Then I tried changing the bootstrap files to the online links on the bootstrap website, and to my surprise, the carousel started working!
So why does the carousel only work with online bootstrap link and not local bootstrap files?
Below are the bootstrap files, locally and the web link. I am not providing the carousel html code because that is not the problem, seeing as i took it from the bootstrap website, and it is working, just not locally.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--<link href="css/style.css" rel="stylesheet" type="text/css">-->
<!-- Boostrap Minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Plugin jQuery -->
<!--<script src="js/jquery-3.4.1.slim.min"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If anyone has had the same problem and nows how to solve it, i would apreciate it!
Thank you!
I suspect your calls failed because you did not call bootstrap.bundle.min.js (w/ Popper.js). You called the unbundled version (bootstrap.min.js) which does not include popper.js.
This is discussed in https://getbootstrap.com/docs/4.4/getting-started/contents/#css-files
I tried hours to solve this problem, can anyone tell me how can I get those icons or tell me how to make a custom CSS file
files I linked
dataTables.bootstrap.min.css
and following script files
<script src="js/lib/datatables/datatables.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="js/lib/datatables/cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="js/lib/datatables/cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="js/lib/datatables/cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
I am designing this template on bootstrap 3. But I notice the responsive menu which is default in bootstrap does not work when I resize my browser to check.
I have also done many responsive template before but they are works fine, only this template does not work. I have tried to find out the error but can't fix it.
Can anyone help?
Template: https://dl.dropboxusercontent.com/u/138944745/bootstrap_lambda/index.html
In footer you included bootstrap.min.js as first and jquery.min.js as second. You have to change the order
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Change like this,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<head>
<title>Mary</title>
<link href="http://localhost/stylesheet.css" type="text/css" rel="stylesheet">
<link href="http://localhost/mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="http://localhost/jscript.js"></script>
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
</head>
I just got done learning about jquery ui and am trying to include it in my very first webpage, but it's not working. I checked all of the links on my server, and they link up to the documentation, but the only way the content shows up when I check the webpage on my server is if I comment out the last script tag. But if I do that, I can't access the jquery ui, right? I'm so confused. I'm so excited to try all of this stuff out, but I can't figure out how to make it work :( Any help is greatly appreciated.
karthikr's answer is most likely the problem, but if that doesn't work try referencing the URL hosted by jquery itself.
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Assuming all the static files are properly referenced,
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
should be
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"></script>
Note the end of the script tag /> should be ></script>
Ahoy!
I have a JSFiddle where the code runs and executes perfectly fine referencing JQuery (1.9.1), JQuery UI (1.9.2), Bootstrap (2.3.1) onDOMready.
http://jsfiddle.net/2Xsmx/
I then copy and paste the <div> to my project in an EJS file (there is no changes to the inserted).
I make the following calls in the header:
<link href="/netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="stylesheets/globalstylesheet.css">
/
Footer:
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="javascripts/userdashboard.js" type="text/javascript"></script>
The slider now no longer appears and the following doesn't exist (where as it does in the JSFiddle).
<div class="tooltip fade top in" style="top: -41px; left: -19px; display: block;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">10</div></div>
I can see no references to JQuery-UI where as in the JSFiddle google dev tools, I can see various references. Everything else on the page, css, bootstrap etc, is running fine, just the control slider.
Any help is greatly appreciated.
Thanks,