I am trying to animate a ratings control (star) by updating the gradient coordinates.
Please find the svg here. This is perfectly working in firefox. but in Internet explorer (IE 11), it is not getting rendered. I tried by removing polygons and adding them back. But nothing worked. In chrome, for first second first star is filled, then erased and getting animated! Please look into this.
Thanks in advance :)
[Update]:
I am able to produce animation in the control I referred above. check the link. I donot know y, but in IE (ie11) updating a gradient using JavaScript is not updating the polygon using the gradient. In ff & chrome , after updating gradient data we can observe the change in poolygon or some other object using the gradient. So, in IE, rather than updating existing svg oibjects, I started removing object, creating a new object with updated data and added to SVG tree. It started working. But it is an overhead. Anyone can suggest be a better approach! And, initial blink in chrome and IE still exists. As of now, I am hiding the initial blink by using timer function in code after calling animate() object. Can anyone help in solving this?
thanks
Related
I can not run this visualization on firefox, while I can do it on Chrome and even on Edge :
https://naustud.io/tech-stack/
Since I was very inspired by it and wanted to analyze it - I am a beginner with d3.js -, the fact that this visualization can not be rendered on all browsers is a bit of a drag on my approach. .
Does anyone have an explanation? Can this be solved? Thank you everyone.
It seems like in Firefox, the clientWidth of the svg element isn't being read, possibly related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=874811. Instead the width variable is being set to 0, and that looks like it causes infinite recursion when trying to pack the chart.
To correct this, you can use .node().parentNode.clientWidth (via How to get SVG element dimensions in FireFox?), by adding this before the console.log in techstack-main.js (Line 490):
if (!width) {
width = svg.node().parentNode.clientWidth;
}
When using context.createRadialGradient() on a 2d context, the gradient is not rendering as expected in Chrome v65.
The example above is from MDN, but it's also happening in some of my own code.
The gradient works fine in Firefox v59, Safari v11. It fails in Opera v52, so maybe it's a new bug in webkit? I've tested this on two different computers, so shouldn't be anything in my local setup causing it.
Anybody else experiencing this bug or better yet know how to fix it?
EDIT: Found an open issue on Chromium here.
Apparently this is not a consistent bug, and should be fixed in v66 if I'm reading the comments correctly.
As mentioned in the post above, there's an issue in Chromium v65. It should all be fixed in v66.
If you do need to fix it right now, the hacky way is to make sure that the gradient doesn't receive identical x and y arguments for the first and the second circle:
var gradient = ctx.createRadialGradient(100,100,100,100,100,0); // Doesn't work
var gradient = ctx.createRadialGradient(100,100,100,100.001,100,0); // Works
You can see the fix in effect here. Happy hacking!
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
There is a page that uses PHP to fetch search results from Google Search API and then it puts the results on the page some funny way in a circle. The code may look crappy but seems that it works more or less fine in Firefox. When you enter a search query and click submit button or Next/Previous links, it fills the wheel with results. The problem is its work in IE. It works there very slowly and then it doesn't clear the wheel before filling in new data, but puts it over that. My friend asked me to help him with this code. Please give me a piece of advice how I can fix it. Thanks so much!
Raphael runs very slowly under IE documented here.
As I understand it, VML itself in IE is fast enough, but the Raphael layer has some inefficiency.
I see you're using Raphael.js, which renders vector in VML/SVG (depending on browser). IE8 has degraded support for VML, unfortunately, and I hear it's also quite a bit slower than IE7. BTW, in IE7 it's kinda funny looking.
In terms of Raphael, it may be something as simple as resetting some context, I'm not sure. I've looked at Raphael before, but never used it.
Been banging my head against this one for a while, and figured I'd turn to the experts for some advice.
I've made a jQuery snippet that grabs the values from a table and plots them in a line graph on a canvas element (also generated by the JS). All's well in Firefox and Chrome, but Safari and Opera aren't displaying the plotted points. I've reviewed in Firebug, Web Inspector debugger, JSLint, and checked the markup with the w3 validator, but still can't find anything glaringly obvious. I've also tried including the canvas element in the HTML rather than generating it dynamically, as well as substituting a tag pair for the self-closing tag I've been using—all to no avail.
Any chance one of you guys could help me out?
Thanks!
I draw lots of lines in Safari so I checked my code and the pattern is...
beginPath
moveTo
lineTo(s)
closePath or stroke
In your code moveTo is before beginPath, so I switched that in one of my apps and it stopped drawing, so try switching those around.
I think this is a problem of the time when you call stroke(). Try to call it only after the for loop, and try differents positions of the closePath call.