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?
Related
I modified this and am moving this comment to the top.
In keeping with Stackoverflow, this could be a bug in some underlying things that no one can fix. But I will consider the best method you propose keeping within the framework of our application to remove the spurious attribute as the solution. It would be unfair otherwise.
I have an oddity I am trying to solve which is baffling. First, it's unclear that it is IE except this behavior does not happen on Chrome or Firefox. We are using charting libraries from Anychart and D3 to generate SVGs on a page. All of this is great. The application is a printing application and extracts the resolved css + html into a separate div and sends this via REST to a formatting service.
The issue lies only in IE and only with the Anychart chart. If you examine this page:
http://www.xportability.com/XEPOnline/FOTestSuite.html
And look toward Image Example #4, you will see a chart. Using IE and DOM explorer, you will see this:
All looks fine. In fact all is fine if that was "real". If you use javascript to extract that SVG in anyway (simplest method is copy HTML in Explorer DOM), you will see that this element's HTML is actually:
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" xmlns="http://www.w3.org/2000/svg">
Even using document.getElementById("anychart").outerHTML in console returns this element this way.
Note the double declaration of the namespace. Well, that is the issue as that is an error.
It does not happen on the D3 chart, nor the static chart. only this chart.
It does not happen in Chrome nor Firefox.
And most odd, it does not even display this way in IE's own DOM explorer.
Am I missing something here? Is there something else we are doing that is making IE do this?
NOTE: I am not looking for answers like apply the regex against the serialized string or such. We can do that (in fact we already do) to close empty (non-closed) HTML tags to make valid XML.
NOTE2: I am not discounting the fact that this could exists in the underlying Anychart JS library used or be a bug in Internet Explorer. It does only appear using Anychart library. They have been contacted to comment. However, the fact that IE shows only one namespace in the DOM explorer and then two when exporting is suspect that it is an IE issue potentially. They have also been contacted through their support.
So, I understand there may be no "answer" to this question .. it could be a bug in another library or in a browser.
As such, this demo only works in Chrome and Firefox for the moment ... until we hack around this or solve in some other way.
After deep analysis Anychart Javascript library was the culprit. They fixed the bug and this does not happen anymore.
My webpage is not rending the content in the <main class="page-content"></main> tag in IE8. I am using the backbone.js framework, and I have a view appending elements onto the page. I also using html5shiv.
The first elements append just find (a navigation bar and all its elements); however, IE8 throws an error when it tries to append the .page-content element. I have traced the issue to an inconsistency in jQuery's find method. In IE8 only, when performing a .find('.page-content') on a DOM containing the tag, the method returns an element with the .outerHTML property set to <MAIN class=page-content>. Notice that the closing tag (and all the inner elements) is missing. This only happens in IE8 (I haven't tested >IE8 yet), and when it happens, it causes appendChild() method to fail inside jQuery's append() method.
I dug deeper into the jQuery's find method, and found that the source of the problem was when jQuery uses the Web API method querySelectorAll(). In jQuery's code, the developers commented the following:
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
However, I don't really know what this means...
I have created a jsFiddle example to demonstrate this issue: http://jsfiddle.net/VHL7Q/6/
If you open up the jsFiddle link in IE8, an alert will display:
<MAIN class=page-content>
Alternatively, if you open the jsFiddle link in Chrome or Firefox, an alert will display:
<main class="page-content">
<div class="help-toggle">
<i class="icon-info-sign"></i>
</div>
</main>
Short of righting my own find method for traversing the DOM tree, I don't know how to begin solving this problem.
NOTE: a "band-aid" type solution that seemed to work was to replace the <main></main> tag with a <div></div> tag. I cannot use this solution permanently however; I need help finding a way to use the <main></main> tag.
The trouble is that IE8 does not fully support HTML5. In particular, it has no idea what the element main is.
Some of these issues can be resolved by using an HTML5 Shim, but I don't know if it is 100% compatible.
Link explanation:
(The shim, in short, runs a document.elementCreate for all of the new HTML5 elements to kickstart the IE8 into realizing they exist.)
After six days of digging, I did what I should have done on day one. I updated my html5shiv and modernizr to their newest versions. Specifically I updated html5shiv from 3.6.1 to 3.7.0, and I updated modernizr from 2.5.3 to 2.7.1.
This does not directly answer my questions about the detailed functionality of jQuery and Web API, but it can be assumed that the newest version of a library might fix your problems with a five year old software product.
Thank you Jeremy and cookie monster for your help.
I want to create Elements with g tagname for SVG using JavaScript.
The next code work in Google Chrome but not in Firefox, and I want this work in both.
svg=document.getElementsByTagName("svg").item(0)
group=document.createElementNS("http://www.w3.org/2000/svg","g");
group.setAttribute("name","mygroup")
svg.appendChild(group);
Does anybody know a solution?
The only "problem" that is obvious here is that an attribute called name has no meaning in SVG. Did you perhaps mean id?
The only problem I had was with your first line:
svg=document.getElementsByTagName("svg").item(0)
I just had a quick try in some browsers (sorry, I don't have FireFox installed in a remotely sane way) and with some it didn't get the SVG, even though it was the only one on the page. So I gave the SVG an ID and then it worked. See: http://jsfiddle.net/9RhG2/
I am using the classes .js and .no-js on the <html> element to differentiate between layouts that have Javascript and those that don't.
With the <html> element, I added a default class of 'no-js'. Then I include a single line of script in the header, document.getElementsByTagName("html")[0].setAttribute("class","js"); to switch the html class to 'js'. Obviously this line of code will only work for browsers that have js enabled, so the <html> element will become <html class="js"> whereas non-js enabled browsers will continue to read <html class="no-js">.
And then I will simply use .js someElement{ font-weight:bold;} versus .no-js someElement{ font-weight:normal;} to style my page differently.
However, I find that this approach fails dramatically on IE7. On IE7, the script works - or so it seems. On Developer Tools, it shows <html class="js">. However, ALL css styling that start with .js are ignored by IE7, and IE7 behaves as though the <html> element has a class of .no-js. (Check out http://bit.ly/LMre3N to get a clearer picture.)
I can't begin to imagine what exactly is wrong here: is this a case of IE7 behaving wrongly when rendering CSS, or is it a case of scripting not working properly? Here's what I tried:
CSS
Changing the order of .js and .no-js declarations, as I figured it could be the latter overriding the former that's causing the problem - NOPE.
Changing the order of the script and stylesheets, since it might be because IE7 read the .no-js stylesheet before it read the script - NOPE.
Changing the specificity of the declarations - perhaps being more specific will lead IE7 to read the .js declarations - NOPE.
Removing the .no-js class from the document altogether, hoping that IE7 will thus read .js declarations. NOPE - it simply ignores both the .no-js and the .js declarations.
In short, IE7 totally and completely ignore the fact that there is a .js declaration. So I figured it might be the script that had problems, and here's what I did:
Javascript
I added 'type="text-javascript"' to <script> - No effect.
I tried document.documentElement instead of document.getElementsByTagName('html')[0] - still the same.
I used var htmlOrWhat=document.getElementsByTagName("html")[0];
alert(htmlOrWhat);, FF, Chrome, Opera, Safari, IE8, and IE9 returns '[object HTMLHtmlElement]', whereas IE7 returns [object], leading me to think IE7 is not reading the <html> element properly.
I then tried to read the id and lang attributes of <html> to test if IE7 is actually reading the element properly and yes, it retrieves these attributes correctly, it just simply refuse to apply .js css declarations to it.
By now, I'm at my wits' end (though I suspect the [object] anomaly is related to my problem), and I hope someone here at Stackoverflow will be able to help me out. I will really appreciate it if someone can point out exactly what's wrong with IE7 here, and how to fix it. Thanks in advance.
setAttribute() and getAttribute() are generally broken in IE7 and earlier (and compatibility modes in later versions). Use the element's className property instead.
document.getElementsByTagName("html")[0].className = "js";
Here's a fiddle demo - http://jsfiddle.net/ajcw/6Yz8x/1/
SetAttribute() doesn't work as you might expect in IE7. It won't set an attribute on an item after it has been created. You'll need another way to handle the change in IE7.
The answer below suggests using the className property. Or you could probably just use jQuery.
(More: IE7 and setAttribute() to remove classes)
setAttribute() and getAttribute() are broken in IE 7
check this out:
IE7 and setAttribute() to remove classes
hey dudes recently i came across a bizzare problem while trying to learn tabbing .. my code worked like charm in firefox and chrome it didn't work in any version of ie ...There will be two tabs and related contents when i click on tab1 corresponding content should be shown hiding other one ..same goes for tab2 it worked in ff and chrome .. but ie add all contents as i switch to other tabs my code goes like this http://jsfiddle.net/myth/PZZ6a/16/
The calls to "getElementsByName" aren't working for you. I think that's because "name" is not a proper attribute for <a> elements, but I have not found any MSDN documentation supporting that notion. The behavior, however, very strongly suggests that that's the case.
edit — well no, it doesn't seem that "name" is improper for <a> elements after all; however, for whatever reason that's the cause of your problems. The calls to "getElementsByName" are returning empty node lists, so your "for" loops don't do anything.
It definitely has to do with getElementsByName not working with the div element in IE. Easy fix though since you already have classes on those two things, use getElementsByClassName.
var tabs = document.getElementsByClassName("tab");
var seltabs= document.getElementsByClassName("seltab");
Working Fiddle: http://jsfiddle.net/CeVa9/1/
Note: Tested in IE9.