I am not able to render AngularJs templates in Internet Explorer 8, I have followed several suggestions for using AngularJs in Internet Explorer but I am still not able to get it to work. below is my html code for the page including the scripts I have used. Is it possible to point out if I am using anything that could make the code not work in Internet Explorer? I can upload details of other files if anybody would like to know the details of it. Everything works perfectly on all other browsers but just Internet Explorer.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tripApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<style>
#-moz-document url-prefix() {
.filter-menu .btn {
padding: 0;
}
}
</style>
<!-- endbuild -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.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]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> -->
</head>
<body>
<!--[if lt IE 8]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<aside id="sidebar">
<ul class="list-unstyled">
<li></span></li>
<li></span></li>
<li></span></li>
</ul>
</aside>
<section id="topbar">
<ul class="list-unstyled">
<li><span class="icon-briefcase icon-2x"></span></li>
</ul>
</section>
<section id="main-container">
<section ui-view id="main-inner-container"></section>
</section>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bower_components/jquery-easing/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/directives.js"></script>
<script src="scripts/controllers/hotelsController.js"></script>
<script src="scripts/controllers/restaurantsController.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- endbuild -->
</body>
</html>
I am working on AngularJS project at the moment where Internet Explorer 8 support is required.
Everything is working fine cross browsers - including IE 8.
If you need to give IE8 support my first advice for you is to not use custom element tags such as <mynewtag> (use the attribute version <div mynewtag> instead).
It will save you the headache of creating elements on the fly like this one:
<!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->
Below you can find my index.html bootstrapped for AngularJS to work with IE 8:
<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" ng-app="myApp">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="header"></title>
<meta name="description" content="">
<!-- build:css({.tmp,app}) system/css/main.css -->
<link rel="stylesheet" href="system/css/main.css">
<!-- endbuild -->
<!--[if IE 8]>
<script src="ui/components/es5-shim/es5-shim.js"></script>
<script src="ui/components/json3/lib/json3.min.js"></script>
<![endif]-->
</head>
<body ng-controller="myAppCtrl">
<!-- Add site or application content here -->
<div class="content" ng-view=""></div>
<!-- build:js system/js/plugins.js -->
<script src="ui/components/angular/angular.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) system/js/scripts.js -->
<script src="system/js/app.js"></script>
<script src="system/js/filters/filters.js"></script>
<script src="system/js/controllers/controllers.js"></script>
<script src="system/js/services/services.js"></script>
<script src="system/js/directives/directives.js"></script>
<script src="system/js/scripts.js"></script>
<!-- endbuild -->
<!-- build:js system/js/modules.js -->
<script src="ui/components/angular-resource/angular-resource.js"></script>
<script src="ui/components/angular-cookies/angular-cookies.js"></script>
<script src="ui/components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
</body>
</html>
Hope that's helpful.
Related
noob question, i start create handlebars templates and is kind useful.
I can create templates without load a html tag in html file, so should I just use handlebars and stop use html tags in my html? what you recommend guys? its a good practice or no? thank you.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="public/stylesheets/style.css"> -->
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
</head>
<body class="body">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="public/javascripts/libs/jquery-2.1.4.min.js"></script>
<script src="public/javascripts/libs/handlebars-v3.0.3.js"></script>
<script src="public/javascripts/index-template.js"></script>
<script src="public/javascripts/templates/h1-h2.js"></script>
</body>
</html>
I've been looking for a way to integrate a slideout menu into my website but have failed with various javascript plugins (I'm quite new to web design). I can't seem to get this to work correctly. I recently posted about a side menu which ended up working but was blank on a phone screen. Now I am trying my luck at a mmenu at http://mmenu.frebsite.nl/examples.html I have posted my html below and have been trying to fix it for a full day now and still can't get it to work! You can see what is currently showing up on the website here http://jpst.it/zQtF
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#menu").mmenu({});
var API = $("menu").data("mmenu")
$("menu-button").click(function() {
API.open();
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"></div>
<button id="menu-button">menu</button>
</div>
<div class="content">
<div class="posts">1</div>
<div class="posts">2</div>
<div class="posts">3</div>
<div class="posts">4</div>
<div class="posts">5</div>
</div>
<div class="footer">asdfafdsasfsdasfad</div>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>The team</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
There are a couple things wrong with your code and without your stylesheets I can't be really sure what your problem is, but I believe your problem starts from the fact that you haven't included jQuery when you include the mmenu javascript file. So switch the lines in your code:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
That should be enough to make it functional, but remember to include the # symbol in your javascript when you're referencing IDs. As well, remember your semi-colons at the end of all your javascript statements.
I'm editing someone elses webpage for content, by changing the HTML files on the drive, adding text, comments, wtv. I'm not a web designer, so this is the only way I knew to do it.
On most browsers, my changes show, but on internet explorer, sometimes it will revert to the old webpage. I can't find the info for the old page anywhere on the drive that holds all of this content. Please steer me in the right direction.
If it helps, each page starts like this (this part I haven't edited)
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en-us" class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en-us" class="no-js"> <!--<![endif] -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This Particular Pages Title</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css" >
<link href="style/less/main.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/business-custom.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<!--[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="selectivizr-min.js"></script>
<![endif]-->
I think IE uses caching.
By adding a random parameter to the URL the caching will be circumvented.
so e.g. www.mysite.nl?1
and then
www.mysite.nl?2
etc.
Is it possible to combine code angular with IE7?
What you need to mount and write to this minimum sample to work in IE7?
<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app='app'>
<head>
<!--[if lte IE 8]>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>Tests</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ButtonCtrl" ng-init="name = ''">
<button id="start-button" ng-click="run('Brrrr!!!')">push</button>
<p>{{name}}</p>
<p ng-init="count = 0">{{count}}</p>
</div>
</body>
</html>
I've never tired with IE7 but for IE8 I put the below html in. Which basically polyfills
HTML5 elements, CSS3 selectors and media queries. You might also want to look at es5 shims (https://github.com/es-shims/es5-shim). However, it you use all the native angular methods i.e. angular.forEach(...) you might be ok without this. As always you need to really test this in all browsers!!!!
<!DOCTYPE html>
<!--[if IEMobile 7 ]>
<html class="no-js iem7" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="fsn"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
<html class="no-js" id="ng-app" ng-app="fsn">
<!--<![endif]-->
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-switch');
document.createElement('ng-if');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<script src="../vendor/modernizr/modernizr.js"></script>
</head>
It is also worth looking at the APIs that IE7 wouldn't support 'console' for example. The angular team say they only support down to IE8 with Angular <1.2.x so you might have to play about with it to get it to work smoothly.
I have IE8 working well but it does noticeably struggle with loading some larger pages as it is so slow.
How to prevent the load of the D3 library for IE8 (and below) ?
<head>
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
</head>
<head>
<!--[if !IE || gte IE 9]><!-->
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
<!-- <![endif]-->
</head>
<!--[if gt IE 8]>
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
<![endif]-->