How to write custom conditions in including JavaScript files using RequireJS?
Example:1
if("ontouchend" in document) document.write("<script
src='/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
Example:2
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
Currently I am using shim and paths. Is there any room to place this. Is it possible?
You could use a conditional specific class on the html element itself, then checking for it and loading the dependencies will be easier in the inside your existing script.
For Example:
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="ie"> <![endif]-->
<html>
And in your script, you could try something like:
if ($('html.lt-ie9').size()) {
require(['/Scripts/ieSpecificScripts'], function(ieScript) {
// ... do stuff
});
}else
{
...
}
Happy Coding.. :)
Related
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.
Here is my code.. I want to hide the button if the user is browsing with IE.
I tried like this but it's not working can any one help me out.
<!DOCTYPE html>
<html>
<head>
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){
document.write("Well, this is not internet explorer");
} else{
document.write("This is internet explorer");
document.getElementById('btn1').style.visibility='hidden';
}
</script>
</head>
<body>
<p>This is a paragraph.
</p>
<button class="btn1">Input</button>
</body>
</html>
You may try conditional comments, without javascript:
<!--[if IE]>
<button>Not for IE</button>
<![endif]-->
And more:
<!--[if IE]>
According to the conditional comment this is IE<br/>
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br/>
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br/>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br/>
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br/>
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br/>
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br/>
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br/>
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br/>
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9
<br/>
<!-- <![endif]-->
There are many ways to do that, there two of them:
Using CSS:
Add the below css class into your button and make it hide for IE browser, like
<!--[if gt IE 7]>
<style>.hideBtn{display:none}</style>
<!--<![endif]-->
Using Javascript:
window.navigator, by finding the browser version, make it hidden
document.getElementById('btn1').style.display = 'none';
thanks for your help i found the solution .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<style>.hideBtn{display:none}</style>
<![endif]-->
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){
document.write("Well, this is not internet explorer");
} else{
document.write("This is internet explorer");
}
</script>
</head>
<body>
<p>This is a paragraph.
</p>
<button class="hideBtn" id ="hideBtn">Input</button>
</body>
</html>
I'm facing a prob with my CSS in IE7 and IE6. The biggest problem is that in one of my page the CSS is not loading at all in IE 7,6.
When I use the following code-
<!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 IE 9] <html class="ie9" lang="en"> [endif]
[if gt IE 9] <html lang="en"> [endif]
The CSS is getting loaded, but then, while running the website on chrome or Firefox the above codes of line are also printed. However no line is printed while using IE and the CSS is working fine.
Also when I use this code
<!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 IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
The CSS does not loads again in IE. What should I do.?
I hope my question is clear to you. Please Help.
You file starts with this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function test(add)
{
var pin;
if(window.XMLHttpRequest)
{
pin=new XMLHttpRequest();
}
else
{
pin= new ActiveXobject("Microsoft.XMLHTTP");
}
url=add;
pin.open("GET",url,true);
pin.send();
}
</script>
</head>
</html><!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 IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
…
As you are ending the file before it even starts, you are triggering quirks mode in IE7 and below. Your file should start like the 2nd snippet you've posted.
i use javascript code in project and i want not load this code in lt IE 9. i use this code but its not working:
<!--[if lt IE 9]>
<script type="text/javascript">
....
</script>
<![endif]-->
<!--[if !lt IE 9]>-->
...
<!--<![endif]-->
You can visit this microsoft article to learn how to build more complex conditional comments
try this:
<!--[if gte IE 9]>-->
...
<!--<![endif]-->
<!-- Target IE 8 and lower -->
<!--[if lt IE 9]>
<script type="text/javascript">alert('hello world');</script>
<![endif]-->
So perhaps give this a try:
<!-- Target IE 9 and lower -->
<!--[if lt IE 10]>
<script type="text/javascript">alert('hello world');</script>
<![endif]-->
What is difference between using
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('nav');
</script>
<![endif]-->
instead
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I believe that the HTML shim library also includes the IE print Protector