I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.
<head>
<script type="text/javascript">
var cs;
function nav() {
var txt= navigator.appCodeName;
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>
</head>
<body onload="nav ()">
<p id="cab"></p>
</body>
</html>
This is not really the way to implement dynamic css. Instead you should be using conditional commenting:
<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->
See HERE
Also see THIS answer
You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:
The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.
The JavaScript you've written has a couple of issues:
The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.
If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):
function setCss() {
var cssFileName;
if(navigator.appCodeName.toLowerCase() == 'mozilla') {
cssFileName = 'mozilla-style.css';
}
else {
cssFileName = 'ie-style.css';
}
// Create the element
var cssFileTag = document.createElement("link")
cssFileTag.setAttribute("rel", "stylesheet")
cssFileTag.setAttribute("type", "text/css")
cssFileTag.setAttribute("href", cssFileName)
// Add it to the head section
document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}
As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:
<!--[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]-->
so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement
<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->
You also have some syntactic issues in your code, the line
<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />
will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.
Related
Sorry for the title ,it is indeed confusing.
I have some javascript code that works in every browser except IE 7 and 8 (it throws errors). So as a work around I would like the code not to run on certaing pages of all browsers where its redundant.
I would like the solution to be in javascript because I only want to disable in some pages instead of apply the rule to all.
I think for example this function can help you to skip the javascripts on javascript side:
http://msdn.microsoft.com/en-us/library/ms537509%28v=vs.85%29.aspx
Or you can do this on php side also:
PHP: If internet explorer 6, 7, 8 , or 9
You can use IE conditional statements in the head tag to include JS only when the browser is IE of a specific version:
<!--[if lt IE 8]>
<script src="myscript.js" type="text/javascript"></script>
<![endif]-->
The code is wrapped in a comment statement on purpose!
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
<![if !IE]>
<script src="script.js"></script>
<![endif]>
I really don't understand you question well. But if you want disable the script of IE
You can try this(for example):
For disabline script for IE -
<!--[if !IE]><!-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// your inline script goes here
</script>
<!--<![endif]-->
Read this 1
For disabling script for IE 8 -
<!--[if !(IE 8)]><!-->
<script src="path/to/external/script"></script>
<script>
// your inline script goes here
</script>
<!--<![endif]-->
and
<!--[if !(gte IE 8)]><!-->
<script src="path/to/external/script"></script>
<script>
// your inline script goes here
</script>
<!--<![endif]-->
Read this 2
Removing a Script block :
set a id to your script,
<script id="sample">
...
</script>
and use this code,
$("#sample").remove();
I guess what you're looking for is document.location in combination with a browser detectio. But be aware that most browsers can fake the instances. If you're using jQuery I'd suggest you use the $.support property instead of trying to get the user agent.
http://api.jquery.com/jQuery.support/
Greetings
Niveaulos
do you know of any way to prevent a script i have on a web page to be loaded by IE7 only?
The script works fine in all other browsers so I just wanted to disable it on IE7.
Is this at all possible?
Alex
if(navigator.userAgent.indexOf('MSIE 7') < 0){
//do your non-IE7 stuff here
}
or even better
function DoSomStuff(){
if(navigator.userAgent.indexOf('MSIE 7') > 0 ) return;
//do your non-IE7 stuff here
}
maybe this works for you:
<!––[if !IE 7]>
<script type="text/javascript" src="different"></script>
<![endif]––>
Yes there is, using conditional comments:
<!--[if !(IE 7)]>
<script>
// Your script here
</script>
<![endif]-->
You can use down-level revealed conditional comments (with a bit of extra markup to satisfy validators):
<!--[if !(IE 7)]><!-->
<script src="myscript.js"></script>
<!--<![endif]-->
However, any good web developer would recommend that you use feature detection instead of browser detection for your scripts. It's also possible that your IE 7 problem could be easily solved, so perhaps you might want to post it as a separate question.
Why doesn't this JavaScript work in Internet Explorer 7-8? All I am trying to do is wire up the 'click' event for multiple DIVs by using jQuery to select the DIVs by class name.
It works in Firefox, Chrome, Safari. In IE, it will only work in Browser Mode: IE 9 / Document Mode: IE 9 standards". Can't get it to work in IE 7 or 8.
<!DOCTYPE html>
<head>
<title>IE Click Target Test</title>
</head>
<body>
<div class="ClickTarget">Button 1</div>
<div class="ClickTarget">Button 2</div>
<!-- load jQuery 1.6.4 from CDN -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="application/javascript">
// This works fine in all browsers except IE pre-9.
$(document).ready(function () {
$(".ClickTarget").click(function () {
alert("If you can see me, it worked!");
});
});
</script>
</body>
</html>
Normal disclaimers: I wouldn't HAVE to use jQuery for this example, but it illustrates a problem I am having with a larger solution that does use jQuery 1.6.4. IE is often quirky, I've had to deal with it many years, but that's life.
For some reason, maybe the impending holiday, I'm overlooking something. Any ideas why I can't register the click in IE?
I think it's the type="application/javascript" in your <script> tags -
"text/javascript" is the only type that is supported by all three
browsers. However, you don't actually need to put a type. The type
attribute of a script tag will default to "text/javascript" if it is
not otherwise specified. How that will affect validation, I'm not
sure. But does that really matter anyway?
From - Why doesn't IE8 recognize type="application/javascript" in a script tag?
Try changing script tag's type attribute to text/javascript it should work fine in all the browsers.
As Shankar said originally, it's your script type not being "text/javascript"
I tried this JSFiddle in IE8 and worked fine for me.
http://jsfiddle.net/Nna2T/
This is not an answer but comments can't format code, so just an FYI...
This:
$(document).ready(function () {
...
});
Can be shorted to just:
$(function() {
...
});
say that I have an id defined like this
<span id ="radiobuttonContainer"> Check to enable checkboxes:
<input type="radio" name="cov-failed" value="cover" onclick="javascript:printoutCheckboxes('cover')">
Coverage
<input type="radio" name="cov-failed" value="failed" onclick="javascript:printoutCheckboxes('failed')">
Failed</span>
I dont want to show this "spanId" in browsers below I.E 9 Because this enables alot more vizualizing of data which IE < 8 don't can manage. I know that you can have diffrent javascripts and css:es depending on browsers like this
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="root/include/excanvas.min.js"></script><![endif]-->
And then chose display: 'none';
But I wonder if it really is nessecary to have 2 equal .css files containing exactly the same information besides this single row?
Can't I just do something like this?
<!--[if lte IE 8]>document.getElementById('radiobuttonContainer').style.display = 'none';<![endif]-->
you should just be able to wrap the tag in a conditional comment. alternately, since CSS included inline in the page takes precedence over included CSS, you wouldn't have to include a second style sheet, just a new definition specific for that case. i.e.
<!--[if lte IE 8]>
<style type="text/css">
#radiobuttonContainer{
display = 'none';
};
<![endif]-->
and have that come after your included CSS file.
if you use a tool like Modernizr, you can use it to determine the capabilities of the browser.
If there's a particular feature which isn't available in IE8, you can reference it in your stylesheet, and hide this element if the browser doesn't have that feature.
Lets say the feature is HTML5 canvas, all you'd need to do is the one line script to include the Modernizr Javascript in your page, and then you'd do something like this in your CSS:
.nocanvas .radiobuttonContainer {
display:none;
}
I think you can surely do something like this:
<!--[if lte IE 8]><script type="text/javascript">
document.getElementById('radiobuttonContainer').style.display = 'none';
</script><![endif]-->
which is a merge of your examples by the way.
I have a segment of HTML code which includes a conditional comment:
<!--[if IE]>
<link rel="stylesheet" ...>
<[endif]-->
This code was tested and works correctly when included in the HEAD section of the page, on the initial page rendering.
I would like to introduce the same conditional CSS to an existing page using JavaScript in an Ajax response.
I have tried:
var comment = document.createComment("[if IE]>\n<link rel=\"stylesheet\" ...>\n<[endif]");
Wicket.Head.addElement(comment); //this is framework code that just appends the element to the HEAD node of the page. I debugged and verified that it's doing the appendChild(...) call.
The above code does not cause the stylesheet to be applied in Internet Explorer 7. Is there a way, using JavaScript, to introduce the conditional style in a way that Internet Explorer understands?
Just to be clear, I am trying to use JavaScript to create a conditional style, not trying to write browser-conditional JavaScript.
You can use conditional comments inside innerHTML as follows:
var div = document.createElement("div");
div.innerHTML = "<!--[if IE]><i></i><![endif]-->";
if (div.getElementsByTagName("i").length) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "ie_only.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
Very simple:
/*#cc_on document.createStyleSheet("ie.css"); #*/
Do you know Modernizr?
Also, it is great to use this in the HTML open tag (replace the no-js with js!)
<!--[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 (gte IE 9)|!(IE)]><!--> <html lang=en-us class=no-js> <!--<![endif]-->
So you can do this in CSS:
.ie7 .myDiv {
foo:bar;
}
Can also be accessed in javascript with:
if( document.body.className.indexOf("ie") > -1 ){
//
}
// or using jQuery
if( $(document.body).hasClass("ie6") ){
}
All this is unnecessary.
public void renderHead(IHeaderResponse response)
if (WebSession.get().getClientInfo().getClientProperties().isBrowserInternetExplorer()) {
response.renderJavaScriptReference(new JavaScriptResourceReference(MyClass.class, "ie.js"));
}
If you choose to use Modernizr be aware of https://issues.apache.org/jira/browse/WICKET-3433