Is possible manage conditional code by jQuery or javascript
<!--[if IE]>
<div class="ie">IE ALERT</div>
<![endif]-->
$('.ie').addClass('ie-additional-class');
The jsfiddle here.
Related
I have a lame problem:
If I use something like:
<!--[if IE]>
Random text
<![endif]-->
and I open page in IE (9) I naturally see the text "Random text". Everything is ok.
If I use:
<!--[if IE]>
<script type="text/javascript">
alert("aaa);
</script>
<![endif]-->
Nothing happens.
I need to run a specific script for IE... can any1 help me with it?
You have a syntax error in your Javascript. Try this:
<!--[if IE]>
<script type="text/javascript">
alert("aaa");
</script>
<![endif]-->
Use the script to check if it's IE.
EDIT: actually check out some of the answers here, they're exactly what you want.
For example one person posted this solution which uses a very different approach
<script>runFancy = true;</script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
</script> // <div>The HTML version for IE went here</div>
<![endif]-->
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 have found numerous partial answers to this question, but nothing that seems like a definitive answer. For such an important technique I find this a little strange.
How should I hide elements (using javascript) so that they do not appear briefly when the page loads before the JS has a chance to hide them? I don't want to set them to hidden initially with CSS as if a user doesn't have Javascript, they will see nothing.
To be clear. I'm not asking how to handle displaying content to users who don't have JS. That is an entirely different subject. I just want a reliable way to hide HTML elements before they are displayed.
So my requirements:
HTML elements are not hidden initially using CSS
If JS is available, these elements are hidden so that they are never displayed, not even for an instant. This means hiding them from JS loaded at the end of the body is out).
Like VKen, I prefer to use moderizr and Paul Irish's structure for the html element (which is what HTML5 Boilerplate uses)
<!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 class="no-js"> <!--<![endif]-->
Then in the style sheet:
.element-to-hide { display: none; }
.no-js .element-to-hide { display: block; }
Works great, no flash of elements disappearing.
A solution is to use javascript to include an optional CSS file in which you hide those divs.
Put this in your HEAD section :
<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>
And in hiding.css :
div.mySelector {
display:none;
}
If you don't have additional css to set, you may also more simply inline the css rule in javascript (still in the HEAD) :
<script>
document.write('<style type="text/css">div.mySelector {display:none; }</style>');
</script>
If Javascript isn't available, the divs won't be hidden.
And if it is available, the CSS will be used to hide the div before they're displayed.
Use a descendent combinator and make the body a member of a class as soon as possible.
<style>
/* js only element */
.js foo { display: none; }
</style>
</head>
<body>
<script> document.body.className += " js"; </script>
you could do a <noscript> tag and overwrite the initial css for those with javascript disabled
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
}
I would like to know how i can remove all css styles based on checking if the browser is less than IE8.
So if it detects IE7 then remove all styles? I wonder if this is possible via some jquery?
Will this fix most IE7 issues:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
I don't know why you want to remove all styles for a browser version. I suppose that you have some CSS problems with IE7, and often a good way of fixing it, rather than deleting all your CSS, is to use ie7.js: http://code.google.com/p/ie7-js/.
Here is a demo of what it can do.
Also, this script has a version for IE8 and IE9.
<!--[if lt IE 8]>
<body class='oldIE'>
<![endif]-->
<!--[if gte IE 8]>
<body class='ok'>
<![endif]-->
<!--[if !IE]>
<body class='ok'>
<![endif]-->
here you would need to prefix all the styles you don't IE7 to apply with .ok
another method would be
<!--[if lt IE 8]>
//include an old IE specific stylesheet or none at all
<![endif]-->
<!--[if gte IE 8]>
//include your stylesheets
<![endif]-->
<!--[if !IE]>
//include your stylesheets
<![endif]-->
The best solution is to remove a specific class name rather than wiping the entire CSS for an element:
// Identity browser and browser version
if($.browser.msie && parseInt($.browser.version) == 7) {
// Remove class name
$('.class').removeClass('class');
// Or unset each CSS selectively
$('.class').css({
'background-color': '',
'font-weight': ''
});
}