I created an angular.js application which now needs to work in IE 7 and more. My application works correctly on other browsers.
I have been trying to insert id="ng-app", xmlns:ng, boot angular manually with angular.bootstrap(document, ['myApp']), include json3.js, ... Nothing works for me.
I'm trying to insert some data on my html to view if angular is parsing my document, but not ...
It's interesting to know that my route seem to work ( in my app, you need to be loggued to access other page, and if i'm trying to go on domain.ext/#/myRoute , I'm correctly redirected to domain.ext/#/ )
This is my actual index.html ( {{toto}} isn't parsed and my ng-view is always blank ):
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" xmlns:ng="http://angularjs.org"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" xmlns:ng="http://angularjs.org"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My Title</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<!--<script src="js/vendor/json3.min.js"></script>-->
</head>
<body class="ng-app:myApp" id="ng-app">
<div ng-app="myApp">
<nav class="top-bar" ng-controller="MainCtrl">
{{toto}}
<!-- some html with some ng-show and ng-hide -->
</nav>
<div>
<div ng-view="ng-view"></div>
</div>
<script src="js/vendor/custom.modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular.cookies.js"></script>
<script src="js/vendor/angular.upload.js"></script>
<script src="js/app/main.js"></script>
<script src="js/app/articles.js"></script>
<script src="js/app/medias.js"></script>
<script src="js/app/categories.js"></script>
<script src="js/app/users.js"></script>
<script src="js/app/keywords.js"></script>
<script src="js/foundation.min.js"></script>
<!--
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
-->
<script>
$(document).foundation();
</script>
</div>
</body>
</html>
Sorry if my english is so bad,
Thanks for your help
Jerome
The solution provided in this related question will be of help:
Related IE7 and AngularJS SO Question
I have successfully used the same approach for IE7 as described there.
I would suggest that you read this page http://docs.angularjs.org/guide/ie
Angular doesn't play well with IE7 by default.
I started working on a module recently to help with the implementation of angular and IE7. There are many hurdles you have to take to try and get it working. Give it a try and see if it works out for you.
https://github.com/johngeorgewright/angular-ie7-support
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Jquery alert example</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#event').click(function(){
alert("hello world");
});
});
</script>
<input type='button' id='event' class='btn btn-success' value='click me'>
</div><!--container ends here-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/wow.min.js"></script>
</body>
</html>
When I am clicking on alert button event is not working. I have attached jQuery file also. One more doubt for me does jQuery syntax need to change if I upgrade from jQuery version 1 to version 3. Please notify me where I am doing a mistake and guide me how I can avoid this problem.
Yes put your jquery library at the top before your jquery code. It will work and the proper way of writing events is:-
jQuery('#event').on('click', function(){
alert("hello world");
});
Place the following script tag:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#event').click(function(){
alert("hello world");
});
});
</script>
under the jQuery script tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
First import basic .js file after write code for jquery:
$('#btnID').click(function(){
alert('welcome')
});
I have been implementing Routing in my app following the tutorial
http://docs.angularjs.org/tutorial/step_07
I couldn't get my version to work in IE7, and after spending a while trying to work out what I have missed / done wrong I have noticed that the example doesn't work.
http://angular.github.com/angular-phonecat/step-7/app/
Anyone know how to get this to work?
OK I had the same problem so I started the bounty, but after that I found the working solution (for me at least):
Use HTML5 shim
Use JSON2.js
Add all these attributes to your html node:
class="ng-app:myapp" id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"
(where myapp is really your app name)
So to recap, here is my IE7/8/9 working HTML page:
<!DOCTYPE html>
<html lang="en" class="ng-app:myapp" id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="js/json2.js"></script>
<![endif]-->
</head>
<body>
<div ng-view></div>
</body>
</html>
I'm trying to integrate Coin Slider into my page, and I've downloaded and attached the latest Jquery to my header, along with all of the necessary Coin-slider files. However, the page simply stacks the images as if I had simply inserted tags.
The paths for all of the files are correct. I tried following his instructions to the letter on the "how to install" page, with no success. It won't work in IE8, or the latest versions of Chrome or Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/paradigm.css" type="text/css" />
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paradigm Solutions</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navbar"></div>
<div id="leftMenu"></div>
<div id="coin-slider">
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
<img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
<span>
<b>Don't Use IE</b><br />
Internet Explorer is an inferior product that should be destroyed.
</span>
</a>
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
<img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
<span>
<b>Don't Use IE</b><br />
Internet Explorer is an inferior product that should be destroyed.
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
</body>
</html>
Change your script tags from
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
to
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
coin-slider depends on jQuery therefore it must be loaded before.... And I would suggest you remove js/coin-slider.js as js/coin-slider.min.js and js/coin-slider.js are the same thing ... the .min is just a minified version of the other
The order of your javascript file includes is very important. jQuery should always be first (as is evident in the production documentation). Also, you don't need BOTH coin-slider includes. The .min will be enough:
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js">
This one may sound obvious but the coin-slider package doesn't always come packaged with jQuery, so make sure you have jQuery in your javascript folder before linking too it c(:
it works well
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
check this link for code
My first attempt at using Cufon has caused me a few problems as I just can't seem to get it to work. The Coda's Javascript log is giving me this error (ReferenceError: Can't find variable: Cufon) From a few tutorials I have followed them precisely have been back and forth downloading the libraries over and over and nothing is working. If you guys could have a look and help me out, it would be much appreciated.
Here is my code;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- Styles go here -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- End styles here -->
<!-- Scripts go here -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/A.font.js"></script>
<script type="text/javascript" src="scripts/cufon.js"></script>
<script type="text/javascript">
Cufon.replace("p");
</script>
<!-- Scripts end here -->
</head>
<body>
<p>Test</p>
Test
</body>
</html>
Thanks.
This error occurred because you've loaded Cufon after the font has been loaded that requires it, so try to change the order, first load the cufon.js
<script type="text/javascript" src="scripts/cufon.js"></script>
and then load the A.font.js
<script type="text/javascript" src="scripts/A.font.js"></script>
I know this doesn't directly answer your question, but please don't use Cufon. Use CSS 2.1's #font-face instead. It's very easy and 100% accessible whereas Cufon is not.
Here are the only 2 links you need to use #font-face in your CSS:
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
http://www.fontsquirrel.com/fontface/generator
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.