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;
Related
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>
I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
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:
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!