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,
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
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>
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I have several web development projects hosted online. I decided it was important to get the projects into source control, so I created copies of the files on my local machine. The way the projects are hosted online, the css and js are inserted by the website and they don't need to be added to the html code. To develop on my machine, I require the js and css files to be added directly to the html, but I don't want to add anything unnecessary to the code that will be placed back online. My solution is an abstracted html file called main. The css and js are added to the main.html file and the original html file is linked in. Like so...
<!-- main.html-->
<head>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<link rel="stylesheet"href="bootstrap.min.css">
This works great if the head section is added to the original html file. If the head section is removed, there is unwanted css that suddenly afflicts the original html file.
<!--original.html-->
<head>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body> ... </body>
works fine, but contains the code that I want to abstract.
<!--original.html-->
<body>...</body>
has messed up margins from unwanted CSS
in the main.html file, the original html is linked from a git hub page with
<div w3-include-html="github.com/original.html"></div>
Any Ideas?
I am creating download links to PDFs of Chinese articles I have written, but for some reason, the links are not working. I stopped at the first li because I could not figure it out. Even when I change it to a simple a href to my home page, it still does not work.
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="Chinese.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yellowtail" />
<link rel="stylesheet" href="animate.css">
<script type="text/javascript" src="home.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
<script src="Chinese.js"></script>
<div class="samples">
<li><a href="XiJinPing.pdf" download>習近平反貪</a></li>
<li>伊波拉與伊斯蘭國：世界末日的徵兆</li>
<li>人類是否應探索太空?</li>
<li>社會的價值觀與同性戀</li>
<li>兩岸的未來</li>
</div>
Originally I thought you meant the links to the files were not working. (Which is why I suggested the following)
The download attribute is not supported in IE or Safari. Which browser are you using? Do you get an error message? Make sure your XiJinPing.pdf file is in the same directory as the HTML file.
Is the source actually being served or just opened in the browser?
http://www.w3schools.com/tags/att_a_download.asp
Now that I have re-read the question it appears that you mean the link tags are not working.
The first CSS (shift.css) only adds a font-face to know if it works you will need to add that font-face to an item through a style.
div {
font-family: Shift;
}
jsFiddle
The second thing you need to do is add the javascript for bootstrap.
Also if you run into Cross Scripting errors, you may need to use HTTPS versions of the links to your css files or vice versa. Chrome blocks traffic automatically but a shield will show up in the address bar and you can select it to allow the traffic anyway.
You should also close the link tags.