i am trying to make a rather old javascript work in newer browsers(currently only supports ie6).
Well it isn't working and is littered with
document.getElementById('idValue').style.pixelHeight = x
i had never seen this before so did some research, and everything i found is dated 2008 and earlier.
So is pixelHeight still supported in HTML5? (and in firefox and chrome)
EDIT: Zenith said it won't work in firefox, so how should i be doing this in a cross browser way?
EDIT2: we are trying to make a user resizeable panel so it was going
get pixelHeight += mouseMovement
but when i enter for the first time height = 'auto', off to do some more research, thanks guys
Short: Don't use it.
Use:
document.getElementById('idValue').style.height = x+'px';
From what I've been able to glean, pixelHeight was supported by IE6 and Opera 8 and I've not been able to find any documentation about it anywhere doing a quick Google, my javascript books and MDN. Using it must be dangerous ground to be walking on.
EDIT:
One thing I did find is that pixelHeight retrieves height so, perhaps changing to that would solve the problem. That site says pixelHeight works in all browsers but Firefox. However, it's obviously non-standard so you shouldn't use it while height is standard.
I replaced var height = pixelHeight with clientHeight.
and added + "px" onto my calculations.
This seems as standard as I can get it (well, it works on Firefox, Chrome, and IE10 is using completely different code CSS3 and grid based).
Related
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!
Looking at the MDN page for createImageBitmap it states that Chrome supports the options parameter from 52 onwards. But in testing with Chrome 57, I can't seem to get the resizeWidth or resizeHeight options to work. I've got a demo running here:
https://codepen.io/anon/pen/YVwrXN
From my understanding, what I've provided should end up with an image bitmap half the size of the original image being drawn to the canvas tag, but it appears to be full size (I know I can rescale in drawImage() but that's not what I'm looking for here). I found some Chromium notes on implementing it that makes it sound like it should work, so I'm wondering if I'm doing something wrong.
As of today, (on both chrome 60 canary and stable 57) you still need to set the Experimental canvas features flag in chrome://flags.
I agree that MDN page should state this.
Edit 2021:
Chrome now supports this natively. But other browsers still don't (Safari doesn't support the API at all). If you need this for cross-browsers projects, I wrote a createImageBitmap monkey-patch which enables this feature in all browsers.
I'm using Raphael 2.1 to draw 15 lines at the same time. Each lines is made up of 50 2 pixel paths. Performance is best in Safari and Chrome, good in FF, weak in Opera, and chokes in IE9. Microsoft says that SVG will run in IE9, but Raphael.svg returns false in IE9.
I've been reading posts related Raphael and IE all day, and the only solution that I've seen for improving Raphael's performance in IE9 is to install Chrome Frame.
Has anyone encountered any other solutions?
Raphael uses svg in IE9 and work with reasonable performance. You have to be careful that IE is not being forced into IE8 standards mode (which frequently happens). If IE9 falls back to IE8 standards then it will end up using VML, which is very slow, and there is no efficient alternative to SVG in general in IE8 or below.
When faced with this problem using IE8 I ended up using divs and css to achieve rendering of lines, rectangles and text. Since that's all I required it was very fast even in IE8, helped out by buffering the divs inside the container. If your problem is simple enough, you may wish to consider a pure DOM solution. See: https://github.com/Matt-Esch/simpleCanvas.js for inspiration.
I'm currently working on a WYSIWYG solution and need a function to correctly select with a range a node (by this I mean the node itself, not only it's content)
DOM lvl2 clearly have a function for this w3.org/ranges and define that
range.selectNodeContents() // Select the contents within a node
and
range.selectNode() //Select a node and its contents
The problem is that when selectNode() perfectly work with Firefox or even ie9, it seem to be impossible to achieve with any Webkit browser (at last Chrome and Safari). On Webkit both selectNodeContents() and selectNode() select the node content only (which according to the specs seems to me to be a bug)
To make it work I tried to emulate the selectNode() goal by using
range.setStartBefore(node);
range.setEndAfter(node);
but the result is still the same, it work everywhere (ie>8 of course) but not on webkit browsers..
If you want to try it I made a little jsfiddle with which you can play here (just open the console and look at the console.warn result which is not the same on webkit :/ )
I searched a lot but I can't find a way to actually select a full node on webkit browsers.
By miracle would some of you know a way to do it or even just any tip to continue my quest ? :/
ps : I know "rangy" lib but I can't use it in my project and ,from what I read in the source, I'm not even sure they deal with that thing anyway :/
The problem is not with selectNode(), which works fine in WebKit, but with WebKit's selection object, which mangles ranges to fit in with its own (not always unreasonable) idea of where selection boundaries and caret positions are allowed to be. There are bugs filed against this with WebKit:
https://bugs.webkit.org/show_bug.cgi?id=23189
https://bugs.webkit.org/show_bug.cgi?id=15256
You're right, Rangy does not deal with this, preferring instead to reflect the reality of the browser's native selection. Pretending the selection is different would quickly lead to odd behaviour.
I'm currently trying to generate pdf from an html page with charts generated by raphael.
It works great on every browser except internet explorer < 9 for which raphael use vml.
I'm using wkhtmltopdf to convert the page, it's using webkit to render the page so it doesn't support vml when IE is used.
Is there a way to force Raphael to render svg instead of vml in IE?
I know it won't display, but what I would do is render it once in vml and a second time in svg.
I've seen that I can set the property
Raphael.type = "SVG";
Raphael.svg = true;
but it doesn't work after the object has been instantiated.
I too am one of those people that want Internet Explorer to generate an SVG. It doesn't have to be displayed, just sent to the server. So I looked into this:
You can force Raphael into thinking it should generate an SVG doing so:
var rProto, paper;
rProto = Raphael.prototype.raphael;
rProto.svg = true;
rProto.vml = false;
rProto.type = 'SVG';
var paper = Raphael(...);
However, Raphael will now throws tons of errors, because Internet Explorer will follow the codepath of modern browsers, which will obviously not work. I looked at those errors and they don't seem trivial to fix or work around.
A lot of the commands reference R.vml try setting that as well,
Raphael.vml = false;
According to this thread (a bit old though) there is no way to make IE accept SVG elements:
http://groups.google.com/group/raphaeljs/browse_thread/thread/5a05193c0334bda7/25776b86e78d3c2f?lnk=gst&q=force+svg#25776b86e78d3c2f
However, I don't understand what you mean with "it's using webkit so it doesn't support VML when IE is used". As far as I know, WebKit is a different renderer and it is in no way related to IE. Perhaps if you develop a bit further in your issue, we can help finding a solution.