I have just switched from Bootstrap to Semantic-UI and I started to design a page, but nothing javascript related works (dropdowns, popups, etc). Here is the header code that I am using
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="#routes.Assets.at("stylesheets/semantic.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="#routes.Assets.at("javascripts/semantic.min.js")"></script>
I know nothing about the play framework, so this is just a guess. Probably you have to initialize the component (dropdown etc.). At least you have to do this when using the Meteor.js framework.
$('.ui.dropdown').dropdown();
Related
So we are currently building a client side CEF login for a game server. It works but we still keep getting this annoying error on launch client side:
"Bootstrap's javascript requires jquery. jquery must be included
before bootstrap's javascript"
I have checked everywhere and everything seems to be in the correct order though I'm likely very wrong! Here is the order we have it in the head tag:
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tether.min.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
Thanks for your help so far!
Have you tried using the google or microsoft CDN? I would check
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It doesn't hurt to try and see if that works!
I have made a website that works in Google Chrome and other major browsers. I want to publish it for Android. So I used PhoneGap to convert to Android. One problem was that PhoneGap does not use Bootstrap anymore, nor my JQuery.
Can you maybe help me because I can't find any clear explanation for how to fix this. Do I need to add something to the project in PhoneGap or is it easier in Android Studio instead of PhoneGap?
I thank you in advanced for helping me. I am really new to Android.
The Header
<head>
<meta charset="UTF-8">
<title>Clash Royal</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
</head>
The script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
Header
<head>
<meta charset="UTF-8">
<title>Clash Royal</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Script
<script src="assets/js/jquery-3.2.0.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
I need to download it local and also link it local and then it works
I've met an odd bug. I use bootstrap switch to make a checkbox on my site as a switch.
but, when I use cdn to reference the js and css file, it does not work. I have to use local file. Note that bootstap file with cdn works very well.
This works:
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<link href="css/bootstrap-switch.min.css" rel="stylesheet">
But this does not work:
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<link href="http://cdn.bootcss.com/bootstrap-switch/2.0.1/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
For whatever reason my jQuery isn't working, yet it seems to work when I put it in JSFiddle. That being said, I assumed the library wasn't importing correctly so i double checked it and everything seemed alright. Here is the JSFiddle example. I included all of the code, including the links that I have in my index file. It works perfectly in JSFiddle, but when I try it on my host it doesn't work. I've tried a few browsers but that didn't seem to change anything.
<head>
<title>Artanes Development</title>
</head>
<link rel="icon" type="image/png" href="/img/favicon.ico">
<!--Links-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300|Abril+Fatface|Vollkorn:400italic,400|Open+Sans:800|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='script.js'></script>
Here are all the links i have at the top of my page.
You have uploaded the Project to Web hosting FTP.
You should be using:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and not:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I am working on a personal project with Bootstrap 3, but when I add things like modals/dropdowns, they don't work. I have looked at the code and it is all fine, so I am assuming that it is an issue with the linking of the files.
Header links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/carousel.css" rel="stylesheet">
Footer links:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I also have the modal which is an exact copy from the Bootstrap website and all of the code for that is correct.
Do i have to delete all of the other local CSS/JS files or something?
The HTML for he site can be found here.
As far as I can see you have not loaded the jQuery-Library. As indicated on Bootstrap's page, you need jQuery for any Javascript-Component of Bootstrap, see here
Make sure to load it before the Bootstrap Javascript, like this:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Then you should be all set up.
Looking at the HTML i could see that it is missing jquery library path. Please include it at the top before any other JS files in your HTML
You are not included jquery in your code, just include jquery.js before bootstrap.min.js
<!-- Core javascript and icons -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>