Make grayscale on layer NOT <img/> in IE11 - javascript

How to make equivalent of
.anyClass
{
filter:grayscale(100%);
}
in IE11 for elements other than <img/>?
The code doesn't have to work in IE10 and earlier and other browsers.
I googled some solutions like:
.anyClass
{
filter:gray; /* IE9 */
filter:grayscale(100%);
-ms-filter:grayscale(100%);
-webkit-filter:grayscale(100%);
}
but it doesn't work on IE10 and IE11.
I also found solutions for <img/> but I want to use it on standard HTML elements like <div/>, <section/> (with elements internal it).
No found solution works.
BTW. The code may not work in other browsers. I know how to filter IE11. JS (without jQuery), CSS, SVG and HTML allowed.

Related

Modernizr fails to detect scrollbar stylability

I'm using Modernizr to choose to hide all scrollbars when a page is being viewed in firefox. This is because I've styled the scrollbars using webkit's ::-webkit-scrollbar selectors and haven't found a suitable alternative for firefox.
Since it's best practice to keep from using the User Agent String, I'm following the most common recommendation to use Modernizr for feature detection instead of browser detection.
I'm using the CSS Stylable Scrollbars property (cssscrollbar). That's supposed to return true for everything except firefox, but instead returns false for all browsers for me. (including Chrome and Safari, for which we have the scrollbars styled and working).
Other than including the custom-modernizr.js file in the header of the site and using it in javascript I'm not sure what other code is worth sharing, but I've got to be choosy with the code I share because it's for work.
Here's the bit where I check:
if (Modernizr.cssscrollbar) {
console.log("Browser has css scrollbars!"); // This never gets run in Chrome, Firefox, or Safari.
} else {
console.log("Browser does not have css scrollbars.");
}
Any ideas to fix Modernizr, or another way to determine when to remove the scrollbars?

How to dynamically insert an external animated SVG

Inserting an animated SVG via jquery (or plain javascript) makes them appear static in Chrome and Edge, although they show up fine in Firefox:
$(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use></svg>");
Inserting from a separate file and using an object or img tag seems to work fine in Firefox and Chrome, but still not Edge:
$(".loader").prepend("<object data='/images/loading-ring.svg' type='image/svg+xml'></object>");
Also see:
jsfiddle
Am I going about this the wrong way or is browser compatibility just really spotty?
Yes, you are right, unfortunately edge and old ie doesn't support the svg animations with SMIL.
Check here: http://caniuse.com/#search=svg%20animation

IE9 importing inline SVG <image> elements broken

I am using this method to import an SVG doc into a page, and it works pretty well, but in IE9, none of the <image> tags work after the import (they show up as broken images, even though their xlink:href attribute is correct). Why does this happen, and is there any way around it? Here's a simple test page. It works fine in Chrome, FF, etc, but not in IE9.
Apparently if I drop the xlink: and just use href, if fixes the problem in IE9, but breaks it in Chrome, etc. Weird! If anyone knows why, I'd be happy to accept your answer. See test 2.
Adding href, in addition to xlink:href fixes the issue everywhere.
The js implementation of importNode provided in this answer doesn't properly set namespaced attributes, it should use setAttributeNS to set xlink:href correctly. This other implementation of importNode seems to handle that, have you tried using that one instead?

Reliably detecting <img> tag support for SVG

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.
This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.
For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.
A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

Get value from uncomputed css style with javascript / jquery

I have a small question concerning css styles and javascript / jquery. Lets say i define the following css style.
.myStile { padding: 5px }
Now I'd like to access the property of padding while not writing an html element to the document. I came up with the following idea which only works with Firefox (IE and Chrome say NaN)
var div = $('<div class="myStile />');
var padding = parseInt(div.css('padding-left'), 10);
is there a way to make this work in IE and Chrome (well trident and webkit I guess) as well? I know that one's able to read whole css files via javascript (and get the class, the properties and so on ...), but that seems to be a bit overkill.
Thanks meo for your comment. This post answers the question. Here's a google find which answers the "other browsers than chrome, firefox, safari" issue.

Categories

Resources