CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer-10css-tables
user2817200
user2817200

Reputation: 1117

Removing certain CSS using Javascript / jQuery

I have this CSS for a table (which is just one row) which is position at the bottom of the screen

#bottomBar td {
filter: progid:DXImageTransform.Microsoft.Gradient(starColorStr=#1c67c0, endColorStr=#03389d);
padding: 10px !important;
color: white;
border: 2px solid white !important;
font-weightL bold !important;
cursor: pointer;
}

As you can see, the filter is there just for IE 8. I need this compatible with IE 10 as well, so I need to remove the filter and replace it with, let's say 

background-color: blue;

to give the td some color. I tried this

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
$('#bottomBar td').removeAttr('style');
$('#bottomBar td').attr('style', 'background-color: blue; padding: 10px !important; color: white; border: 2px solid white !important; font-weight: bold !important; cursor: pointer;')

but that doesn't work, I also tried just placing

$('#bottomBar td').css('filter','');

inside the if IE 10 function but that doesn't work either.. any other ideas?

Note that I cannot remove or add classes, long story short I have a really long script and the code will break if I add and remove a class. I also can't have an external stylesheet either, sorry I didn't mention this in the post. (I know having an ie10 only stylesheet is best but the person I'm writing the code for needs it done a certain way).

Upvotes: 0

Views: 141

Answers (2)

talemyn
talemyn

Reputation: 7950

If you are running into a lot browser-specific styling issues, one of the things that you might consider, is using JS to add a body-level class that identifies details about the browser that the user is using. For example:

  • Firefox: <body class="ff">
  • IE10: <body class="ie10">
  • IE7: <body class="ie7 ielt10"> (ielt10 = "IE, less than 10" . . . i.e., IE browsers version 9 or older)
  • etc.

As much as we would all like to write code that works for all browsers, we all know that isn't going to happen. :) Setting up a framework like this makes it easy to address browser-specific styling in your CSS. If you set it up like this, then you could change your CSS like this:

#bottomBar td {
    padding: 10px !important;
    color: white;
    border: 2px solid white !important;
    font-weight: bold !important;
    cursor: pointer;
}

.ie8 #bottomBar td {
    filter: progid:DXImageTransform.Microsoft.Gradient(starColorStr=#1c67c0, endColorStr=#03389d);
}

Now, only IE8 browsers will add that filter.

It's a little bit of work to set up the JS up front, but once it's in place, it makes addressing those browser-specific issues that MUST have a work-around, MUCH easier.

Upvotes: 3

Kyle Muir
Kyle Muir

Reputation: 3925

If my understanding is correct you can do the following:

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
    $('#bottomBar td').css('filter', 'none');
    $('#bottomBar td').css('color', 'red');
    $('#bottomBar td').css('cursor', 'default');
    ...
}

The default value for filter is none (https://developer.mozilla.org/en-US/docs/Web/CSS/filter), so by setting it to this you should remove whatever it was doing.

In this example below I change the color of the text in IE10 to red and the cursor will be the default cursor, in any other major browser it will be white text and a hand cursor.

Fiddle: http://jsfiddle.net/KyleMuir/8mxem/5/

Upvotes: 1

Related Questions