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.
Related
I have a page that contains 2 interactive report.
I need to print it so I have a javascript function that calls window.print()
So I've put some CSS to adjust my table
#media print {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%;
}
The problem is running this page on IE 8 (or prior), because #media
isn't supported.
How can I print these files?
I've put the same CSS into an external file and call it
<link href="print.css" rel="stylesheet" media="print" type="text/css" />
but it doesn't work
How can I solve it?
Thank you
In this case I think ou should use 'conditional stylesheets'.
You can create a css file like IEPrint.css and put the specific styles you want there, and with your other stylesheets you put something like this:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="IEPrint.css">
<![endif]-->
The code above will only 'work' if the user is in Internet Explorer 8.
You can use other conditionals like:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
The code above 'works' for Internet Explorer 8 and Lower.
Here is a great article about stylesheets conditionals: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Trigger print style on click For Internet Explorer with jQuery
But to control the element style when another element click event is triggered, we should use javascript (this is not the best way).
I did a fiddle so you can see the code in action: https://jsfiddle.net/dobbinx3/pLvzk8rv/6/
Basically we have an element <p> that when we want to print it turns red, when we are not printing it, the color is black.
A button that has a click event triggered on it.
And a function to restore the screen layout when we finish the print action.
REMEMBER
You should do this 'workaround' only for Internet Explorer, put an <script> inside the conditional I mentioned before and use it only for the browsers that did not support #media print.
I noticed that you will set the height to 100%, check the display, and if you want the position attributes. If you think it is not working. For example if you want to set it in a <div> element.
Hope it works,
Cya.
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.
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.
This is css code which I only want for IE8 and lower
background: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); / IE6-8 */
But if user is on IE9 I either want to remove this propert from CSS file or I want to replace with filter:none
is it possible using javascript, jquery? I know I can do with seperate style sheet for IE but just curious if it's possible with javascript.
Edit:
Is it possible like in javascript or jquery
// If browser is IE9
then replace
filter: progid:DXImageTransform.Microsoft.gradient(values)
to filter:none
I think the easiest way is to put an "IE" class on your HTML element using conditional code... I think I got this originally from the HTML5 boilerplate http://html5boilerplate.com/
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
.bg-gradient {background: filter: 0, #999}
.ie .bg-gradient {
background: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); / IE6-8 */
}
Then simply use add and remove class to remove the 'element' class
$(document).ready(function(){
$('.element').addClass('bg-gradient');
})
Filter won't be rendered by non IE browsers so adding it or removing for all browsers except IE 6-8 will have the same effect as doing it just for IE9. Also I believe that ie9 supports multiple background properties so the other browsers should skip over the first comma separated value-- in theory-- I haven't tested it. If not, just use regular css2 syntax:
.bg-gradient {background: filter: 0}
Yes. It is "possible" in JavaScript. But it needs to be done both at the sever-side as well as client-side.
On the client-side, you need to detect if it is a IE9 and then send a request to the server for a script (server-side JavaScript) that parses the CSS files and replaces all occurrences of the filter properties and set it to filter:none and then serve the modified CSS file to the client.
PS: This, IMHO, would be the worst thing that you can ever do and I don't recommend it. This is just to answer your curious question if this is "possible in JavaScript".
$(document).ready(function(){
if ($.browser.msie && $.browser.version < 9) {
$("#element").css("filter", "progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );")
}
})
use conditional comments and add a css file for IE8 and lower
here is a tutorial
EDIT: use jquery's browser check and apply the css with javascript
with jQuery.browser.version you can get the version
I see that there are different answers out here but personally I will advise the following approach.
Have two CSS classes - one containing styling for IE9 and the other containing styling for all the other browsers.
As mentioned in one of the answers above, use jQuery.browser API to determine the browser type.
I will advise that you add this string say "msie9" or "msie8" as a class to "body" or "html" element.
Once this is done, your styling for IE9 will be
body.msie9 .ie9specificclass{
}
For others, it will be
.specificClass{
}
This will be a clean approach.