I am trying to build an Accordion but for some reason my jQuery file is not getting picked up. if someone can please help me out I would really appreciate it. This is what I have for my
HTML
$(document).ready(function() {
$('.list').on('click', '.list-control', function(e) {
e.preventDefault();
$(this).next('list-content').not(':animated').slideToggle();
});
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Clever Oscar </title>
<link rel="stylesheet" src="main.css">
</head>
<!--start of body-->
<body>
<h1>Clever Oscar</h1>
<ul class="list">
<li>
<button class="list-control">
Phase one
</button>
<div class="list-content">
Panal Context
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
In the jquery.slim.js animation effects like:
jQuery.easing, jQuery.Animation, jQuery.speed
are removed so use normal jquery. Also you miss . for class.
$(document).ready(function() {
$('.list').on('click', '.list-control', function(e) {
e.preventDefault();
$(this).next('.list-content').not(':animated').slideToggle();
});
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Clever Oscar </title>
<link rel="stylesheet" src="main.css">
</head>
<!--start of body-->
<body>
<h1>Clever Oscar</h1>
<ul class="list">
<li>
<button class="list-control">
Phase one
</button>
<div class="list-content">
Panal Context
</div>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Also see this old so question. What are the differences between normal and slim package of jquery?
Try this:
as you are missing $(this).next('list-content') here change it to $(this).next('.list-content').
Next thing you just use plain jquery library to achive this.
You may also achieve this by using .hide() and .show() functions.
$(document).ready(function(){
$('.list').on('click','.list-control', function(e){
e.preventDefault();
$(this).next('.list-content').not(':animated').slideToggle()
// you may also able to use hide() and show()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Clever Oscar </title>
<link rel="stylesheet" src="main.css">
</head>
<!--start of body-->
<body>
<h1>Clever Oscar</h1>
<ul class="list">
<li>
<button class="list-control">
Phase one
</button>
<div class="list-content">
Panal Context
</div>
</li>
</ul>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
Related
I am trying to create an input box with a date picker when a user clicks on it. I added JQuery CDN for the date picker, but it did not work.
$(document).ready(function(){
$("#dates").datepicker();
});
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel =
"stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<input type="text" id="dates" placeholder="enter a date">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6d0e0e5114.js" crossorigin="anonymous"></script>
</body>
When I click the input box, nothing happens. Are there any suggestions to tackle this issue?
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="style.css" rel="stylesheet"/>
<script>
$(document).ready(function(){
$( "#dates" ).datepicker();
} );
</script>
</head>
<body>
<input type="text" id="dates" placeholder="enter a date">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6d0e0e5114.js" crossorigin="anonymous"></script>
</body>
</html>
Actually, you are using slim and normal jquery both, so you need to remove slim jquery from the body tag because you are using jquery UI in a head section, so you can not remove normal jquery from head
Hello
I trying init bootstrap-year-calendar , i have no idea why its not working.
In this case i downloaded files but i was trying with npm with same effect.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap-year-calendar.css">
</head>
<body>
<h1>Hello, world</h1>
<div data-provide="calendar"></div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="bootstrap-year-calendar.js"></script>
<script>
$('#calendar').calendar();
</script>
</html>
You have to call the function after the dom content load finish. So try this
$( document ).ready(function() {
$('#calendar').calendar();
});
In jquery-3.3.1.slim.min.js not function fadeIn.
try use
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Written the following code to get the required result:
html file:
<div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="cat.jpg" alt="cat img">
</div>
JS File:
$(function() {
let i = 0;
$('#myImg').click(function() {
$(this).html(i++);
});
});
But, the console show error as follows:
Uncaught ReferenceError: $ is not defined
at script.js:1
Could you please help me to resolve this problem and explain to me why does this happen. And how can I know the number of click increment or not?
Click here for codepen link of my work.
Uncomment your link to jquery file i.e <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> and include your script.js after jQuery file. You are getting error because your <script src="script.js"></script> is before jquery. All you JavaScript which use jQuery must be after your jQuery file.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Click Cat | Sofia </title>
</head>
<body>
<div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/adorable-cat.jpg" alt="cat img">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<script>
$(function(){
let i=0;
$('#myImg').click(function(){
$(this).html(i++);
console.log(i);
});
});
</script>
</body>
</html>
$(document).ready(function(){
var i = 1;
$('#myImg').click(function(){
alert(i++); // here you can use html or whatever you want.
});
});
remove the alert and use whatever you want
It looks like you are trying to use jQuery in your javascript code, but you may not have properly included the jquery script file in your HTML.
You can load it in the head of your document from a cdn like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
After the jQuery script is included, you may want to modify your HTML to have an element that will hold the count (not the img element):
<div class="container">
<span id="click-counter">0</span>
<img id="myImg" class="img-fluid img-thumbnail" src="cat.jpg" alt="cat img">
</div>
Then adjust your js code:
$(function() {
let i = 0;
$('#myImg').click(function() {
i++;
$('#click-counter').text(i);
});
});
Here is a fiddle:
https://jsfiddle.net/2zxmhub4/1/
Can someone help me with this code. Is there any problem? Because I'm not able to display the calendar when I'm running it.
<!DOCTYPE html>
<html>
<head>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Holder"></div>
<div id="Datepicker1"></div>
</div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths:3
});
});
</body>
</html>
As mentioned in the comments, you haven't included jQuery or jQuery UI, and your HTML closing tags are incorrect. If you view the source of the demo on the jqueryui site, you will find the code is a little different you yours.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
To implement this into your code, it would be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="holder"></div>
<div id="datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#datepicker1").datepicker({
numberOfMonths:3
});
});
</script>
</body>
</html>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You have to include jQuery and jQuery UI (I changed a few things in your markup as well):
<!DOCTYPE html>
<html>
<head>
<!-- <link> doesn't need a closing tag -->
<link href="CSS/Master.css" rel="stylesheet" type="text/css">
<!-- include the jQuery UI style sheet -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- include jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="Datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths: 3
});
});
</script>
</body>
</html>
I have a page where I load another page into this page div section:
<doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TCS</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<script type="text/javascript"> LatexIT.add('p',true)</script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#tabs-1" ).load("b.html");
$( "#tabs-2" ).load("latex.html");
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Start</li>
<li><a href="#tabs-2">Latex/a></li>
<li>aaa</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
So, I load latex.html in it with next code:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<script type="text/javascript">
LatexIT.add('p',true);
</script>
</head>
<body>
<h1><p>Dividing $x^2+1$ by $y^2$ gives \[\frac{x^2+1}{y^2}\]</p></h1>
<p>The british pound is worth 1.5 US\$ or $1.1 \euro$</p>
</body>
</html>
If I load this page separately, I get correct Latex expressions, while if I load it into div I get pure text like [\frac{} and so on. What is the problem and a correct way to make it?
Index page code:
<doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TCS</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<script type="text/javascript"> LatexIT.add('p',true)</script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#tabs-1" ).load("latex.html");
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Latext</li>
<li>aaa</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
On latex.html page just put this(i remove all the other html tags):
<h1><p>Dividing $x^2+1$ by $y^2$ gives \[\frac{x^2+1}{y^2}\]</p></h1>
<p>The british pound is worth 1.5 US\$ or $1.1 \euro$</p>
Can you try this:
$( "#tabs-2" ).load("latex.html", function(){
LatexIT.add('p',true);
});