When looking at a listing for eBay, for example:
http://catalog.ebay.com/Apple-iPod-classic-5th-Generation-Black-30-GB-/60655662?_pcatid=39&_refkw=ipod&_trkparms=65%253A12%257C66%253A2%257C39%253A1%257C72%253A4030&_trksid=p3286.c0.m14
The Price Trends chart shows up as iframe apparently using HTML 5 canvas. But IE does not support canvas element but still it shows up correctly in IE. How does it works in IE? Also it appears the src attribute of iframe is empty but there is HTML content within the iframe. How is this happening?
But my main question is how it is working in IE?
It uses a charting library called jqplot.
If presented to IE this calls it's excanvas script
Example of which is here
Excanvas
Related
I have a chrome extension which allows to write on screen in chrome tabs. The default behaviour looks like :
It works be simply inserting a canvas tag in the DOM and doing all the stuff in it. It works well in all sites. However, chrome PDF viewer behaves strangely when I use it :
Before -
After -
I don't think there is any issue with the extension because it works on all other sites. I think there is an issue with chrome PDF viewer itself.
I can attach the code here if asked in comments.
Ok, so I tried to replace all innerHTML += <value>; by insertAdjacentHTML("afterbegin",<value>); And now it's working fine.
It's because your canvas must be on top to ensure it will works on every website.
The z-index propery is not enough for that.
Hope that helped !
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
This is verrrrry similar to some existing questions:
javascript, image onload() doesnt fire in webkit if loading same image
image.onload event and browser cache
Except that instead of trying to load an html image, I'm working with a svg image. I have a SVG element on the page and a variable containing a data URI string. I want to create a image element, set it to display the data URI, and add it to the SVG element on the page. Here's my code:
var svg=document.getElementsByTagName('svg')[0]
var placed=document.createElementNS("http://www.w3.org/2000/svg", 'image')
placed.addEventListener('load',function(){
alert('loaded')
})
placed.setAttribute("href",test)
placed.setAttribute("x",100)
placed.setAttribute("y",100)
placed.setAttribute("height",100)
placed.setAttribute("width",100)
svg.appendChild(placed);
Where test is the data URI. This fires appropriately in Firefox and Chrome (and the image loads fine). It does not fire in Safari. I assume this is the same issue as the SO questions I linked above but trying to 'clear' the variable as suggested in some of those answers doesn't seem to do anything and I'm wondering if I need to do something more.
Here's a fiddle that should work great in Firefox/Chrome, not so great in Safari:
https://jsfiddle.net/362pbcLn/
If this is in fact the same caching issue, what do I need to do to clear the variable and get Safari to trigger the load listener?
For Safari (and Firefox) you need to change the href setter to
placed.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",test)
Firefox will likely support the simplified href only syntax fairly soon but there's no reason to use it the line above works on Chrome and IE Edge too.
I'm trying to use inline SVG for our icons. Specifically I am:
Combining all svg's into an svg sprite with grunt
Referencing them inline with the <use> tag ala this article
For the most part things are working well. However, I've run into problems on iOS browsers when I try to hide/show them with JS - http://codepen.io/meanspa/pen/vEGERZ
$('.expand-link').click(function(){
$('.expand-link').toggleClass('clicked');
});
Because for this codepen the SVG definitions are in the DOM it works fine as-is, but if you move them to an external file and try to use it in mobile Safari, the SVG that's hidden originally (.icon-contract) won't display when you click on it. In fact, the only way I've found to make this work is to set .icon-contract to display:block initially, and then set a delay in JS so that it hides it after a few hundred milliseconds.
So just to summarize, it looks like in mobile Safari:
If you're using the <use> tag to reference svg's in an external file
And if some of those are display:none when the page loads
Then they can't be displayed with JS after the fact
Has anybody else run into this problem?
Thanks.
Update: As Salmonface pointed out, only noticing this on iOS 7 and older, looks like it's fixed in newer versions.
Chris Coyier posted this workaround:
Use "width:0px; height:0px;" instead of "display:none".
Working great for me so far.
I encounter a problem when I want to display an SVG image with the library D3.js on Google Chrome.
Below is the code:
var svg = d3.select("body").append("embed");
svg.attr("src","img/drawing.svg").attr("type","image/svg+xml");
This code works on Firefox, but not on Google Chrome (same problem if I use object instead of embed).
But if I add this style to my SVG picture : attr("style", "display:block"), my picture displays on Google Chrome.
...Can someone explain me what happens? Because it's pretty ugly to display my image like that.
According to w3schools, the embed tag is "deprecated in HTML4 and XHTML (but allowed in HTML5)". You should use the object tag. The following snippet works in my Chrome:
var svg = d3.select("body").append("object");
svg.attr("data", "http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg")
.attr("type","image/svg+xml");