When looking at various web pages, I sometimes see statements like the following in the source. These examples are taken from a few different sites.
<script type="text/javascript" src="js/jquery.min.js?v=1.5.1"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js?v=1.8.13"></script>
<script type="text/javascript" src="/js/skin/core.js?ver=5212"></script>
<script type="text/javascript" src="/js/skin/plugins.js?ver=5212"></script>
<script type="text/javascript" src="/js/skin/mainpage.js?ver=5212"></script>
<link rel="stylesheet" href="/css/site.css?ver=5212" media="screen" />
<link rel="stylesheet" href="/css/global.css?v=04.23.2012.01" type="text/css" />
<script type="text/javascript" src="/stuff/lib/site.js?v=04.20.2012.00"></script>
<link rel="stylesheet" type="text/css" href="http://css.nyt.com/css/0.1/screen/build/homepage/styles.css?v=20120119">
Can someone explain what these are for and what script is being used for it? Is this so different versions of CSS/JS can be kept and sent based on the version number?
This is for cache-busting; changing the parameter ?whatever forces the browser to download the file again instead of fetching it from the cache.
It's there so browsers that have cached a previous version of those files will request a new copy. By adding the version numbers or dates they are essentially creating a new name for the file thus bypassing caching.
Related
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.
I have an issue with yepnope that is driving me crazy, and I spent a good amount of time searching for the answer with no luck.
First, I am using device.js to detect screen size, it will throw an desktop class in the tag if it detects a desktop. On the desktop I want another script to be loaded which will then give functions to a certain class (on mobile devices, the script will not load and the certain classes will remain static.)
However, when yupnope executes, it throws my script on TOP of all the other scripts in my head tag and will not execute and run. I know the script works because I manually put it in on the bottom of my other scripts. My question is how can I make yepnope load the script last instead of putting it on the very top of the other scripts? I have a nagging feeling that this is where a callback comes in but I am still trying to get ahold of javascript!
this is my yepnope code:
$(document).ready(function(){
if ($('.desktop').length !=0) {
yepnope({
load: "js/jquery.malihu.PageScroll2id.js",
});
};
});
This is my html:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
The yepnope condition is in the file scripts.js which executes last but still puts the jquery.malihu.PageScroll2id.js script that is called on top which is wrong order then as shown in this code:
<script src="js/jquery.malihu.PageScroll2id.js"></script> //script on top = BAD!!
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I have a master page with the following lines inside my <head> tags.
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
When I navigate to a page that uses URL routing, the lines above generate the following HTML.
<link href="../../Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
Based on the mapped URL, the stylesheet link is correct. How can I get the script link to also be correct?
P.S. I tried setting runat="server" in the script link but that just seems to confuse ASP.NET. The entire project fails to compile based on bogus errors reported in my JavaScript file. (The javascript file runs fine otherwise.)
It looks like the best answer is this:
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src='<%= ResolveClientUrl("~/Scripts/navmenu.js") %>' type="text/javascript"></script>
Note that if I use the ResolveClientUrl() for the stylesheet <link> tag, it doesn't work. Apparently, there is special handing for this tag.