The following HTML does not display a graph on IE8. Works fine on Firefox, Chrome, and IE9 and IE10. On IE8 all I can see are the captions (the dates) and "Barometric Pressure".
dygraph-combined.js is the current version. First six lines are as recommended. If you take the width option out, it works.
Just to make life more interesting, if I replaced width by ylabel:'millibars' it doesn't display the label. Gawds I hate IE.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<!--[if IE]><script src="/excanvas_r3/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="dygraph-combined.js"></script>
<title>Real-Time Hydrologic System</title>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
"http://ra-tes.org/bigrain-14.csv" , { width: 600 }
);
</script>
</body>
</html>
Related
I am following a tutorial and I am trying to create an svg element using d3. however when I run it and inspect the page on chrome, the svg element isnt showing up in the body. I'm sure that the .html file is referencing the correct js file, but I cant figure out why the element isn't appending
this is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="/text/javascript" src="d3.v3.min.js">
</script>
</head>
<body>
<script type="/text/javascript" src="shapes.js"></script>
</body>
</html>
and this is my js code
var dataArray = [2,13,15];
d3.select("body").append("svg");
It's your type attributes on your script tags:
/text/javascript
is not valid, it's:
<script type="text/javascript" src="shapes.js"></script>
With no leading slash...
I have been working on a site with leaflet, testing in Chrome in Windows. I've discovered that when I view it in other browsers (specifically Firefox or Chrome on MacOS, IE in Windows, Chrome on Android) the zoom is different: the effect is identical to zooming to 125%, making the zoom inside the map work differently but also making all text etc. appear slightly blurry. If I change the browser zoom to 75% on IE, it looks identical to the Chrome version. Here's a screenshot with side-by-side comparison.
Here's a simplified version of the code which is producing this problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<script>
</script>
<link rel="stylesheet" href="styles_dark.css" />
</head>
<body>
<div id="mapdiv"></div>
<script>
// settings
var northWestCorner=L.latLng(53.85,-5.48),
southEastCorner=L.latLng(51.03,-2.44),
mapBounds=L.latLngBounds(northWestCorner,southEastCorner);
var mainMap = L.map('mapdiv', {
maxBounds:mapBounds,
minZoom:8,
maxZoom:13
}).setView([52.16, -3.65], 9);
// create map
L.tileLayer('http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
}).addTo(mainMap);
</script>
</body>
</html>
#mapdiv{top:0vh;left:0vw;height:100vh; width:100vw;vertical-align: top;}
body{margin:0px;padding:0px;}
#mapdiv{padding:1px;}
.text-center {padding:1px;}
::-webkit-scrollbar {
display: none;
}
Any idea why this might be happening?
Thanks very much in advance!
My page is located here
As you can see, it doesn't look like it's working properly. This becomes very apparent if you try to open it in an older browser (this is what initially set me off).
I checked the interpreted source code from chrome and it shows me the following:
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<title>Internet adgang - Hurtig opsætning - Ansatte</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Etc..
Something seems to be closing my head tag which is causing all SORTS of errors:
W3 validator
I have absolutely no idea what is causing this.
You can see my source code here (I've scrambled the PHP):
The code above does not contain my body code, as I am fairly sure that has nothing to do with the head tag closing all of a sudden.
Here is some source of a page that works just fine:
I am completely baffled by this and I have no idea what to do nor what is causing it.
Any ideas?
Solution
With the help of Buttc4k3 and vogomatix I finally found the solution. As buttc4k3 said, there was an illegal "zero-width no-space" character hidden in the file which didn't show in my sublime text editor. It would only show if you opened the file in Notepad++. I could not understand why this character would appear in google chrome, and not in my source, but after googling it, I found that a file saved in UTF-8 WITH BOM (Byte Order Marking) would save the BOM as a zero-width no-space character! This was where vogomatix saved me and told me that my file was saved with BOM and after recoding it without BOM it works fine.
So - if you have the same problem as me - save your file WITHOUT BOM ENCODING (this can be done in notepad++).
I took the page source of your website and pasted it in Notepad++ and found a zero-width no-break space in line 3 column 5. It renders invisible in most editors/viewers, but it breaks the HTML parser of the browser. I don't know how or why it got there since I can't find it in the PHP code, but maybe you can find it by opening your code in Notepad++. It renders this character as a tiny dot. If you can't find it, delete everything from and including <head> to <title> and re-type it.
I hope this works.
PS: Even though it is not the reason why your page is broken, you should add <html> and </html> to the markup. Most browsers can deal with its absence, but it is there for a reason.
It seems like you are missing the <html> tag.
Current HTML-Code:
<!DOCTYPE html>
<head>
<title>Internet adgang - Hurtig opsætning - Ansatte</title>
Must be something like that:
<!DOCTYPE html>
<html>
<head>
<title>Internet adgang - Hurtig opsætning - Ansatte</title>
[...]
</head>
<body>
[...]
</body>
</html>
Edit the first part of your site to be as follows:
<?php
include 'XXXXX';
include 'XXXXX';
if(!isset($_GET['lang'])) {
$lang = "DA";
} else {
$lang = $_GET['lang'];
}
?>
<!DOCTYPE html>
<html lang="<?php $lang; ?>">
<head>
<title><?php echo trans("Internet adgang - Hurtig opsætning - Ansatte", $lang); ?></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="resources/styles/style.css" media="all">
<script src="resources/js/jquery.min.js" type="text/javascript"></script>
<script src="resources/js/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/au-flowbox-style.css">
<script type="text/javascript" src="resources/js/au-flowbox.js"></script>
<script type="text/javascript" src="resources/js/au-flowbox.data.js"></script>
</head>
<body>
....
My dygraph code does not work on IE8. The Console shows this error:
SCRIPT5009: 'CanvasRenderingContext2D' is undefined
dygraph-combined.js, line 2 character 13300
This is the line that crashes in "dygraph-combined.js":
CanvasRenderingContext2D.prototype.installPattern=function(e){if ...
The graph is correctly displayed on IE9 and IE7, using the exact same code.
None of the possible solutions that I have researched have worked yet (many of them being just "include excanvas.js").
Edit1: after David Kiger's feedback, I have tried formatting the header exactly as required, but it still does not work. I have also removed Yii's bootstrap to isolate the problem. This is the exact code:
<!-- DOCTYPE html -->
<HTML><HEAD>
<META content="IE=EmulateIE7; IE=EmulateIE9;" http-equiv=X-UA-Compatible>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="/js/dygraph/excanvas.js"></SCRIPT>
<SCRIPT type=text/javascript src="/fonto/js/dygraph/dygraph-combined.js"></SCRIPT>
</HEAD>
Commenting this line in excanvas.js did not work either:
//el.style.overflow = 'hidden';
Edit2: SOLVED!
So I had to combine both solutions:
Format code for IE...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9;">
...AND commenting the line in excanvas.js
//el.style.overflow = 'hidden';
The order is also very important:
First excanvas.js
Then dygraph-combined.js
Thank you so much for your feedback.
I'm running a very simple enquire.js test as per the enclosed and finding that it doesn't get a response from IE9. Several other browsers are responding fine (FF, Chrome, Safari). I've tested the test-suite from GITHUB in IE9 which runs fine - so I must be missing something. Any help appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>enquire.js test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="frame">hello</div>
<script src="js/libs/jquery.1.7.1.js"></script>
<script src="../dist/enquire.js"></script>
<script>
$(document).ready(function(){
enquire.listen(50);
enquire.register("screen and (max-width: 1000px)",
{
match : function(){
$("#frame").css("background-color","#f00");
},
unmatch : function(){
$("#frame").css("background-color","#0f0");
},
});
});
</script>
</body>
</html>
IE9 does not support the matchMedia API so you have to include a polyfill to get it to work. You can add the polyfill to the page however you like, providing it's loaded before enquire. Personally I use Modernizr to conditionally load polyfills, but that's personal preference.
Hope that helps