Dygraph code crashes on IE8 - javascript

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.

Related

Calling py-script function from button-click with "pys-onClick=..." doesn't work?

I'm relatively new to PyScript and would like to run a function when a button is clicked.
However, no matter what code I try, it doesn't seem to work. The button is clickable but doesn't appear to do anything.
When I call the function manually (inside the py-script tag) it works fine.
Am I missing something?
Here's my code and thank you for helping:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Test</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<button id="test" type="button" pys-onClick="speak">run test</button>
<py-script>
def speak():
print("hello")
</py-script>
</body>
</html>
As it develops, some things in PyScript are moving targets. A couple of things about your code. First pys-onClick has been deprecated in favor of py-onClick in the more recent releases (including 'latest', which you use here). Second, to call the function from the button element, the syntax should currently read py-onClick="function()" (pys-onClick="function" did work in earlier releases). Finally, and I'm open to correction here, the 'print' method in your python code prints to the console (if you open the developer tools, you'll see it printed to the console each time you call the function). If you want the text to appear on the page, you'll need to write to the DOM. If I understand your intent correctly, this code will give you the result you're looking for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Test</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<button id="test" type="button" py-onClick="speak()">run test</button>
<div id="display"></div>
<py-script>
def speak():
Element('display').write("Hello")
</py-script>
</body>
</html>
Keep in mind, as PyScript evolves, this syntax may not work with future releases as the developers and maintainers refine the framework. Unfortunately, there's not a lot in the way of documentation for PyScript yet. If you'd like to explore, you can find what documentation there is at https://docs.pyscript.net/latest/. For now, your best bet for guidance is taking a look at the examples at https://pyscript.net/examples. Cheers!

Edge throws undefined error when accessing module variable through eval

I can't mimic this in a snippet, but use the following code to reproduce:
Windows 10 || Edge-version: 42.17134.1.0 || EdgeHTML: 17.17134
I'm using ES6-modules
import * as variable_name from 'file'
console.log(variable_name); //will return an [object module]
console.log(eval("variable_name")); //returns undefined error 'variable_name is not defined'
Chrome works fine this way.
SAMPLE HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="module" src="module.js"></script>
</body>
</html>
You define variable_name as a variable value so you should use it without quotation marks. Maybe the syntax rule is not so strict in Chrome so it works fine with quotation marks. You could modify it into console.log(eval(variable_name));, then it can work well in both Edge and Chrome.

Change content of Meta-tags for IE

I have got code as below. I want change content of Meta-tags IE=Edge. But this code only in browser"chrome", browser"IE11" inactive. The people help me, please!!!
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="IE=EmulateIE7">
<script src="../js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="IE=Edge">' );;
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
please you can see this page:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
It forces the browser the render at whatever the most recent version's standards are. Just like using the latest version of jQuery on Google's CDN, this is the most recent, but also can potentially break your code since its not a fixed version.
Last, but not least, consider adding this little tidbit:
See the page
Page 2

Head tag in html page closes programatically after page load

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>
....

enquire.js not responsive in IE9

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

Categories