Rectangle 27 4

I have no idea what's going on under the hood, but there is an easier solution, at least for inline SVG's (not sure about backgrounds). Change:

<img src="svg-source.svg"/>
<object type="image/svg+xml" data="svg-source.svg"></object>

In addition, you need to make sure you have viewBox defined for the svg document.

According to this answer, using object is better practice anyway. Here is a decent blog post that recommends (for cross-browser compatibility):

<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>

I have not tested this latter option, but if it works it is much simpler than this solution.

EDIT: I discovered that as embedded objects, SVGs were interfering with "hover" and "click" events, so I finally buckled and decided that I must embed SVGs fully. But I had no interest in pasting every single one, so I have the following at the top of my javascript file (I'm using JQuery):

$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}
<img src="svg.svg"/>
<div class="deferred-load" data-load="svg.svg"></div>

Of course, this doesn't work without Javascript enabled. But it's way better than pasting all that ugly XML.

css svg and vector-effect="non-scaling-stroke" browser compatibility -...

css svg
Rectangle 27 758

Add the following code to add trim functionality to the string.

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}
replace(/^\s\s*/, '').replace(/\s\s*$/, '')
replace(/^\s+|\s+$/, '')

Note also that replace(/^\s+|\s+$/, '') only removes either leading or trailing spaces, which is not the behavior expected from a trim function. If you want to remove both leading and trailing spaces you need to use replace(/^\s+|\s+$/g, '').

@Stephen Yes you're correct, but the question isn't about frameworks. it's about javascript & trim.

This is a nice solution if you don't use jQuery. But if not, $.trim() seems to be a much better solution, as it keeps your script a little bit simpler.

internet explorer - .trim() in JavaScript not working in IE - Stack Ov...

javascript internet-explorer trim
Rectangle 27 447

in IE, you can use

event.returnValue = false;

And in order not to get an error, you can test for the existence of preventDefault:

if(event.preventDefault) event.preventDefault();

You can combine the two with:

The following code worked for me: if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }

event.preventDefault ? event.preventDefault() : event.returnValue = false;

It's worth noting that "event" must be the global event object in IE8. You can't use the event passed into the event handler, like e.preventDefault, it must be event.preventDefault in order for this to work in IE8.

event.preventDefault(); stopped working for me in FireFox for some reason, out of the blue. Used mority's code and it worked great. Thanks~

$('.something').click(function(e){ e.preventDefault ? e.preventDefault() : event.returnValue = false; });

javascript - event.preventDefault() function not working in IE - Stack...

javascript internet-explorer events mootools preventdefault
Rectangle 27 309

A bit late, but this could also be useful. There is an IE filter, for IE 5.5+, which you can apply:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

However, this scales the entire image to fit in the allocated area, so if you're using a sprite, this may cause issues.

I wonder why MS didn't just implement that functionarlity using CSS. Thanks a lot!

If you are using links and buttons inside the element which we defined this, those links and buttons wont work. Does anyone know a method to fix this?

position: relative; z-index: 999

The scale method doesn't keep the ratio though.. So it's best that your element has the same ratio as your image.

css - How do I make background-size work in IE? - Stack Overflow

css internet-explorer
Rectangle 27 252

$.support.cors = true;

I am getting 'Error: Access is denied' as well on IE8 and IE9

I have a similar issue. Works in IE10 but not in IE8 or IE9

I also got "Error: Access is denied", my mistake was that I pulled HTTPS content from a HTTP domain. Make sure your website and your ajax target use the same protocols (either HTTP OR HTTPS)

I believe this is set by default now. For me the solution was an XDR request transport - see this popular answer: stackoverflow.com/a/10232313/217866

internet explorer - 'No Transport' Error w/ jQuery ajax call in IE - S...

ajax internet-explorer jquery cross-domain
Rectangle 27 252

$.support.cors = true;

I am getting 'Error: Access is denied' as well on IE8 and IE9

I have a similar issue. Works in IE10 but not in IE8 or IE9

I also got "Error: Access is denied", my mistake was that I pulled HTTPS content from a HTTP domain. Make sure your website and your ajax target use the same protocols (either HTTP OR HTTPS)

I believe this is set by default now. For me the solution was an XDR request transport - see this popular answer: stackoverflow.com/a/10232313/217866

internet explorer - 'No Transport' Error w/ jQuery ajax call in IE - S...

ajax internet-explorer jquery cross-domain
Rectangle 27 16

There's a workaround for IE - use inline SVG and set pointer-events="none" in SVG. See my answer in How to make Internet Explorer emulate pointer-events:none?

this is a great solution for some cases but i can't use this in my case.

html - css 'pointer-events' property alternative for IE - Stack Overfl...

html css internet-explorer browser cross-browser
Rectangle 27 16

There's a workaround for IE - use inline SVG and set pointer-events="none" in SVG. See my answer in How to make Internet Explorer emulate pointer-events:none?

this is a great solution for some cases but i can't use this in my case.

html - css 'pointer-events' property alternative for IE - Stack Overfl...

html css internet-explorer browser cross-browser
Rectangle 27 200

It looks like that function isn't implemented in IE. If you're using jQuery, you could use $.trim() instead (http://api.jquery.com/jQuery.trim/).

Now, I love jQuery, but importing it just for .trim() seems overkill

@Erik is this going to be the only IE issue Jin is going to run into? There's not a lot of useful javascript I can write without having to use a library's browser sanitisation functions.

Please note that $.trim() is diff from $(<element>.val().trim() - more info here: stackoverflow.com/questions/4315570/

internet explorer - .trim() in JavaScript not working in IE - Stack Ov...

javascript internet-explorer trim
Rectangle 27 117

Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)

See the MSDN article on createStyleSheet for a few more details.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

I added a code example of how I implemented this.

Documentation for document.createStyleSheet: ssicom.org/js/x276572.htm (the MSDN article fails with a 503 error...). Note that the returned object is a DispHtmlStyleSheet object, not a LINK element. To get the link tag from this object, you need to access document.createStyleSheet('...').owningElement

I believe dynamically creating a new style tag <style>your style here</style> and adding it into <head> also works in IE.

javascript - Dynamically loading css stylesheet doesn't work on IE - S...

javascript jquery html css internet-explorer
Rectangle 27 117

Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)

See the MSDN article on createStyleSheet for a few more details.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

I added a code example of how I implemented this.

Documentation for document.createStyleSheet: ssicom.org/js/x276572.htm (the MSDN article fails with a 503 error...). Note that the returned object is a DispHtmlStyleSheet object, not a LINK element. To get the link tag from this object, you need to access document.createStyleSheet('...').owningElement

I believe dynamically creating a new style tag <style>your style here</style> and adding it into <head> also works in IE.

javascript - Dynamically loading css stylesheet doesn't work on IE - S...

javascript jquery html css internet-explorer
Rectangle 27 111

newWin.document.write(divToPrint.innerHTML)
newWin.document.close();
newWin.focus();
newWin.print();
newWin.close();

Then print function will work in all browser...

Thanks a lot. lack of document.close() was the cause;

Works pretty well, Chrome identifies this approach as a popup though and blocks it by default

this works for me, thanks. remember to use also the first line, window.document.close(); otherwise it doesent works, for me i mean...

javascript - window.print() not working in IE - Stack Overflow

javascript internet-explorer printing
Rectangle 27 19

Yes, it is possible! Although it does not work as well as a real diagonal gradient in other browswers.

There are two important aspects of this solution that make it work:

  • Two divs with the same position and different z-index values (one on top of/in front of the other) and different gradient directions (one horizontal, one vertical)
  • Transparent/translucent colors in gradients (you can read about this in CSS3 Transparency + Gradient)

Simply place the div with the vertical gradient behind the div with the horizontal gradient (or vice-versa, it doesn't really matter), and make sure the coloring of the topmost gradient is not opaque.

//left sample
.back
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
    z-index:0;
}

.front
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
    z-index:1;
}

//right sample
.diaggradientback
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}

.diaggradientfront
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}

The documention on this filter does say that multiple filters may be applied together. However, as it turns out, applying more than one gradient filter results in only the last one being applied, so simply applying both filters to one layer doesn't work, and two layers are necessary.

Can you make a larger square and post a screenshot of it? It would be good to see how well it actually scales.

Added. It's not an even gradient, but I didn't bother trying to tweak it to be. One could, if it were desired, but one could also have different effects for each direction.

It's not the most semantically sound, nor concise way of doing it (but what cool effect is, under IE?), but cool nonetheless.

css - Diagonal Gradient in IE - Stack Overflow

css internet-explorer filter cross-browser gradient
Rectangle 27 96

.click
.change

@samjudson, in my testing this is not correct and jquery's click does trigger when i select the next radio button using arrow keys. (vista, ie7)

@samjudson: click events on radio buttons and checkboxes also fire when selecting them using the keyboard. Works in all browsers

I stand corrected - that does appear to be the case, however counter-intuitive it might be!

I love that this works with keyboard changes as well!

This seems to be the most popular answer to this particular question but it is not completely correct! click differs from change in that its eventhandler will also be called when clicking the already selected option whereas change does not. This answer has an example of how to use jQuery .data to compare the old and new values.

internet explorer - Getting jQuery to recognise .change() in IE - Stac...

jquery internet-explorer
Rectangle 27 91

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

This saved me with Twitter Bootstrap & IE Compatibility. FYI - This needs to be the FIRST meta tag.

Isn't this the same as <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ?

take care not to use any conditional comments before this tag. Otherwise it's not working! Found the hint there: stackoverflow.com/questions/3449286/

It does not work if conditional comments are used.

internet explorer - How to disable Compatibility View in IE - Stack Ov...

internet-explorer internet-explorer-8 internet-explorer-9 ie-compatibility-mode
Rectangle 27 91

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

This saved me with Twitter Bootstrap & IE Compatibility. FYI - This needs to be the FIRST meta tag.

Isn't this the same as <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ?

take care not to use any conditional comments before this tag. Otherwise it's not working! Found the hint there: stackoverflow.com/questions/3449286/

It does not work if conditional comments are used.

internet explorer - How to disable Compatibility View in IE - Stack Ov...

internet-explorer internet-explorer-8 internet-explorer-9 ie-compatibility-mode
Rectangle 27 84

Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.

This uses a plugin that uses some not well known/understood properties of Javascript to take the mouse event and send it to another element.

There is also another Javascript solution here.

Documentation of ie9 says it supports this property(i've not tried ie9 yet however).Anyway, i already had ideas in my mind which are given in the links but as i was looking for some css specific solution i cannot use them. I will try to modify the html/js code rather spending time on this problem.Thanks a lot for your time and help

"you can't expect to see it in IE browsers for another million years."

html - css 'pointer-events' property alternative for IE - Stack Overfl...

html css internet-explorer browser cross-browser
Rectangle 27 84

Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.

This uses a plugin that uses some not well known/understood properties of Javascript to take the mouse event and send it to another element.

There is also another Javascript solution here.

Documentation of ie9 says it supports this property(i've not tried ie9 yet however).Anyway, i already had ideas in my mind which are given in the links but as i was looking for some css specific solution i cannot use them. I will try to modify the html/js code rather spending time on this problem.Thanks a lot for your time and help

"you can't expect to see it in IE browsers for another million years."

html - css 'pointer-events' property alternative for IE - Stack Overfl...

html css internet-explorer browser cross-browser
Rectangle 27 75

I think "works fine in Firefox" is in the Quirks mode rendering only. In the Standard mode rendering, that might not work fine in Firefox too.

percentage depends on "containing block", instead of viewport.

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

To stretch to 100% height of viewport, you need to specify the height of the containing block (in this case, it's #container). Moreover, you also need to specify the height to body and html, because initial Containing Block is "UA-dependent".

html, body { height:100%; }
#container { height:100%; }

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Div 100% height works on Firefox but not in IE - Stack Overflow

html css internet-explorer firefox
Rectangle 27 70

The change event does not bubble in IE (See here and here). You cannot use event delegation in tandem with it.

live
$('#container select').change(/*...*/)

If you really want event delegation you might find some success trying what this person did and bind to click in IE only, which does bubble:

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
    /* test event.type and event.target 
     * to capture only select control changes
     */
})

But this browser detection feels really wrong. I'd really try working with the former example (binding directly to the drop downs). Unless you have hundreds of <select> boxes, event delegation wouldn't buy you much here anyway.

change
live()
on()

This would be one of the cases you can't get away from browser testing since you can't really feature test. However, for a full solution, you'd have to also handle keyup for keyboard navigation

@Juan: some think feature detecting a bubbling event is possible. See perfectionkills.com/

That's cool, thanks. Overview of the link that is applicable here: The post is about detecting supported events. By checking for a 'change' event on a div, you'll know whether the change event bubbles, since a div doesn't have its own change event.

javascript - jQuery change event on