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>
Related
I have a standard PHP/Smarty Website. There is a home base with index.php, a templates folder with the .tpl Files. I have a header.tpl, footer.tpl, index.tpl and subpage.tpl.
The index.tpl and subpage.tpl both include the header.tpl. I know they are both have the header.tpl included correctly because css is the same on both pages. In the head tag on the header.tpl I have a jQuery autocomplete script. If I have the text box on the index.tpl the autocomplete works.
If I place the same input text box code on the subpage The Autocomplete does not work. I force compile smarty, removed all cache and can't seem to figure out why? Any Ideas?
My Header .tpl
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
... my css
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="scripts/jquery.autocomplete.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.autocomplete.js"></script>
<script type="text/javascript" src="scripts/onchange.min.js"></script>
<script>
$(document).ready(function(){
$("#Part_Number").autocomplete("autocomplete/parts.php", {
selectFirst: true
});
});
</script>
my index.tpl and subpage.tpl
{include file="header.tpl" page="Home"}
<input type="text" id="Part_Number" name="Part_Number"></input>
The only thing that can be different in your 2 pages are the URI you are calling:
$("#Part_Number").autocomplete("autocomplete/parts.php", {
try to put an absolute path like this:
$("#Part_Number").autocomplete("http://www.example.com/autocomplete/parts.php", {
thanks for reading.
I have a simple problem that i can't solve. I just need to have a html map with Jquery fadeIn and fadeOut effects. I got it and it works everywhere except with IE8.
So i just wanna add a pure javascript already tested and working just when IE8 is present.
Obviously i tried writing this code but is not working even with a simple alert after the IE comment.
Can you help please?
Here's the code, thanks!
<script type="text/javascript">var runFancy = true;</script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
alert(runFancy);
function showIt(name)
{
document.getElementById('map_image').src='immagini/distributori/8/'.concat(name).concat('.png');
document.getElementById('map_image').style.display='block';
}
function hideIt()
{
document.getElementById('map_image').src='immagini/distributori/8/map.png';
};
</script>
<![endif]-->
Here's the code for other browsers
<!--[if !IE]><!-->
<script type="text/javascript">
//alert('hi'); not working even just this
if (runFancy) {
function showIt(name)
{
document.getElementById('map_image').src='immagini/distributori/single/'.concat(name).concat('_single.png');
$('#mapon').fadeIn(400);
}
function hideIt()
{
$('#mapon').fadeOut(300);
};
}
</script>
<!--<![endif]-->
even this is not working, any advice?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body style="background-color:red">
<h1>Ciao</h1>
<!--[if IE]>
<style language="text/css">
body{background-color:black;}
</style>
<![endif]-->
</body>
</html>
not working with every IE version.
This will help you:
HTML:
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head></head>
<body></body>
</html>
Javascript:
<!--[if IE 8]>
<script type="text/javascript" src="IE8.js">
<![endif]-->
the code you have should be working but if you want to target just IE 8 put IE 8 instead of just IE like so
<!--[if IE 8]>
do stuff
<![endif]-->
edit: removed depreciated jquery solution
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
ok i have this code (which i got from paul irish page+ some modifications) (it gives you your ie version (standar stuff):
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
</head>
<body>
<h1>test:</h1>
<script type="text/javascript">
$(function test()) {
"use strict";
// Detecting IE
var oldIE
if ($('html').is('.ie6, .ie7, .ie8')) {
oldIE = true;
}
if (oldIE) == true {
document.write("version<ie9")
} else {
document.write(" version => ie9")
}
}
</script>
<script type="text/javascript">
<button type="button" onclick="test()">testing</button>
</script>
</body>
</html>
the thing is it isnt showing the testing button
The <button> element should not be surrounded by <script> tags. After all, it's HTML, not JavaScript.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
<title>A HTML document needs a title to be valid.</title>
</head>
<body>
<button id="test">I feel so clickable today.</button>
<!-- You must include jQuery before you can use its methods -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
"use strict";
(function ($) {
// Assignment with the ternary operator
var oldIE = ($('html').is('.ie6, .ie7, .ie8')) ? true : false;
// You need at least jQuery 1.7 to use .on()
$('#test').on('click', function() {
console.log(oldIE);
});
}(jQuery));
</script>
</body>
</html>
N.B. I included jQuery because I saw a $ symbol in your code.
Since you should be using the console during development, here's a snippet that safeguards against JS errors in browsers that don't provide a console.
// Avoid `console` errors in browsers that lack a console
(function(){var e;var t=function(){};var n=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"];var r=n.length;var i=window.console=window.console||{};while(r--){e=n[r];if(!i[e]){i[e]=t}}})();
But if you wanted to keep it in the script tag you would need to modify your code like so:
<script type="text/javascript">
document.write('<button type="button" onclick="test()">testing</button>');
</script>
I wonder if there is the possibilaty to load some javascript files only if its not the IE 8 like this:
<!--[if NOT IE 8]>
<script type="text/javascript" src="assets/scripts/slideshow.js"></script>
<![endif]-->
<!--[if IE 8]>
<script type="text/javascript" src="assets/scripts/slideshowOnlyForIE8.js"></script>
<![endif]-->
Try this (cited from here)...
<!--[if !IE 8]><!-->
<script type="text/javascript" src="assets/scripts/slideshow.js"></script>
<!--<![endif]-->
<!--[if IE 8]>
<script type="text/javascript" src="assets/scripts/slideshowOnlyForIE8.js"></script>
<![endif]-->
I assume that you are either limited by a feature that IE8 lacks or taking advantage of an IE8 specific feature. In this case, the best thing to do is test for that gating feature.
Basically, combine the two scripts into one, and kick it off with a simple if test to see if your feature is available:
if(crucialIEFunction()) {
//run IE8 slideshow code
}
else
{
//run non IE slideshow code
}