How to get Raphael XML string in Explorer 8? - javascript

I have a function that turns the Raphael svg into a PNG. It works for everything IE9+, Firefox and Chrome. The problem is that a lot of our clients still use IE8 and cannot upgrade b/c they still use Windows XP. What I need is to emulate this functionality for IE8:
var svgElement = document.body.getElementsByTagName("svg")[0];
var svgXml= (new XMLSerializer()).serializeToString(svgElement);
var finalSvg = svgXml.FixForRaphael();
The problem is that in IE8 document.body.getElementsByTagName("svg")[0] is "undefined" and that XMLSerializer is not in IE8 either. The latter I believe I have solved for, but I still cannot figure out how to solve the first. When I alert(svgElement) in Firefox it says it is a "Object SVGSVGElement". How do I get this object in IE8?

Related

Is IE11 really not compatible with getNamedItem() JS function?

I'm trying to use getNamedItem() function. I can correctly access items using Chrome, Firefox, IE9 and IE10 ... but not when using IE11.
According to this, it seems expected : http://www.w3schools.com/jsref/met_namednodemap_getnameditem.asp
My question is : do we have an equivalent function which could be used in order to work with IE11 ?
getNamedItem() is supported in IE9+, including IE11.
Try this in IE11.

"background-clip:text" has weird behaviour

I am using a page that is using the css of -webkit-background-clip:text with a polyfill to get it working in browsers that don't support this.
Obviously, some browsers use Webkit (Chrome, Opera & Safari) and some don't (Firefox, IE), and I want the page to display the same (give or take the background clip) however this isn't happening on Firefox. The polyfill I'm using works but translates the text very weirdly in Firefox. Strangely enough, IE works (though the polyfill doesn't).
This is Firefox:
This is a Webkit browser:
And finally this is IE:
The polyfill I'm using is https://github.com/TimPietrusky/background-clip-text-polyfill
I've tried contacting the guy who made it but can't get any reply out of him.
Basically, I have no idea why Firefox is translating the text at all. I want it to either act as Internet Explorer and just display the text as white, or correctly display it.
How would I go about doing that?
If you need a page to work off, there is too much for a jsfiddle, but a link to the page can be found here.
Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing
overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.

New Window in GWT, DOM, Internet explorer

I'm trying to create new Window with GWT as it shown here: https://stackoverflow.com/a/4205058/898588
This works in FF, Chrome, but doesn't work in IE (IE9 in my case). I see exception in dev. mode:
(null): DOM Exception: HIERARCHY_REQUEST_ERR (3)
So, this string:
bdElement.getOwnerDocument().getElementById("mainbody").appendChild(config.getElement());
throws this exception.
I've tried:
bdElement.appendChild(config.getElement());
but it was unsuccessfully.
How to make it work in IE?
Solution was found:
bdElement.getFirstChildElement().setInnerHTML(config.getElement().getString());
This works in IE, Opera, Chrome, FF
To be more specific, you only need to use setInnerHTML() instead of appendChild(), so the following piece of code will work as well in IE9 and Chrome as far as I can tell:
bdElement.getOwnerDocument().getElementById("mainbody").setInnerHTML(config.getElement().getString());

document.getElementById() returns null on IE9

I'm working on a popup and i'm having some hard time with Internet Explorer 9. This is the piece of code that gives me trouble:
var popUp= document.getElementById('projectInfo');
popUp.style.left=(tempX-310)+'px';
popUp.style.top=(tempY-110)+'px';
In IE9 (haven't tested in prior versions), popup is null. In adition, i've tried including my .js file just before the body closing tag and wrapping my function in a "document.ready()" function but none of this worked. The same code though works perfectly in Opera, Chrome and Firefox.
Does anyone know what's going on?
Note: The function is called in the body's onLoad atribute of my html.
Without using function it can't work
window.onload = function() {
var popUp= document.getElementById('projectInfo');
popUp.style.left=(tempX-310)+'px';
popUp.style.top=(tempY-110)+'px';
}
IE is having some known issues with getElementById.This post may help .
http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html
http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/
In previous versions of IE (and apparently Chrome and Firefox), getElementById would check for an object with the given id and if it didn't find it, it would take an element with that name.
IE9 doesn't do this, so you need to make sure you have an element with id = projectInfo, not just name=projectInfo. We just discovered this throughout one of our applications. Not great.

Can't get MozTransform to work with Javascript

I'm trying to get the zoom function for Firefox to work using javascript but no luck, what am I doing wrong?
function zoomIn() {
document.getElementById('increaseWrapper').style['MozTransform'] = 'scale(1.5)';
}
Thanks in advance.
Your code seems to work perfectly find in this jsFiddle in Firefox 6.
Remember, 'MozTransform' only applies to Mozilla derived browsers. Safari and Opera and others have their own name for that attribute until it becomes an endorsed standard.
If you're trying your code in mozilla 4+ browser, then there must be something else wrong with your code because what you have disclosed in your question works fine in the right browser with the right HTML.
Have you checked your browser's error console or debugger console to see if you're experiencing an javascript errors that might be keeping your code from executing?

Categories