Bootstrap and javascript / Jquery in android - javascript

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

Related

Bootstrap's javascript requires jquery error in our client side login

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!

Angular with IBM carbon design

I am trying to user carbon component in my angular application.
I included the given scss "../node_modules/carbon-components/scss/globals/scss/styles.scss" in my angular-cli file.
Now I am trying to use Modal in my component class as suggest here. but it's not working.I am unable to use Modal custom event in angular component file.
I am stucked from 2 days now I am reading library. If anyone have experience of Carbon Component.Please suggest...
You can provide CDN links in your index.html
CSS https://unpkg.com/carbon-components/css/carbon-components.min.css
ES5 https://unpkg.com/carbon-components/scripts/carbon-components.min.js
as shown here.
example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SignupFormProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href=" https://unpkg.com/carbon-components/css/carbon-components.min.css">
</head>
<body>
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<app-root></app-root>
</body>
</html>

Chrome - "Trying to load script from unauthenticated sources"

I'm having some issues with my website. It runs and renders just fine, but I get the blocked scripts icon at the top right of the address bar. I don't want users to see this pop up when visiting the site. I can press "load unsafe scripts", which will make it go away but then my site is no longer https. I've tried rearranging the lines and tried other things as well in my html but I can't seem to find a solution.
The site uses bootstrap as well as 2 of my own CSS files and 1 JavaScript file.
Below is HTML head tag. And below that are the errors that Chrome is showing. Does anyone understand why this is happening?
<head>
<meta charset="utf-8">
<meta name="keywords" content="NASA,JPL,near,earth,objects,asteroid,meteor,neo,neowise,api,opendata">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nearing Earth</title>
<!-- Lines necessary for Bootstrap-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--My files-->
<link rel="stylesheet" href="neoRules.css">
<link rel="stylesheet" src="neoStyles.css">
<link rel="icon" type="image/ico" href="favicon.ico"/>
<script src="https://nearingearth.com/neoFunctions.js" type="text/JavaScript"></script>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js" type="text/javascript"></script>
<script src="/js/respond.min.js" type="text/javascript"></script>
<![endif]-->
</head>
Error 1:
Mixed Content: The page at 'https://nearingearth.com/' was loaded over
HTTPS, but requested an insecure script
'http://code.jquery.com/jquery-latest.min.js'. This request has been
blocked; the content must be served over HTTPS.
Error 2:
Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
neoFunctions.js is loading jquery without SSL. It's nothing to do with your HTML. I'd maybe recommend downloading neoFunctions.js and modifying the script to replace instances of http:// with https:// and host it on your own server.

Semantic UI Javascript not working

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();

Jquery doesn't have an effect on my elements

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>

Categories

Resources