<head>
<script type="text/javascript" src="customScript.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/facebookicn.png">
<title>Facbook</title>
<link href="dist/css/jumbotron.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
//this is in coustom.js file
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
//this is in html
<div class="col-md-6 txtfeild ">
<input id="firstName" class="form-control" placeholder="First Name" type="text" onblur="validateName()" >
</div>
i am getting error like this
customScript.js:1 Uncaught ReferenceError: $ is not defined
at customScript.js:1 tried many methods but cannot resolve this error
Your customScript fires before you are importing the jQuery script. Move the import line above the customScript import.
<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script type="text/javascript" src="customScript.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
jQuery is loaded after you load customScript.js so the variable $ is undefined.
You have to insert the script after you load jQuery.
<head>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="customScript.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/facebookicn.png">
<title>Facbook</title>
<link href="dist/css/jumbotron.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
in order to use Jquery in your script you first need to load it
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
add this line before your customeScript to add jquery through cdn or set the path to the jquery files if you have downloaded it
Related
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
I'm trying to load a layout((https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045#add-comment) but my efforts are turning unsuccessful.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--font -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css"></script>
<!-- Bootstrap CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
<!-- Custom stlylesheet -->
<link href= "signup.css" type="text/css" rel="stylesheet" >
</head>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="icon" href="signup.js">
</body>
The code above shows the links for the template, the Stylesheet and JavaScript. I really don't know what I am missing that would cause it not to reflect.
For CSS, you should use <link rel="stylesheet">(...)</link> instead of <script> tag
As far as i can notice,
there is no starting <body> tag or starting <div> tag.
Maybe you copy-pasted it wrong, please look into it and try again.
Head section sould be something like
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--font -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" type="text/css" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<!-- Custom stlylesheet -->
<link href= "signup.css" type="text/css" rel="stylesheet" >
</head>
I'm using angular and angular-route. The index.html looks like this:
<!DOCTYPE html>
<html lang="en" ng-app="Showcase">
<head>
<meta charset="UTF-8">
<title>UCSD Showcase</title>
<base href="/showcase/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="routes.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/initGlobalHelpers.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="#########################################">
<meta name="keywords" content="###############################################">
<meta property="og:url" content="#">
<meta property="og:site_name" content="CSES OSS">
<meta property="og:image" content="############################################################################################">
<meta property="og:description" content="#">
<meta property="og:type" content="website">
<meta name="twitter:site_name" content="CSS OSS">
<meta name="twitter:site" content="################">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="#">
<meta name="twitter:image" content="#">
<meta name="image" content="#">
<link rel="stylesheet" media="all" href="./styles/style.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>
And then for my home page when I'm using
<h1>This is the home page</h1>
<script src="home.html"></script>
I get the a warning
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4
and an error
SyntaxError: Unexpected token < angular.js:13550
However when I replace that script that by the content of the script which basically ends up looking like:
<h1>This is the home page</h1>
<script>
console.log('Hi!');
</script>
Then it works.
Why is this happening and how can I fix it?
Use ngInclude instead of html script tag
<div ng-include="'home.html'"></div>
See ngInclude docs here
I have a website which import some js and css files on the head tag, but when I open the website by chrome,The entire page layout is completely wrong and looks like js and css files is valid. Who can help me? Thanks.
some problem page's code as follow,every js and css files in my code are available
you can try some url
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--禁用移动设备缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
<script src="http://xmumap-code.stor.sinaapp.com/js/jquery-1.11.2.min.js"></script>
<script src="http://xmumap-code.stor.sinaapp.com/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://xmumap-code.stor.sinaapp.com/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/swiper.min.css">
</head>
Thanks again!
Hi in the below code datepicker() is not working using jquery.But separately it's working fine.
After adding the code into my page it's not working this is my sample code.
html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Admission Form</title>
<link rel="stylesheet" href="css/admissionform.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.date-picker').datepicker();
});
</script>
<link rel="stylesheet" href="css/flexslider.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
You have multiple calls to jQuery:
<script src="js/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Leave only only call (before any use of jQuery). Also check DevTools console for other errors (if any).
Also, you have <input id="datepicker"> but call datepicker for class selector .date-picker
Input element is with ID datepicker but you have used the class selector to create datepicker
<input type="text" id="datepicker">
jQuery('.date-picker').datepicker();
use id selector
jQuery('#datepicker').datepicker();
Check Console for errors
You have used 2 jquery files which might also cause some issue
I'm trying to get a mobiscroll scroller in my web app. I tried following their most basic tutorial found here: http://docs.mobiscroll.com/25 and I don't get anything to show up. I'm a super huge noob when it comes to javascript and feel dumb that I can't get through a three line tutorial. Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<style>
...
</style>
...
<input id="scroller" name="scroller" />
...
</body>
<script type="text/javascript">
...
//google analytics stuff
...
$(function(){
// create a datetimepicker with default settings
$("#scroller").mobiscroll().datetime(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'datetime' });
});
</script>
</html>
You have to inlcude the downloaded mobiscroll js and css files in the head section (after jquery). Also, move your initialization code before the closing </body> tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<!--Mobiscroll-->
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
</head>