This question already has answers here:
jQuery not linking with HTML file
(3 answers)
Closed 4 years ago.
Can anyone see any issues with the following code and why my site wouldn't link up with Jquery?
<!DOCTYPE html>
<html>
<head>
<script src ="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Page Title</title>
</head>
<body>
If code in script.js is dependent on jquery then change the order of loading
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="script.js" type="text/javascript"></script>
Related
I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></script>
</body>
</html>
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
How to fix '$' was used before it was defined in both jslint and jshint using coding?
(2 answers)
Closed 8 years ago.
This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:
"$ was used before defined".
I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.
I referenced the HTML file to the js file like this
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
and this is my script
$(document).ready(function () {
"use strict";
$('div').mouseenter(function () {
$(this).animate({
height: '+=10px'
});
});
});
Reference the JQuery library in your page, like this
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Include this tag above the script tag of your js file
Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.
You should organize your HTML DOM like that :
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</body>
1.You should call Jquery library before calling your project JS file's.
The problem here is that you are using jQuery without actually including that library of code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.
NOTE: It is best practice to include your scripts just before your closing body tags.
This question already has answers here:
Using Media Queries To Only Include JS Files On Mobile
(3 answers)
Closed 8 years ago.
I'd like to know how to import a specific JS script for my mobile device...
Something like this :
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link href="stylesheets/bottom.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="components/normalize-css/normalize.css">
<link href="stylesheets/app.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body>
// Only for media screen and (max-width : 500px)
<script src="modile.js"></script>
</body>
</html>
You can do something like this:
<script>
if (window.screen.width <= 560) {
// load the script you need
} else {
// load another script
}
</script>
You can load scripts using jQuery getScript for example;
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm still new to all this, and very touchy-feely about it all, but I think I'm getting the hang of it.
I'm trying to use pageslide.js jquery script, and I've managed to make it work, but only if there's a;
></script>
after the /head tag, which leaves a > at the top of the page. I guess I could hide it, but I'd rather work out why. Any clues where to look?
The head currently looks like this;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
></script>
<script src="jquery-1.7.1.min.js"></script><script src="jquery.pageslide.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<body>
yada yada
If I take this away, the script stops working. Just confused!
Thanks in advance!!
You should keep your script tag inside your <head></head> tag or into your <body></body> tag.
You have put it between them.
This should be the boilerplate code:
<html>
<head>
<title></title>
<script></script>
</head>
<body>
yada yada
</body>
</html>
Try this and tell me if it works:
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="jquery-1.7.1.min.js"></script><script src="jquery.pageslide.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
</head>
<body>
yada yada
You should close </head> before the <body>
the reason it does that is because the browser sorts tags that aren't explicitly inside a <head> or <body> to their appropriate position.
so if you have <link> and <script> tags between </head> <body> the browser will then put those tags inside of the <head> tag because their generally associated with the head tag.
but when you put the > in front of that, the browse now will stop putting tags in the <head> and instead put everything else in the <body> because > is just plain text, and plain text belongs in the body along with other html tags like <div>,<span>, etc.. that being the case you can put any text in the place of > and it will still 'work'(in your case).
this is very cool because you can leave out the <html>,<body> and <head> tags out completely thus:
this
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
></script>
<script src="jquery-1.7.1.min.js"></script><script src="jquery.pageslide.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<body>
yada yada
is the same as
<!doctype html>
<meta charset="UTF-8">
<title>Test</title>
<div></div>
<script src="jquery-1.7.1.min.js"></script><script src="jquery.pageslide.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
yada yada
in short terms:
adding ></script> is the difference in the browser putting
<script src="jquery-1.7.1.min.js"></script><script src="jquery.pageslide.js"> </script>
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
in the <body> or in the <head> tag
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
ASP.Net MVC 3 Razor: Include js file in Head tag
I don't want to put a lots of JS into some layout and I need to do it for some specific pages I mean to include some of the JS into their header.
I've tried like that but it doesn't work as it should be.
#{
Layout = "~/Views/Shared/_LayoutInner.cshtml";
#Scripts.Render("~/Scripts/farbtastic/farbtastic.js")
#Styles.Render("~/Scripts/farbtastic/farbtastic.css")
#Scripts.Render("~/Scripts/jquery.tinycarousel.min.js")
#Scripts.Render("~/Scripts/jquery-ui-1.8.11.min.js")
}
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#slider1').tinycarousel();
$("#accordion").accordion();
$('#picker').farbtastic('#color');
});
</script>
I have tried like that
#{
Layout = "~/Views/Shared/_LayoutInner.cshtml";
<script type="text/javascript" src="#Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
<link href="#Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
}
and no success at all.
How I can archive it?
I'm sure in your _LayoutInner.cshtml you should have refered JS files similarly like this
<head>
<link href="#Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
</head>
To achieve your target you have to add two named sections into your _LayoutInner.cshtml pages head section like this-
<head>
<link href="#Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
#RenderSection("JavaScript", required: false)
#RenderSection("CSS", required: false)
</head>
Now in your other pages to include extra javascript or css pages use these named sections
#section JavaScript
{
<script type="text/javascript"src="#Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
}
#section CSS
{
<link href="#Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
}
It is upto you whether to include different named sections for javascript and css.
Hope it helps!