I recently upgraded the Dygraphs library for a client's website, and it now doesn't render properly in IE8 (Yes, I know what you're thinking, but by client's clients love using IE and won't upgrade).
I have the following headers (obviously I haven't put the real domain on there for this post):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Live Data</title>
<link rel="stylesheet" href="http://mydomain.com/css/main.css" type="text/css" />
<link rel="stylesheet" href="http://mydomain.com/css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" />
<!--[if IE]>
<script type="text/javascript" src="http://mydomain.com/js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://mydomain.com/js/dygraph-combined.js></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery.jec-1.3.0.js"></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="http://mydomain.com/includes/DataTables-1.7.4/media/js/jquery.dataTables.js"></script>
There are no errors in the console / debug panel, and when I hover the mouse over where the line should be, the legend shows in the corner as it's supposed to, with the correct data. Also, the Axis labels and values show up fine.
What could be causing the data line on the graph not to show up?
There is a very specific recommendation for the "X-UA-Compatible" header at http://dygraphs.com/#ie. Give it a try:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
Related
I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.
I'm trying to implement swiping of image using html and javascript for phonegap application, following this demo PhotoSwipe there it works fine, but after adding into my project, not able to swipe the images. and even linked the js files correctly still i get this error in logcat "Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/examples/01-default.html:26"
any idea on my issue? Thanks.
swipe code
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="/libs/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"> </script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.js"></script>
<script type="text/javascript" src="photoswiper.js"></script>
}
Add the js files before the script that you have written, it might be the cause of the problem because the photoswipe features that you are trying to use in the script have not been loaded and hence are not available yet.
I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.
I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.
The main html file contains following javascript source
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello Worlds</title>
<link rel="stylesheet" href="css/main_page.css" type="text/css"/>
<link rel="stylesheet" href="css/page_content.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/main_page.js"></script>
<script type="text/javascript" src="js/page_content.js"></script>
<script type="text/javascript" src="js/configurator.js"></script>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
one of the form's post called a javascript function which belongs to page_content.js file.
I am trying to inovke the function using following
$scripter->get('javascript:submitForm()');
but it's not working. Please help me how can I call the function which belongs to the page_content.js file.
If the html page (with address stored in $url) contains (internally or externally) JavaScript that define function/procedure submitForm() then you can execute it by the following code:
use WWW::Scripter;
$w = new WWW::Scripter;
$w->use_plugin('JavaScript');
$w->get($url);
$w->eval('submitForm();');
For more information see WWW::Scripter documentation.