EDIT:
In here, it shows this as being a comment. In my IDE, it shows this as being code. So weird (Code set #2):
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
I have two files. One has comments and one does not. The first set of code functions perfectly. The second set of code tells me Uncaught ReferenceError: $ is not defined in the JavaScript console, and the alert is not called. Why are the comments affecting my script?
Code Set #1
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function () {
alert("JQUERY!");
});
</script>
</body>
</html>
Code Set #2
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->
</head>
<body>
<script>
$(function () {
alert("JQUERY!");
});
</script>
</body>
</html>
These are no ordinary comments, but conditional comments.
See: http://www.quirksmode.org/css/condcom.html
The comment above comments all javascript includes, thus they are not loaded, except in Internet Explorer lower than Version 9.
You get the error message because jquery is not loaded (it is inside the HTML comments). If you Use e.g. IE8 there won't be an error.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->
The if construct there is a conditional comment used for IE.
The script tags will only be rendered if you're using an IE with a version number greater than 9. Every other browser will treat that whole section like a single comment and not include any of that javascript.
Your file is expecting jQuery to be loaded. It seems that you commented out the jQuery script, you have to include the jQuery script, uncommented:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
It won't be run by the browser right? It will only be in every case streamed by the server, and downloaded by the client.
It shouldn't make any difference, as long as you don't have too many characters
Although dynamic pages generated server side, you might have to use server-side comment such as: <%-- comment --%> or {% comment %}
<!--[if lt IE 9]> & <![endif]--> are conditional comments for IE. Other browsers will read them as comments. If you are using an IE Version later than 9 these scripts will be loaded, which could be causing conflicts with other scripts.
Related
I found the following image map resizer so my image map will be responsive:
https://github.com/davidjbradshaw/image-map-resizer/blob/master/README.md
Following the instructions I placed the following code in the head:
<script src="imageMapResizer.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lte IE 8]>
<script type="text/javascript" src="js/ie8.polyfil.min.js"></script>
<![endif]-->
But I don't know where to place the code:
imageMapResize([selector || map object]);
It says to put it at the bottom of the page. I tried placing it inside of the and outside the tag but it's still not working. Where am I supposed to put it??
You "should" add the script-tag just before the closing body-tag (there are a lot great articles about that topic):
<script></script>
</body>
</html>
Note, that you have to include a library before you "execute" it ;)
It seems your selector is wrong. Try this:
<script>imageMapResize('[name="faith_boosters_map"]')</script>
If you have confusion using vanilla-javascript you could use jquery which is also supported by that library, put the below code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="imageMapResizer.min.js"></script>
<script>
$(document).ready(function() {
$('map').imageMapResize();
});
</script>
I want to only load the html5shiv.js file if the web browser is less than IE 9.
The code I have is
<doctype html>
<html>
<head>
<!--[if lt IE 9]
<script type="text/javascript" src="html5shiv.js"></script>
-->
</head>
<!-- ... -->
</html>
When I test to see if this works or not (I do this by changing the Browser Mode option to a version lower than IE 9 in Developer Tools - I'm not clear as to whether this works or not.
Does this work for you - or is the code atleast right?
You may be missing a chevron at the end of the first line and the closing tag:
<!--[if lt IE 9]>
<script type="text/javascript" src="html5shiv.js"></script>
<![endif]-->
I'm trying to get bootstrap and less.js working but I can't succeed...
I have not worked much with less in the past, so I'm wondering if I'm missing something...
It is runing on a synology server. On runtime it seems to generate the boostrap css as it should "less:sandbox-css-bootstrap" is append to the html but it does'nt get the value from variables.less
Here's my head
<meta charset="utf-8">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet/less" type="text/css" href="css/bootstrap.less">
<script type="text/javascript" src="js/less-1.3.3.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
Does anyone know what am I doing wrong?
Thanx in advance
Change the order of your initialization. Place dependencies above the others. like place bootstrap.less above all other CSS's
I was trying to use Dygraphs in web application. Please see below simple code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyHtml.html</title>
<!--[if IE]>
<script type="text/javascript" src="/js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/rgbcolor.js"></script>
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
<script type="text/javascript" src="/js/dygraph-combined.js"></script>
<script type="text/javascript" src="/js/dygraph.js"></script>
<script type="text/javascript" src="/js/CanvasRenderingContext2D.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv"), "Date,Temperature\n" + "2008-05-07,75\n" + "2008-05-08,70\n" + "2008-05-09,80\n");
</script>
</body>
</html>
If i include the line
type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"
with the scripts it works fine in firefox and chrome and it wont work in IE, it gives error like 'CanvasRenderingContext2D' is undefined. If i download the dygraph-combined.js and include it in my web application and access it by giving path, it wont work in all three browsers, it gives an error message Dygraph not defined. Please help me. I want to know why this is happening.
You should only need to include dygraph-combined.js, whether from your website or your own site. Did you include excanvas.js on your site? This could explain why it's not working in IE8.
The problem might be that scripts which are in /js/... are not accessible for any of your browser.
It explains why in the case you refer to remote dygraph-combined.js, only IE doesn't work - it needs excanvas.js referenced from /js/...
In the case you downloaded dygraph-combined.js and replace the remote reference to /js/... then no browser works as they can't access the /js/dygraph-combined.js
Check accessibility of /js/dygraph-combined.js and /js/excanvas.js. Should there be the reference without leading slash e.g.: js/dygraph-combined.js?
And as previously mentioned, remove all other script references (except dygraph-combined and excanvas.js). Dygraph-combined already contains everything in one file and excanvas is needed for IE.
I am using the highcharts charting library,
i am including excanvas if the browser is ie using
<!--[if IE]>
<script type="text/javascript" src="<script type="text/javascript" src="excanvas.compiled.js"></script>
<![endif]-->
yet i still get
'G_vmlCanvasManager' is undefined
is it a typo?
yours is
<!--[if IE]>
<script type="text/javascript" src="<script type="text/javascript" src="excanvas.compiled.js"></script>
<![endif]-->
should it be?
<!--[if IE]>
<script type="text/javascript" src="xcanvas.compiled.js"></script>
<![endif]-->
I also get this error. It was a I was referencing 'G_vmlCanvasManager' in my javascript instead of 'window.G_vmlCanvasManager'